怎么在vue中写方法

1. vue中符号的写法问题

你第一个 `` 是es6的语法 用于拼接字符串的 里面的变量则用${xxx} 表示
第二个用的话只能'xxx'+变量+'xxx' 用加号拼接

2. vue怎么在方法里面写循环

export default{ data(){ return { } }, mounted: function () { myfun("myCls",/*这里传入每次数据 */); } } li循环重复多次，每个li上都绑定有一个myfun这个方法，并且每个myfun内部传入的数据都不同，比如我想实现跟以下代码一样的效果：

3. vue中关于属性和方法客户端代码怎么写

直接写就行了。 如果需要传入变量，则写成： vue中用v-bind:属性名="属性值" 的方式动态设置属性，注意属性值的引号内不要加{{}}

4. .vue文件怎么写js代码

单个组件里面可以使用import $ from 'jquery' 引用

当前你得使用npm把jquery 安装了。 把jquery 用exportdefault 导出来(就是在jquery.js的最后一行写上 exportdefault $)， 然后使用import $ from ‘jquery的文件地址’

至于 script标签里面怎么写

import$from'jquery'
exportdefault{
data:function(){
return{
testData:1//这个对象里面定义所有的变量这些变量可以在html直接和dom绑定
}
},
mounted:function(){
//生命周期函数，有好几个执行的顺序都不一样，可以根据场景选择不同的生命周期函数这块一般是初始化数据的地方
},
methods:{//这里写所有的方法，这些方法可以在方法内部使用this.方法名调用，也可以在html中使用@时间名=‘函数名()’调用
init(){
//实例方法
//使用this.变量可以访问data中的变量
console.log(this.testData)
}
}
}

5. vue中如何书写函数式代码

子组件向父组件传值，为了增加回调函数的复用性，事件绑定采用函数式编程，但是总是不能正确调用实例方法返回的函数：
1
2
3
4
5
6
7
8
9
10
11
12
13
<slideDown :choosestyle="chooseStyle"
:useroptions="useroptions1"
@changeSubData="receiveData(prodMoneyOff)"
></slideDown>
data () { message: { prodMoneyOff: ''
}
}, methods: {
receiveData (item) { let _self = this
console.log(`选择的item是${item}`) return function (val) { console.log(`传递的值是 ${val}`)
_self.message[item] = val
}
}
}

6. VUE中在方法里写的button按钮对应的方法怎么写啊

var vm = new Vue({
el:"#main",
seen: true,
data:{
enlist: "",
status: "",
},
created:function(){
this.get_data();
},
methods:{
get_data:function(){
var _self=this;
var idArray = window.location.pathname.split("/");
var id = idArray['5'];
$.post("{:url('/enlist/index/details')}",{enlist:id},function(e){
console.log(e);
_self.enlist = e;
_self.status = e.recorde;
})
},
recruitment:function(){
var idArray = window.location.pathname.split("/");
var id = idArray['5'];
window.location.href="/enlist/index/entry_form/enlist/"+id;
}
}
});
方法名就写在methods里面，例如<button @click="recruitment()"></button>就是调用的上面recruitment方法；

7. vue怎么在组件里写methods

作用域：它是指对某一变量和方法具有访问权限的代码空间,在JS中,作用域是在函数中维护的。表示变量或函数起作用的区域，指代了它们在什么样的上下文中执行，亦即上下文执行环境。Javascript的作用域只有两种：全局作用域和本地作用域，本地作用域是按照函数来区分的。闭包：在js中的我的理解就是函数嵌套函数，当内部函数在定义它的作用域的外部被引用时,就创建了该内部函数的闭包,如果内部函数引用了位于外部函数的变量,当外部函数调用完毕后,这些变量在内存不会被释放,因为闭包需要它们.使用闭包要注意：1）由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题，在IE中可能导致内存泄露。解决方法是，在退出函数之前，将不使用的局部变量全部删除。2）闭包会在父函数外部，改变父函数内部变量的值。所以，如果你把父函数当作对象（object）使用，把闭包当作它的公用方法（PublicMethod），把内部变量当作它的私有属性（privatevalue），这时一定要小心，不要随便改变父函数内部变量的值。

8. vuePress里面怎么写vue.js代码

2.1 新建文件夹docs

配置package.json，添加下述两行

{
"scripts": {
"docs:dev": "vuepress dev docs",
"docs:build": "vuepress build docs"
}}

进入docs文件夹 创建 README.md文件

此时运行命令

npm run docs:dev

此时文件夹结构

study
+--docs
+----README.md
+--package.json

运行访问http://localhost:8080/

image.png

结束运行 ，执行命令

npm run docs:build

然后看文件变化 多了个node_moles
docs 多了个 .vuepress文件夹

study+--docs+----.vuepress+------ dist //打包后的文件夹+----README.md+--package.json+--node_moles

我们在.vuepress 创建
config.js 文件
添加

mole.exports = {
title: 'Adroi媒体API 接口文档', // 设置网站标题
description : 'Adroi',
base : '/v1/adroi-h5/adroiapi/',
themeConfig : {
nav : [
{ text: '接口定义', link: '/apiword' },
{ text: '接口字段定义', link: '/api' },
{ text: '附录：错误码', link: '/error' }
],
sidebar: {
'/' : [
"/", //指的是根目录的md文件 也就是 README.md 里面的内容
"apiword", 根目录创建 apiword.md文件 "api",根目录创建 api.md文件 "error" 根目录创建 error.md文件 ]
},
sidebarDepth : 2
}}

image.png

3）添加静态图片


4)添加指定样式

添加样式 分两种 一种不用预编译处理、一种使用

//不使用预编译处理//直接在md文件底部添上<style></style>

//使用预编译处理
首先需要安装所需的模块 举例：stylus
npm i stylus stylus-loader -D<style lang="stylus"></style>

5)vuePress可添加js代码

既然是尤大大的作品 那肯定是支持vue语法的
在MD文件中直接写入js的语法

<script>
export default{
//...do something
}</script>

6)代码发布或上传至服务器

关于发布问题：首先我们知道在打包后的文件都是静态文件之前的MD文件都被打包成html静态文件了,其次在文件config.js中 base至关重要

6-1发布在云盘中如网络云盘 github上可直接通过链接访问

在云盘上创建根目录如vuepress，然后在config中 bese这部分就填写/vuepress,然后进行打包操作，再然后把打包后的文件上传至云盘上的vuepress文件中

6-2 通过服务器发布

在服务器上安装Apache或者nginx 这里拿nginx举例：
至于nginx 安装 以及配置文件的解读使用 我这里就不详述了，不了解的童鞋可以自己查阅相关文件

同样base的填写很重要

//为了简单明了 我们把打包好的文件放入nginx中html文件下 之前的文件可以清空server {
listen 8081; //监听8081端口
server_name localhost; //localhost:8081即可指向也可写别名如local.vuepress.com.cn 那我们访问这个端口的别名加端口就可以
location / {
root /nginx/nginx-1.9.15/html; //至关重要你的入口文件在本机的位置
index index.html index.htm; //入口文件
}
}

转载于：https://www.jianshu.com/p/7a2cc8a7f40c

9. vue如何动态调用方法

通常我们会在组件里的 template 属性定义模板，或者是在 *.vue 文件里的 template 标签里写模板。但是有时候会需要动态生成模板的需求，例如让用户自定义组件模板，或者设置组件的布局。
例如要做一个类 select 的组件，用户传入 options 数据，通过 value prop 获取选中值，最基本的原型如下。
Vue.component('XSelect', {
template: `
<div class="select">
<input :value="value" readonly />
<div
class="option"
v-for="option in options"
@click="value = option.value">
<span v-text="option.label"></span>
</div>
</div>`,

props: ['value','options']
})

如果此时需要增加一个 API 支持让用户自定义 option 部分的模板。此处用 slot 并不能解决问题。
通过 $options.template 修改
通过打印组件对象可以获得一个信息，在 $options 里定义了一个 template 属性，写在 template 标签里的模板，最终编译后也会在 $options.template 里。通过文档的生命周期 可以得知，在 created 的时候， 实例已经结束解析选项， 但是还没有开始 DOM 编译 也就是说，如果用户通过 prop 的数据我们可以获得，但是模板其实还没有渲染成 DOM。经过测试，在 created 修改 this.$options.template 是可以改变最终生成的 DOM 的，同时也能拿到 props 的内容。
那么我们可以修改下代码，使其支持自定义模板
Vue.component('XSelect', {
props: [
'value',
'options',
{
name: 'template',
default:'<span v-text="option.label"></span>'
}
],

created() {
varoptionTpl =this.template

this.$options.template =`
<div class="select">
<input :value="value" readonly />
<div
class="option"
v-for="option in options"
@click="value = option.value">
${optionTpl}
</div>
</div>`
}
})

用户使用是就可以传入模板了
<x-select
:value.sync="value"
template="<span>标签: {{ option.label }}, 值: {{ option.value }}</span>"
:options="[
{value: 1, label: 'a'},
{value: 2, label: 'b'},
{value: 3, label: 'c'}
]">
</x-select>

可能存在的问题
我们知道 Vue 在内部帮我们做了许多优化，但是在这里可能会由于某些优化导致动态拼接的模板无法渲染成功。例如这里我们不使用 v-for 而是手工遍历 options 生成需要的 HTML
consttpl = options.map(opt =>`<div>${this.optionTpl}</div>`)

this.$options.template =`
<div class="select">
<input :value="value" readonly>
${tpl}
</div>`

这里会导致一个 BUG，如果一个页面有多个 x-select 组件，并且 options 长度不一样，会导致长的 options 的组件后面几个选项渲染不出来。究其原因是 Vue 会帮我们缓存模板编译结果。翻看代码可以找到 vue/src/instance/internal/lifecycle.js 里有做优化，同时提供的 _linkerCachable 本意是给 内联模板 使用。我们可以通过设置 this.$options._linkerCachable = false 达到我们的目的。
这样我们就可以开发让用户自定义布局的组件了，用户传入布局参数，通过手工拼接模板，设置了 _linkerCachable = false 也不会被缓存。
通过 $options.partials 动态添加 partial
使用 partials 也能达到添加自定义模板的目的，但是通常的做法是要全局注册 partial，这么做并不优雅。 vue-strap 就是这么做的。如果重名了会被覆盖（初次渲染不会，但是数据更新重新渲染 DOM 时就会被覆盖）。
通过文档我们知道可以在组件内部通过 partials 属性注册局部的 partial，因此自然而然也可以在 this.$options.partials 去动态添加了。

10. 怎样在vue中编写出能生效的css代码

你的 .h1是一个类了，此时你需要在上边h1标签里面加上 calss=“h1”，这样你的.h1就能生效了；但是看你的写法是想直接控制标签，那么你只需要把 .h1的 . 去掉就行了，标签直接写就可以了，不用带“.”。