本篇介绍指令,内置指令和自定义指令。
内置指令分为以下几类。
第一类语法类,分支,v-if, v-else-if, v-else。循环v-for
第二类客户端JS, 事件v-on。表单v-model,动画v-show。
第三类绑定DOM关系,v-text,v-html,v-slot, v-bind。略。
第四类杂项,v-pre,v-cloak,v-once。
1、内置
1.1 语法类
1.1.1 分支
v-if, v-else-if, v-else相当于编程语言中的if, else if, else语句。
它根据条件去判断是否渲染DOM,条件的改变会导致重新渲染DOM结构,效率低下。Vue为了提高效率,会复用相同的组件,例如v-if, v-else下有input组件,它会被复用,导致错误,解决方案是为组件添加key,标识作用。
1.1.2 循环
v-for的使用场景有以下七组
遍历数组,遍历对象,遍历范围(数字),与v-if指令结合使用,在template中使用v-for,在component中使用v-for。
1.1.2.1 数组
当为数组时,它的格式为:
<li v-for='(item, index) in items' :key='item > {{ index }} -- {{ item }} </li>
其中items为数组,item为当前遍历的对象,index为当前遍历对象所在的索引值。
当v-for执行完成之后,会产生数组大小相等的li标签,若不使用key属性,则li标签是无法区分的,若想操作某个li元素,基本无法实现。而当数组中某个元素的值改变,其他值不改变时,必须定位到改变的元素对应的li,否则需要重新渲染一遍,效率很低,所以为了准确定位,将数组的元素与li标签一一关联起来,此时元素必须是唯一的,若出现重复,则会抛错。
若key重复,相当于数据库中有两条主键相同的数据,肯定会报错。
数组发生变化时,不一定会改变li标签,只有通过某些方法改变数组才会导致li标签的变化。
改变的方法:push, pop, shift, unshift, splice, sort, reverse。
不改变的:执行delete items[0],执行items.length = 0等其他的语句。
1.1.2.2 对象
当为对象时,它的格式为:
<li v-for='(value, name, index) in obj' :key='name'> {{ index }} -- {{ name }} -- {{ value }} </li>
其中obj表示对象,value表示属性的值,name表示属性的名称,index为属性的顺序,无意义。
v-for指令循环,本质是调用Object.keys()方法,它只会返回可枚举的属性,即属性的元属性enumerable值为true。
1.1.2.3 数字范围
当为数字范围时,它的格式为:
<li v-for='n in maxNumber' :key='n'> {{ n }} </li>
其中maxNumber表示最大值,n为当前遍历的数字,默认从1开始。
它等价于for(let i=1; i< maxNumber; i++)。
1.1.2.4 v-if
与v-if配合使用有两种格式,
<v-if> <v-for> </v-if> <!-- 第二种 --> <v-for v-if>
第一种情形相当于if(条件){for循环},第二种情形相当于for循环{if(条件)}。
1.1.2.5 template
在template中使用v-for, 除template无属性外,与其他的HTML标签用法是相同的。
1.1.2.6 component
在component中使用v-for,本质与其他没有任何区别,唯一有区别的在于可以将v-for作用域中的变量传递给component组件,例如遍历数组时,传递元素和索引。
传递变量的方向为父组件中引用的子组件实例---->子组件(个人理解)。
1.2 client js
1.2.1 事件
1.2.2 表单
1.2.3 动画
1.3 DOM结构类
v-text,v-html,v-bind,v-slot等略。参考DOM部分。
1.4 杂项
1.4.1 v-once
在标签上添加v-once,表示标签的内容为静态内容,意味着它只会被渲染一次。即使其中属性改变,也不会渲染。
示例如下:
<span v-once>This will never change: {{msg}}</span>
msg属性改变,不会再次渲染span。
1.4.2 v-pre
在标签上添加v-pre,表示标签的内容无需渲染。即它将被Vue忽略。
示例如下:
<span v-pre>This will never change: {{msg}}</span>
html为{{msg}} ,而不是msg的属性值
1.4.3 v-cloak
在标签上添加v-cloak,表示标签的内容在未渲染完成时,先隐藏。例如某些情况网路比较慢时,会直接显示源码,使用v-cloak解决此问题。