面试题目之：说出至少4种vue当中的指令和它的用法？

说出至少4种vue当中的指令和它的用法？
（1）{{}} 、v-html 和v-text ==》 非表单元素
{{}}：以{{data的属性名}}的方式直接使用在标签之间
例如：

{{name}}

{{}}不能解析data中属性值中的标签
当vue.js没有加载出来时，页面中显示{{}}一类的数据，不利于用户 体验
解决闪屏问题：通过指令v-cloak实现：v-cloak绑定在作用于vue实例的标签上，当vue.js没有加载完成时，设置[v-cloak]的样式为：diplay： none，当vue.js加载完成后，将[v-cloak]作用的元素样式为：display： block
V-html：以标签的属性形式使用
v-html写在标签中，当做属性展示
v-html的值是data的属性名
标签中的内容不再浏览器体现.
v-htmlt可以解析data中属性值中的标签
当vue.js没有加载出来时，页面中不展示任何数据
V-text：同样以标签属性的形式使用
v-text写在标签中，当做属性展示
v-text的值是data的属性名
标签中的内容不再浏览器体现
v-text不能解析data中属性值中的标签
当vue.js没有加载出来时，页面中不展示任何数据
（2）v-model双向数据绑定指令
表单元素
v-model的值是data的属性名
input框的值是data的属性名对应的值
value属性在这里不起任何作用
（3）V-bind指令：绑定属性
媒体元素
v-bind指令：一般绑定的是属性（将标签原有的属性与data的属性进行绑定）
书写形式： v-bind：属性名=“data中的属性名”
v-bind：简写形式： ：属性名=“data中的属性名”
（4）v-if和v-show
指令都是用于控制元素的隐藏与显示，使用的时候同样是当做标签的属性进行使用

春花秋月何时了

南来北往

相同点：都是控制着元素的显示和隐藏
不同点：当表达式的值为false，v-if采用的惰性模式，v-show通过样式中的属性display：none来控制
在实际应用中：
v-if：一般使用在页面一旦加载完成，几乎不再修改，可以使用
v-show：使用在元素切换频率比较高的情况下(eg：选项卡切换)
（5）v-for指令
遍历
遍历数组
遍历数值
遍历字符串
遍历对象
数组：v-for="(item，index) in 数组名称" v-for="(item，index) of 数组名称" item：指数组的每一项 index：指数组下标

• {{index}}=== {{item}}

对象：v-for="(item，key，index) in 对象名称" item：指对象中的每一项值 key：对象的键 index：对象的下标
（6）v-once指令
作为标签的属性进行使用 v-once：指当前元素和它的所有子级首次在页面显示完成之后，不会再进 行修改

{{num}}