vue日常积累

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、如果都是同一类型的组件(即：两节点是同一个组件类的两个不同实例，比如：

与

)，按照原策略继续比较Virtual DOM树即可
2、如果出现不是同一类型的组件，则将该组件判断为dirty component，从而替换整个组件下的所有子节点

即把C更新成F，D更新成C，E更新成D，最后再插入E，是不是很没有效率？
所以需要使用key来给每个节点做一个唯一标识，Diff算法就可以正确的识别此节点，找到正确的位置区插入新的节点。

vue中列表循环需加:key=“唯一标识” 唯一标识可以是item里面id、name等，因为vue组件高度复用增加Key可以标识组件的唯一性，为了更好地区别各个组件 key的作用主要是为了高效的更新虚拟DOM