vue之常用指令

（1）mustache 插槽指令即{{}} 比如{{message}}、{{str1+str2}}支持字符串，表达式和方法等。

（2）v-once 该指令使用后表示元素或者组件只渲染一次，不会随数据改变而改变。比如
{{message}}

   (3) v-html 该指令可以解析html代码并渲染，该指令后面往往跟上一个string类型数据，比如
 
 其中url是html标签片段。

（4）v-text 指令用途和{{}}一样，用于显示文本内容，但没有插值指令灵活，比如
 
 

（5）v-pre 该指令使用后跳过元素编译的过程，用于显示原本的文本内容，比如
{{message}}
 页面上就会显示{{message}}文本。

（6）v-cloak指令避免页面出现{{message}}渲染闪动，比如
{{message}}

（7）v-bind数据绑定，用于数据动态显示，缩写“:属性名”。属性可以绑定字符串，数组，对象 等。

          比如 其中变量url会动态绑定到src上。

         比如 你好啊 类选择器也可以绑定对象，其中isActive是变量

         比如 你好啊 style也可以绑定对象

(8)v-on 事件绑定，用于事件监听，缩写“@事件名”

注意：在事件定义需要一个参数，但是在事件调用的时候不传参数，vue会默认将浏览器生成的event事件对象作为参数传入到方法。 

（9）v-show 指令用于节点的显示与隐藏，比如
{{message}}
隐藏，但还是存在dom中，只是给元素添加一个行内样式：display：none；

（10）v-if和v-show非常相似，都是决定一个元素是否渲染。不同的是 v-if=flase 时，元素就不存在dom中。

注意：如果显示与隐藏频繁切换，选择v-show,只有一次切换选择v-if。

(11)v-for 遍历对象或数组或对象数组，使用时给对应的元素添加:key属性，为了高效的更新虚拟dom。

比如遍历数组



{{item}}

 

注意：在遍历对象的时候，可以获取对象的key和value,若只获取一个值，那么获取到的是value。

（12）v-model 表单绑定指令，实现双向实时绑定。切记和:model是两码事。

注意：v-model有一些修饰符，比如

v-model.lazy 可以让数据失去焦点或回车时才会更新。

v-model.number可以让输入框的内容自动转换成数字类型。比如'0123'->123

v-model.trim可以去除内容左右俩边的空格