常用的Vue的指令和它的⽤法

常用的Vue的指令和它的⽤法

1.v-bind:

当一个属性想要使用 data中的数据时，在属性前，加上一个v-bind:(动态属性)
简便语法： v-bind: 省略成 :属性=“属性值”

2.v-on:

给元素进行绑定事件，v-on:click=“alertFn”
事件方法定义在 与data平级的属性 methods中
methods:{ // 方法集合
alertFn() {
}
}
简便语法: v-on: 省略成 @事件=“回调方法”

3.v-if:

指令加载元素上，v-if的条件只有true或者false，当条件为真时，显示在页面上，当条件为假时，移除dom节点
v-else-if: 给元素加v-else-if时，当前dom元素上面的dom元素 必须要有v-if v-else
给元素加v-else时，当前dom元素上面的dom元素 必须要有v-if或者v-else-if

4. v-show:

指令加载元素上,v-show的条件只有true或者false，当条件为真时，显示在页面上，当条件为假时，隐藏dom节点
在使用上，如果说隐藏显示切换的不频繁，建议使用v-if,如果频繁使用，建议使用v-show template 模板标签，也可认为是
透明标签，v-if可以控制删除节点或者添加节点，v-show不起作用

4.v-for:

循环数组：
指令使用在想要循环显示的元素上，

第一个参数item，表示数组中的每一项
第二个参数index，表示数组中的下标（索引）
循环对象：

{{value,key}}

第一个参数value,表示循环对象中的属性值
第二个参数key,表示循环对象中的属性
循环字符串：
第一个参数v,表示 字符串中每一个字符
第二个参数i,表示 字符串中字符对应的下标
循环数字：
第一个参数，表示数字从1到循环的数结束
第二个参数，表示数字索引，从0开始

5.v-model 双向数据绑定

给可以用户操作的一些标签，标签中数据发生改变，数据也跟着发生改变

1. input：
   text类型
   v-model 相当于给input动态绑定了一个value，在输入时候，触发一个事件，改变value值
   2.input：
   radio类型
   v-model 相当于给input radio类型，加了一个点击事件，点击事件做了同步 radioValue值
2. input:
   checkbox类型
   v-model
   1.v-model 后面的值是true 或者false ，相当于给标签加了一个是否选中的属性checked，还加一个点击事件，点击事件做数据同步
   2.v-model 后面的值是数组，收集input checkbox类型中的value值，放到这个数组中
   4.select：
   v-model: 可以将用户选择的数据，v-model绑定的值，就是用户操作之后的变化值

6. v-text:

可以填充元素内容，指令右侧值就是内容

7. v-html:

他可以将带有标签形式的字符串，进行解析渲染
与原生js中innerHTML功能 很像

8.v-cloak:

可以解决插值表达式闪烁的问题，解决办法
给元素加上一个 v-cloak 指令
在style标签中，加上 [v-cloak]{display:none;}