VUE之内置指令（基本、条件、列表渲染）

什么是迭代器？又分为哪几种？下面有小编我来给代价一一介绍下？

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

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

var list=[111,222,333,444,555]	
		   list.forEach(demo)
		  function demo(x,y,z){
			  console.log(x);/*迭代原目标*/ //
			  console.log(y);/*索引*/
			  console.log(z);/*数组本身*/
		  }

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

function x(add) {
			return add * 2;
		}
		var list = [111, 222, 333, 444, 555];
		var newList = list.map(x);
		console.log(newList);

（3）every迭代器
every方法接受一个返回值为布尔类型的函数，对数组中每个元素使用这个函数，如果对于所有元素，该函数均返回true，则该方法返回true，否则返回false

var list=[2,4,6,8,10];
			function event(num){
				return num%2==0;
			}
		console.log(list.every(event)) //true

var list=[2,4,6,11,10];
			function event(num){
				return num%2==0;
			}
		console.log(list.every(event)) //fasle

口号：有假即假，全真则真；
注意：只有全是真的情况下才会选中，
他的应用场景是：全选和全不选的业务逻辑

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

var list=[3,5,7,11,10];
			function event(num){
				return num%2==0;
			}
		console.log(list.some(event)) //true

有一个真的真的就是真的
口号：有真即真；
应用购物车删除功能

遍历对象for-in，条件遍历中的var可以省略

var xiaoming={
			name:"二狗",
			age:20
		}
		for(var x in xiaoming){
			console.log(x)
		}	//打印出来的是name,和age

可以同过他的键名来获取他的值代码如下

var xiaoming={
			name:"二狗",
			age:20
		}
		for(var x in xiaoming){
			console.log(x+xiaoming[x]	)
			//打印出来的是name二狗,和age20
		}

这里补充下JS遍历操作中常见的for-in
作用：用于对数组或者对象的属性进行循环操作
语法：
案例：

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

注意：总之，for…in循环主要是为遍历对象而设计的，不适用于遍历数组

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

var xiaoming={
			name:"二狗",
			age:20
		}
		console.log(Object.keys(xiaoming))//["name","age"]

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

var xiaoming={
			name:"二狗",
			age:20
		}
		console.log(Object.values(xiaoming))//["二狗",20]

基本指令之v-cloak

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

<style type="text/css">
			[v-cloak]{
				display: none;
			}
			
</style>
<div id="demo" v-cloak>
			{{name}}
</div>
/*js代码*/
		var demo =new Vue({
			el:"#demo",
			data:{
				name:"小点点"
			}
		})

v-cloak遮罩指令

条件渲染指令v-else-if

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

<div id="demo" v-cloak>
			<p v-if="num==1">111</p>
			<p v-else-if="num==2">222</p>
			<p v-else-if="num==3">333</p>
			<p v-else-if="num==4">444</p>
			<p v-else-if="num==5">555</p>
			<p v-else-if="num==6">666</p>
			<p v-else="">默认情况</p>
</div>
/*js代码*/
var demo =new Vue({
			el:"#demo",
			data:{
				name:"小点点",
				num:null
			}
		})

多条件编译指令

列表渲染指令v-for

简介：
v-for用于将一个数组对应为一组元素，至此只需操作数组，便可以自动将元素变化映射到真实的DOM节点上。
v-for的用法代码如下：

<div id="demo" v-cloak>
			/*也可用下列代码把索引给过滤写出来*/
          /*<ul v-for="(book,index) in books">
				<li>{{index}}---{{book.name}}</li>
			</ul>*/
		/*文中的in也可以换成of    效果是不变得*/
			<ul v-for="book in books">
				<li>{{book.name}}</li>
			</ul>
</div>
/*js*/
	var demo =new Vue({
			el:"#demo",
			data:{
				
				books:[
					{name:"西游记"},
					{name:"红楼梦"},
					{name:"水浒装"},
					{name:"三国演义"}
				]
			}
		})

遍历对象有三个值
代码如下

<div id="demo" v-cloak>
			
			<ul v-for="(value,key,index) of persons">
				<!-- 可以传三个值分别是 值 键 下标 -->
				<li>{{value}}--{{key}}--{{index}}</li>
			</ul>
</div>
// 结束代码
			data:{
				
				persons:{
					name:"二狗",
					sex:"雌性"
				}

也可以遍历数字代码如下

<ul v-for="x in num">
				
				<li>{{x}}</li>
			</ul>
/*js代码*/
data:{
num:20
}

也开业配合v-if来使用 比如让他超过12块显示代码如下

<ul v-for="x in num" v-if="x>=12">
				
				<li>{{x}}</li>
			</ul>

js代码
data:{
num:20
}

列表渲染指令v-for之key

状态维护key属性，接下来介绍下Vue中v-for循环key属性注意事项。
当Vue用 v-for 正在更新已渲染过的元素列表是，它默认用“就地复用”策略。如果数据项的顺序被改变，Vue将不是移动DOM元素来匹配数据项的改变，而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。
为了给Vue一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key 属性。key属性的类型只能为 string或者number类型。

小小案例代码如下：

key之Diff算法

key属性标识由来：
1、当数据发生变化时，vue是怎么更新节点的？
要知道渲染真实DOM的开销是很大的，比如有时候我们修改了某个数据，如果直接渲染到真实dom上会引起整个dom树的重绘和重排，有没有可能我们只更新我们修改的那一小块dom而不要更新整个dom呢？
方案：diff微分算法能够帮助我们。

key属性原理diff算法步骤：
1、先根据真实DOM生成一颗virtual DOM
2、当virtual DOM某个节点的数据改变后会生成一个新的Vnode
3、然后Vnode和oldVnode作对比，发现有不一样的地方就直接修改在真实的DOM上，然后使oldVnode的值为Vnode。

key属性标识原理：
vue和react的虚拟DOM的Diff算法大致相同，其核心是基于两个简单的假设
先看一下diff算法的处理方法，对操作前后的dom树同一层的节点进行对比，一层一层对比，如下图：

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

Diff算法有三大策略之Tree Diff
Tree Diff 是对树每一层进行遍历，找出不同，如下图所示

Diff算法有三大策略之Component Diff

Component Diff 是数据层面的差异比较
1、如果都是同一类型的组件(即：两节点是同一个组件类的两个不同实例，比如：

与

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

Diff算法有三大策略之Element Diff
Element Diff真实DOM渲染，结构差异的比较
当节点处于同一层级时，Diff提供三种DOM操作：删除、移动、插入。

key属性标识原理：
当某一层有很多相同的节点时，也就是列表节点时，Diff算法的更新过程默认情况下也是遵循以上原则。比如一下这个情况：

希望可以在B和C之间加一个F，Diff算法默认执行起来是这样的

key属性标识小结：
④重要性：如果每一个虚拟DOM节点没有一个key值，他就没有自己的一个名字。当我们在做新旧虚拟dom的比对时，旧状态的虚拟节点就与难以与新状态的虚拟节点之间确立关系。当每一个虚拟节点都有唯一key值时，新旧状态的虚拟节点很快就能知道谁是谁，这样就极大提升了diff算法的效率。