Vue中常用指令

一、文本类指令

1.{{变量名}} 文本插值
用于插入文本，类似于jq中的innerText。但页面刷新时会存在双大括号闪过的情况，可以使用v-text代替，也可使用v-cloak来解决。
在添加v-cloak后，要加固定样式：[v-cloak]{display: none}。

2.v-text
可用于渲染文本类的声明式变量到页面中，
变量类型是字符串、数值可正常显示，但如果变量类型是undefined、null类型则无法显示，变量类型若是布尔型，则会发生隐式转化，转化为字符串显示。

3.v-html
用于渲染HTML字符串，使得传入的数据可被浏览器解析。
它默认具有了防注入攻击（xss）功能。

4.v-once
它对数据只进行一次渲染，当数据发生改变时，并不会再重新渲染改变。和v-cloak一样其后是没有值。

二、动态属性

v-bind
可以给标签添加动态的属性，由于在开发中会频繁使用，所以可简写为冒号。例如：v-bind:attr，可简化为:attr。

三、事件绑定

v-on
给标签绑定事件，同样也可简写为@，例如：v-on:事件名=‘事件处理器’，简写为：@事件名=‘事件处理器’。
它还有一些事件修饰符：.enter enter键
.stop 阻止冒泡
.prevent 阻止默认行为
它们可以进行链式调用。

事件对象：当事件没有传参时，事件处理器默认第一个参数就是事件对象；当有参数时，则需要使用$event手动传递事件对象，变量与事件对象并没有顺序要求。

四、表单绑定

v-model
用于表单的双向绑定，方便我们进行取值。
双向绑定：当表单视图发生改变时，v-model所对应的声明式变量则会自动更新；当声明式变量发生变化时，表单视图也会更新。

表单修饰符：.trim 去除文本类表单值的首位空字符
.number 把字符串转化为Number类型
.lazy 当长表单失焦时，再将表单上的最新值更新到声明式变量上。
它们可以进行链式调用。

用v-model进行表单绑定，它是一种语法糖。
对普通文本框来讲，v-model = v-bind:value + v-on:input。
对单选按钮组、复选框来讲，v-model = v-bind:checked + v-on:change。
对下拉框来讲，v-model = v-bind:value + v-on:change。

v-model在组件化中应用也非常广泛，用于父子组件通信。

五、列表循环

v-for
可用于循环数组、字符串、对象、数字等一切可迭代的变量。
普通数组

data:{
      list:[1,2,3,4,5,6]
}

<p v-for="(item,i) in list">--索引值--{{i}}   --每一项--{{item}}</p>

对象数组

data:{
      list:[1,2,3,4,5,6],
      listObj:[
        {id:1, name:'zs1'},
        {id:2, name:'zs2'},
        {id:3, name:'zs3'},
        {id:4, name:'zs4'},
        {id:5, name:'zs5'},
        {id:6, name:'zs6'},
      ]
}

<p v-for="(user,i) in listObj">--id--{{user.id}}   --姓名--{{user.name}}</p>

对象

data:{
      user:{
        id:1,
        name:'托尼.贾',
        gender:'男'
      }
}

<p v-for="(val,key) in user">--键是--{{key}}--值是--{{val}}</p>

数字

<!-- 注意：如果使用v-for迭代数字的话，前面 count 的值从 1 开始-->
<p v-for="count in 10">这是第{{count}}次循环</p>

六、条件渲染

v-show
用于对元素进行显示与隐藏，其后的值永远是布尔值，若不是，会发生隐式转化。
原理：给元素添加或者移除display: none来实现。

v-if
用于对元素进行显示与隐藏，其后的值永远是布尔值，若不是，会发生隐式转化。
原理：通过DOM操作添加或者删除节点。
当存在v-else-if/v-else 时，与v-if之间不能有任何节点。
小结：使用v-show实现隐藏功能时，页面初始化的开销比较大。使用v-if实现隐藏功能时，页面初始化开销比较小。当一个元素节点需要频繁进行显示与隐藏，建议使用v-show来做；反之建议使用v-if来实现。

七、其它指令

v-slot
组件化的基础语法之一，可简写为#。

v-pre
一般用于调试，被v-pre包裹的节点，不再参与vue的编译解析。