VUE常用指令

VUE常用指令

 

重点

 在VUE中 v-xxx的行内属性 我们统称为VUE指令，这些指令都是基于自定义属性设置的，只不过在VUE上有特殊含义，在vue加载成功并进行处理时，会安装相关规则解析和渲染视图。遇到对应的指令实现对应的功能

VUE指令分两种，有原生对应的，无原生对应的

有原生对应的

v-text给非表单元素设置内容 相当于小胡子语法 ，会把所有内容都当作文本。 有时候可以代替{{}}小胡子写法，因为在vue没加载完成前，页面会显示{{xxx}} 体验不好

v-html给非表单元素设置 相当于原先的innerHTML，对标签自动识别 

v-for   v-for =' (值，index) in  vue变量' 值代表数组中当前项，index是索引 这两个变量只能使用在v-for标签上及其内部

无原生对应的 

v-bind 给原生内置属性动态绑定数据，专门用来处理行内属性的指令（css style src）一般缩写：

v-cloak  用来解决小胡子显示问题 可以使用 v-cloak 指令设置样式，这些样式会在 Vue 实例编译结束时，从绑定的 HTML 元素上被移除。搭配css使用，

比如v-cloak:{display:none}

v-once 绑定数据是一次性的，后面无论数据怎么更改，视图也不会重新渲染，vue对有这个指令的元素只渲染一次。可用于优化速度

v-pre  告诉VUE这个标签和子标签都不用渲染，提高vue编译效率

VUE指令之if,show，model

 重点

v-if 控制当前元素是否在结构中加载，控制的是组件的加载和卸载操作=》DOM的增加和删除

还有v-else  v-else-if  使用时中间不能穿插其他标签

v-if 和v-show区别 

条件不成立时 v-if是整个标签都不加载，v-show是加载了标签同时设置了display:none

性能消耗方面 v-if有比较大的切换开销 v-show有比较大的初始加载开销

在频繁的切换中，v-show比v-if性能低一点

v-model表单和数据的相互绑定 

原理，先把数据绑定给表单元素，一般把数据赋值给表单元素的value.监听表单元素内容改变，内容改变后会把对应数据也改变。数据改变，视图中用到数据的地方会重新渲染

表单v-model使用  

按照v-model进行分组，单选框的数据是一个值，复选框的数据是一个数组，每一个框都有自己的value,谁被选中，值就是被选中元素的value值，相反值是多少，

对应的元素也会被默认选中

 

个人总结