vue中指令&语法

在做vuex项目时，会看到很多指令表达式，总结了自己不太会或者很久不用，忘记了的部分指令

this.$el

指向当前组件的DOM元素,当需要对整个组件进行dom操作时，可使用

process.client

可以为true/false, nuxt.js为服务端渲染，在服务端不存在window或者document对象，服务端渲染的时候可能会报错，所以加上一个if(process.client){}再进行判断

@click.native

在vue组件中，如果想在组件的根元素上绑定事件，直接使用@click=‘xxx’是无效的，必须要添加。native修饰符@click.native=‘xxx’
等同于在子组件中内部处理click事件然后向外发送click事件：this.$emit(‘click’, fn)

v-for:使用v-for指令根据遍历数组进行渲染，有两种遍历形式

<div v-for="(item,index) in list"></div>  <!-- index为索引（可选）-->
<div v-for="item of list"></div>          <!-- 使用of-->

example:

<ul id="app">
    <li v-for="item in items">
        {{pre}}-{{item.text}}
    </li>
</ul>
<script type="text/javascript">
var example = new Vue ({
	el:‘#app‘,
	data:{
		pre:‘作用域‘
        items:[
          {text:‘文本1‘},
          {text:‘文本2‘}
        ]
	}
})
</script>

会被渲染为：

<ul id="app">
    <li>作用域-文本1</li>
    <li>作用域-文本2</li>
</ul>

当v-for和v-if在同一节点时，v-for优先级更高，意味着v-if会运行在每个v-for循环中

v-model

用于在表单上创建双向数据绑定。
v-model会忽略所有表单元素的value、checked、selected特性的初始值。因为它选择Vue实例数据做为具体的值。

<div id="app">
    <input v-model="orange">
    <p>hello {{orange}}</p>
</div>
<script>
    var app = new Vue({
        el: ‘#app‘,
        data: {
            orange:‘橙子‘
        }
    })
</script>

在input框里面输入值，p标签里面的值就会跟着改变，这就是双向数据绑定。
v-model有三个修饰符：

.lazy

默认情况下，v-model同步输入框的值和数据。可以通过这个修饰符，转变为在change事件再同步。

<input v-model.lazy="orange">

.number

自动将用户的输入值转化为数值类型

<input v-model.number="msg">‘

.trim

自动过滤用户输入的首尾空格

<input v-model.trim="msg">

v-on

v-on主要用来监听dom事件，以便执行一些代码块。表达式可以是一个方法名。
简写为：【 @ 】

<div id="app">
    <button @click="handleChange"></button>
</div>
<script>
    var app = new Vue({
        el: ‘#app‘,
        methods:{
            handleChange:function (event) {
                console.log(222)
            }
        }
    })
</script>

vue中指令&语法

原文：https://www.cnblogs.com/360minitao/p/14407975.html