Vue学习笔记（三）

一：Vue的指令
  指令会影响元素的渲染行为，指令始终以v-开头。
1.循环指令
 v-for循环遍历数组：

 <li v-for="(one,i) in orgList">
	机构名称：{{one.name}} 
 </li>

2.条件渲染指令
 v-if v-else-if v-else:控制元素的生成。

 <span v-if="one.num>0"> 数据：{{one.num}}条</span> 
 <span v-else>数据：无</span>

3.v-html 和 v-text指令
 v-html 可以识别HTML标签，解析后输出。
 v-text 不会识别HTLM标签，把HTML标签当做字符串输出。

 <div v-html="变量名"></div>
 <div v-text="变量名"></div>

4.事件绑定指令
 该指令十分常用，因此提供了简写：v-on:click = @click；
 事件支持一些指令修饰符：如prevent （阻止默认事件）、stop（阻止事件冒泡）等；
 事件参数会自动传递；

 <button @click="changeNum(one,one.num-1)">减少</button>

5.动态绑定指令
 v-bind:绑定动态属性，可以简写为一个冒号：
 该指令的值是js代码，可以是变量，也可以是函数。

<div :style='JavaScript代码'>文本</div>

6.v-show指令
 v-show：控制元素可见度。它其实是将元素的display属性设置为none。指令的内容最终会被解析成布尔值。值为true元素显示，值为false元素隐藏。

<div v-show='true'>是否显示</div>

7.v-model指令
 双向绑定指令，指的就是vue实例中的data与其渲染的dom元素上的内容保持一致。常用于表单元素。

 <input v-model="绑定的变量名"/>

8.v-slot指令
 具名插槽：指定的位置输出插槽，v-slot后写的是插槽的名称。

<template v-slot:header>
  //值与组件slot的name属性对应。
</template>
<slot name='header' />

 作用域插槽：在写插槽时可以获取到插槽作用域的值。

<template v-slot:header="message">
   <div>{{message.name}}</div>
</template>
 <slot name='header' :name="name" />

二：Vue的特殊属性
1.最重要的特殊属性Key：
 在v-for循环渲染视图的时候，需要用来key标识循环的元素，不用的时候会有警告提示。该属性可以干预diff算法，在同一层级，key值相同的节点会进行比对，key值不同的节点则不会。不加key属性，不会刷新虚拟DOM 树。
 在循环节点中，Vue建议为每个节点添加key值，而且必须是稳定的key值，一般为id，不能是下标，因为下标是可变的。
2.计算属性
 在需要进行对数据进行计算的时候，直接在页面的{{}}中写计算式是可以实现功能，但代码可读性较差。当然用method写方法也可以实现，但事实上，vue给我们提供了一个更好的解决方案叫计算属性computed。

 computed:{
	 allSum:function(){
	     return this.num1+ this.num2;
	 }

计算属性和方法的区别：
 计算属性可以赋值，而方法不行；
 计算属性会进行结果缓存，如果依赖不变，会直接使用缓存结果，不会重新计算；
 凡是根据已有数据计算得到新数据的无参函数，都应该尽量写成计算属性而不是写成方法。
三：watch监控
watch可以让我们监控一个值的变化。从而做出相应的反应。

	data: {
		message:"数据"
	},
	watch:{ 
		message(newValue, oldValue){
			console.log("新值：" + newValue + "；旧值：" + oldValue); 
		} 
	}

只要message的值发生变化，就会调用函数。
四：深度监控
如果监控的是一个对象，需要进行深度监控，才能监控到对象中属性的变化。

	data: {
		person:{"name":"xiaoming", "age":12} 
	},
	watch:{ 
		message(newValue, oldValue){ 
		console.log("新值：" + newValue + "；旧值：" + oldValue); 
	},
	person: { 
		//开启深度监控，可以监控到对象属性值的变化 
		deep: true,
		//监控的处理方法 
		handler(obj){ 
			console.log("name = " + obj.name + ", age=" + obj.age); 
		} 
	}