vue学习之第5天

今天学习了：

迭代器

迭代器模式是一种相对简单的模式，迭代器的使用可以极大地简化数据操作，目前的绝大部分语言都内置了迭代器

（1）forEach迭代器
forEach方法接收一个函数作为参数，对数组中每个元素使用这个函数，只调用这个函数，数组本身没有任何变化，即不改变原始数组

（2）map迭代器
map迭代器和forEach有些类似，区别：可以生成新数组

（3）every迭代器
every方法接受一个返回值为布尔类型的函数，

（4）some迭代器
some方法也是接受一个返回值为布尔类型的函数，只要有一个元素使得该函数返回true，该方法就返回true

（1）遍历对象for-in，条件遍历中的var可以省略
小结：
①for … in 循环中的代码每执行一次，就会对数组的元素或者对象的属性进行一次操作
②数组的键名是数字，但是for…in循环是以字符串作为键名“0”、“1”、“2”等等，而key为string类型，可能会意外导致如：‘2’ + 1 == ‘21’
③某些情况下，for…in循环会以任意顺序遍历键名
注意：总之，for…in循环主要是为遍历对象而设计的，不适用于遍历数组

（2）遍历对象键–Object.keys()
构造函数Object里面自带的方法Object.keys()（取键名）

（3）遍历对象值–Object.values
构造函数Object里面自带的方法Object.values()（取键值）

（4）for…of遍历，优点如下：
①有着同for…in一样的简洁语法，但是避开了 for-in 循环的所有缺陷
②for-of 循环不支持普通对象，但如果你想迭代一个对象的属性，可以用 for-in 循环（这也是它的本职工作）或内建的 Object.keys() 方法

基本指令：

v-cloak不需要表达式，它会在Vue实例编译结束时从绑定的HTML元素上移除，经常和CSS的display:none;配合使用。
v-cloak遮罩指令

指令主要职责就是当表达式值改动时，相应的将某些行为应用到DOM上

与JS条件语句if、else-if、else类似，Vue条件指令也可以根据表达式的值在DOM中创建或销毁元素/组件。

注意：v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别。

v-if、v-else-if、v-else语法
2.1.0版本新增，v-else-if，顾名思义，充当 v-if 的“else-if 块”，可以连续使用。类似于 v-else，v-else-if 也必须紧跟在带 v-if 或者 v-else-if 的元素之后。

Vue在渲染元素时，出于效率考虑，会尽可能复用已有的元素而非重新渲染

如果不希望元素复用，可以使用Vue.js提供的key键属性，可以决定是否复用元素

当需要遍历数组或者枚举对象循环显示时，需要用到列表渲染指令v-for。表达式需要结合in使用，类似item in items的形式

v-for 指令需要使用 item in items 形式的特殊语法，items 是源数据数组并且 item 是数组元素迭代的别名。

列表渲染也支持用of来代替in作为分隔符，更接近JS迭代器语法。

对象遍历
第二个可选参数： property 名称 (即对象的键名)：
第三个可选参数：index索引

整数遍历
此外v-for还可以迭代整数

v-for与v-if可以结合使用
当它们处于同一节点，v-for 的优先级比 v-if 更高，这时v-if 将分别重复运行于每个 v-for 循环中。当你想为仅有的一些项渲染节点时，这种优先级的机制十分有用

在Vue中v-for控制循环次数的方法可以通过以下两种方法

1.截取循环的数据（截取循环的数据长度，从而控制循环的次数）

2.通过v-if来控制

注意事项：不推荐v-for与v-if同级使用。当它们处于同一节点，v-for 的优先级比 v-if 高，这时v-if 将分别重复运行于每个 v-for 循环中

为了给Vue一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key 属性。key属性的类型只能为 string或者number类型。

Diff算法有三大策略：
1、Tree Diff
2、Component Diff
3、Element Diff
三种策略的执行顺序也是顺序依次执行。

key属性标识原理diff算法作用小结：
1、diff算法的作用是用来计算出 Virtual DOM 中被改变的部分，然后针对该部分进行原生DOM操作，而不用重新渲染整个页面。
2、在采取diff算法比较新旧节点的时候，比较只会在同层级进行, 不会跨层级比较

key属性标识小结：
①简单理解：给 了Vue元素 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素。
②建议尽可能在使用 v-for 时提供 key attribute，除非遍历输出的 DOM 内容非常简单。
③key是 Vue 识别节点的一个通用机制，建议理想的key值是每项中都有的且唯一的id，不推荐使用index索引作为key。
④重要性：如果每一个虚拟DOM节点没有一个key值，他就没有自己的一个名字。当我们在做新旧虚拟dom的比对时，旧状态的虚拟节点就与难以与新状态的虚拟节点之间确立关系。当每一个虚拟节点都有唯一key值时，新旧状态的虚拟节点很快就能知道谁是谁，这样就极大提升了diff算法的效率。

v-bind回顾：

语法格式1：单个语法格式
v-bind:attributeName=variable

语法格式2：对象语法格式
v-bind=“{attributeName1:variable1,attributeName2:variable2,……}”

语法格式3：数组语法格式”绑定类名”
v-bind:attributeName=“[variable1,variable2,……]”

class-对象语法-单类名切换

给v-bind:class设置一个对象，可以动态切换class。
语法：传给 v-bind:class 一个对象，以动态地切换 class：

class-对象语法-多类名切换

除了单个类名切换，在对象中也可以传入多个属性来动态切换多个 class

class-对象语法-类名共存

v-bind:class 指令也可以与普通的 class 属性共存

class-对象语法-对象包裹

绑定的数据对象不必都定义在模板里，也可以用一个大对象包裹起来
对象包裹形式优点：如果需要添加一个class时，只需要在变量里添加属性，并设置该属性为true即可，所以相对来说更加自由。

class-对象语法-计算属性

当:class的表达式过长或者逻辑复杂时，可以绑定计算属性，这是一种友好且常见的语法。

class-数组语法-普通数组

当需要应用多个class时，可以使用数组语法，给class绑定一个数组，应用一个class列表

class-数组语法-表达式1
可以使用三元/目运算符来根据条件切换class

class-数组语法-表达式2
首先它是数组，因此第一个g存在，因此有样式名fontGreen；
其次，是一个三元表达式，会判断r的值，如果为true（或隐式转换为true），那么就绘将r的值添加到数组，否则添加s的值。

class-数组语法-数组对象嵌套
当class为多条件时，三元表达式写法较为繁琐，可以在数组里嵌套对象，使用对象写法

class-数组语法-计算属性
与对象语法一样，当:class的表达式过长或者逻辑复杂时，可以绑定计算属性computed，这是一种友好且常见的语法。

内联样式style-对象语法
v-bind:style 的对象语法十分直观，看着非常像 CSS，但其实是一个 JS对象。CSS 属性名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，记得用引号括起来) 来命名

内联样式style-对象包裹语法
大多数情况下，直接写一长串的样式不便于阅读和维护，所以一般写在data或者computed里

内联样式style-计算属性语法
也可以用计算属性用法绑定

以下是小编自己的理解，如有问题请提出
小编加以改正
如有补充，请联系小编