Vue.js常用指令

(一）vue常用的指令

1.数据渲染：v-text、v-html、{{}}

2.条件渲染 控制模板隐藏:v-show 、v-if、v-elsev-for 

3.渲染循环列表v-on

4.绑定事件v-bind 绑定属性

（二）指令用法

1.插值表达式（{}）：当模型中的数据发生改变时，那么视图中的数据也对应发生变化

2.v_text ：将一个变量的值渲染到指定的元素中

3.v-html：可以真正输出html元素

4.v-model：实现双向数据绑定

5.v-bind：绑定页面中元素的属性

6.v-if ：作用：判断是否加载固定的内容，如果时真的，就加载，如果是假的，就不加载。

语法：v-if = "判断表达式"

7. v-show：作用：判断是否显示内容 语法：v-show = “判断表达式"

v-if 和v-show相同点和不同点：

1.相同点：都可以实现对于一个元素的显示和隐藏操作

2.不同点：v-if 是将元素添加或移除dom树模型中， v-show只是在这个属性上加了display:none而已

3.v-if 有更高的切换消耗，安全性高。v-show初始化消耗大一点，所以如果需要频繁切换并对安全性没有要求时，可以使用v-show，如果在运行时，条件不可能改变的话，使用v-if好一点。

8.v-for  作用：控制html元素中的循环  语法：v-for = "item in 集合"

9. v-on  作用：对页面中事件进行绑定， 语法：v-on：事件类型 =”监听器“ 缩写@事件类型 = ”监听器“

参考资料：https://www.51zxw.com/