class语法 单类名切换
给v-bind:class设置一个对象,可以动态切换class。
isActive为true时,结果为
isActive为false时,结果为
类名切换
除了单个类名切换,在对象中也可以传入多个属性来动态切换多个 class。例如
类名共存
v-bind:class 指令也可以与普通的 class 属性共存,例如
对象包裹
绑定的数据对象不必都定义在模板里,也可以用一个大对象包裹起来,
优势:如果需要添加一个class时,只需要在变量里添加属性,并设置该属性为true即可,所以相对来说更加自由。
例如:
内联对象语法
v-bind:style 的对象语法十分直观,看着非常像 CSS,但其实是一个 JS对象。CSS 属性名可以用驼峰式 (camelCase)
或短横线分隔 (kebab-case,记得用引号括起来) 来命名:
js迭代器
forEach迭代器
forEach方法接收一个函数作为参数,对数组中每个元素使用这个函数,只调用这个函数,数组本身没有
任 何变化,即不改变原始数组
map迭代器
map迭代器map迭代器和forEach有些类似,区别:可以生成新数组
every迭代器
every方法接受一个返回值为布尔类型的函数,对数组中每个元素使用这个函数,如果对于所有元素,该函数均返回true,
则该 方法返回true,否则返回false
some迭代器
some方法也是接受一个返回值为布尔类型的函数,只要有一个元素使得该函数返回true,该方法就返回true
for in
遍历对象for-in,条件遍历中的var可以省略
基本指令 v-cloak
v-cloak不需要表达式,它会在Vue实例编译结束时从绑定的HTML元素上移除,经常和CSS的display:none;配合使用
v-if
指令主要职责就是当表达式值改动时,相应的将某些行为应用到DOM上,以v-if为例v-if指条件性渲染,为true时渲染DOM
,否则不进行渲染:
v-else
与JS条件语句if、else-if、else类似,Vue条件指令也可以根据表达式的值在DOM中创建或销毁元素/组件。
v-if、v-else-if、v-else语法
条件渲染指令-key属性
Vue在渲染元素时,出于效率考虑,会尽可能复用已有的元素而非重新渲染,
如果不希望元素复用,可以使用Vue.js提供的key键属性,可以决定是否复用元素
注意:key的值必须是唯一的
列表渲染指令v-for
v-for用于将一个数组对应为一组元素,至此只需操作数组,便可以自动将元素变化映射到真实的DOM节点上。
v-for 指令需要使用 item in items 形式的特殊语法,items 是源数据数组并且 item 是数组元素迭代的别名
列表渲染也支持用of来代替in作为分隔符,更接近JS迭代器语法。
可选参数:索引
除了上述语法外,v-for表达式还支持可选参数“索引”,例如:
除了数组外,对象的属性也是可以遍历的
v-for+v-if结合使用
v-for与v-if可以结合使用当它们处于同一节点,v-for 的优先级比 v-if 更高,这时v-if 将分别重复运行于
每个 v-for 循环中。当你 想为仅有的一些项渲染节点时,这种优先级的机制十分有用,如下:
除了同级,二者也可以嵌套使用
v-for控制循环次数
在Vue中v-for控制循环次数的方法可以通过以下两种方法
1.截取循环的数据(截取循环的数据长度,从而控制循环的次数)
2.通过v-if来控制
key属性由来与虚拟DOM
1、当数据发生变化时,vue是怎么更新节点的?
要知道渲染真实DOM的开销是很大的,比如有时候我们修改了某个数据,如果直接渲染到真实dom上会引起整个dom树的
重 绘和重排,有没有可能我们只更新我们修改的那一小块dom而不要更新整个dom呢?
方案:diff微分算法能够帮助我们。
先看一下diff算法的处理方法,对操作前后的dom树同一层的节点进行对比,一层一层对比,如下图:
Diff算法有三大策略:
1、Tree Diff
2、Component Diff
3、Element Diff
三种策略的执行顺序也是顺序依次执行。
iff算法有三大策略之Tree Diff
Tree Diff 是对树每一层进行遍历,找出不同,如下图所示
Diff算法有三大策略之Component Diff
Component Diff 是数据层面的差异比较
1、如果都是同一类型的组件(即:两节点是同一个组件类的两个不同实例,比如:
2、如果出现不是同一类型的组件,则将该组件判断为dirty component,从而替换整个组件下的所有子节点
即把C更新成F,D更新成C,E更新成D,最后再插入E,是不是很没有效率?
所以需要使用key来给每个节点做一个唯一标识,Diff算法就可以正确的识别此节点,找到正确的位置区插入新的节点。
vue中列表循环需加:key=“唯一标识” 唯一标识可以是item里面id、name等,因为vue组件高度复用增加Key可以标识组件的唯一性,为了更好地区别各个组件 key的作用主要是为了高效的更新虚拟DOM