vue中的自定义指令

在vue中有很多自定义指令，比如：v-on、v-for、v-text和v-html、v-show和v-if、v-bind、v-model等，在这些指令中，部分指令我们很容易弄混淆。今天我们就来梳理总结下几个比较像是的指令。

v-on

作用：为元素绑定事件

用法：

1，@符号可以代替v-on，其中v-on：后面是点击的方式，=的后面是定义的方法名

2，绑定的方法写在methods属性中

3，也可以传递自定义参数，事件修饰符

如：dolt事件里有两个参数

v-for

作用：根据数据生成列表结构

语法：（item，index）in 数据

用法：

1，数组经常和v-for结合使用

2，item和index可以结合其他指令一起使用

3，数组的长度会同步到页面上，是响应式的

v-text和v-html

区别：

1，v-text设置标签的内容，用于渲染普通文本；

2，v-html可以输出html文本

3，v-text和{{}}表达式渲染数据，不解析标签

4，v-html不仅可以渲染数据，而且可以解析标签。

v-show和v-if

相同：都是动态显示dom元素，v-show和v-if都能够控制一个标签在页面上显示

区别：

1，v-show：根据真假切换元素的显示状态

v-show是通过设置DOM元素的display样式属性控制显隐；

2，v-if：根据表达式的真假，切换元素的显示和隐藏（操纵dom元素）

3，v-if是动态的向DOM树内添加或者删除DOM元素；

总结：v-if只要在标签上值是false，在dom元素上就不存在了。

v-show依然存在，不过是变成了display=none

注意：平时在使用v-show指令性能更好，因为不会频繁把指令聪dom元素上添加或删除

v-if和v-else

也就是if...else的效果

扩展v-else-if

v-bind

作用：用于绑定数据和元素属性

语法：v-bind：属性名=

用法：

1，v-bind可以省略不写

2，另一种写法，对象的名active，表示要添加的类名，isActive是vue中的数据，表示在什么情况下添加该类名

<div class="app">
    <a v-bind:class="{active:isActive}">click me</a>
</div> 

v-model

最大的作用——双向数据绑定

1，修改表单元素里面的内容，message里面的内容也会跟着改变

2，修改message里面的值，表单元素里面的值也会改变