第三章 指令

指令 (Directives) 是特殊的 带有前缀 v- 的特性。
指令的值 限定为 绑定单个的JavaScript 表达式 (v-for 是例外情况)。
指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。

3.1 内部指令

3.1.1 v-if

v-if 完全根据表达式的值在DOM中生成或者移除一个元素

	<p v-if="seen">现在你看到我了</p>
	// ………………
	let vm = new Vue({
	        el: '#app',
	        data: {
	            seen: true
	        }
	    })

3.1.2 v-show

v-show 根据表达式的值显示或者隐藏HTML元素。
被赋值为false时，元素将被隐藏，查看DOM时会发现元素增加了一个内联样式 style="display: none"

注意

切换v-if模块时，Vue.js有局部编译或卸载的过程，因为v-if中的模板可能包括数据绑定或者子组件。v-if 是真实的条件渲染，确保条件块在切换时合适地销毁与重建其内部的事件监听器和子组件。

v-if 是惰性的，若初始渲染条件为假，则什么也不做，在条件第一次变为真时才开始局部编译，编译会被缓存。

而 v-show ，元素始终被编译并保留，只是简单地基于css切换display：none

v-if有更高的切换消耗，v-show 有更高的初始渲染消耗，需要频繁切换推荐使用v-show，运行时条件不太可能改变则使用v-if

3.1.3 v-else

v-else，必须跟随 v-if 或者 v-show，充当 else 功能

将 v-show 用在组件上时，因为指令的优先级，v-else会出现问题，可以改为 v-show替换。

3.1.4 v-model及其修饰符

v-model 指令用于在表单 input、textarea、checkbox、radio、select 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。

v-model 本质上是语法糖。负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。
参见 vue 官方文档 表单输入绑定
v-model 在内部为不同的输入元素使用不同的 property 并抛出不同的事件：

text 和 textarea 元素使用 value property 和 input 事件；
checkbox 和 radio 使用 checked property 和 change 事件；
select 字段将 value 作为 prop 并将 change 作为事件。

**注意
可以在 v-model 指令后面添加修饰符 .number / .lazy / .trim

• .number

  自动将用户的输入值转为数值Number类型

  <input v-model.number="age" type="number">
  

  因为即使在 type="number" 时，HTML 输入元素的值也总会返回字符串string类型。添加 .number 修饰符可以变为Number 类型。
  如果这个值无法被 parseFloat() 解析，转换结果为NaN，则会返回原始的值。

• .trim
  自动过滤用户输入的首尾空白字符

  <input v-model.trim="msg">
  

• .lazy
  在默认情况下，v-model在每次 input 事件触发后同步输入框的值和数据。可以通过添加 lazy 修饰符，转变为在 change 事件之后进行同步, v-on:input 转变为 v-on:change

  <!-- 在“change”时而非“input”时更新 -->
  <input v-model.lazy="msg">
  

3.1.5 v-for

vue 官方教程 列表渲染

1. 用 v-for 把一个数组对应为一组元素
   使用 v-for 指令 基于源数据重复渲染元素，基于一个数组来渲染一个列表。v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组，而 item 则是被迭代的数组元素的别名。
   
   在 v-for 块中，可以访问所有父作用域的 property。
   v-for 还支持一个可选的第二个参数，即当前项的索引 index。
   
   也可以用 of 替代 in 作为分隔符，因为它更接近 JavaScript 迭代器的语法

   <div v-for="item of items"></div>
   

2. 在v-for里使用对象
   可以使用v-for遍历对象的property, 按照Object.keys() 遍历

   Object.keys() 遍历方法解析 参考 Object.keys()
   一、语法

   Object.keys(obj)

   参数：要返回其枚举自身属性的对象

   返回值：一个表示给定对象的所有可枚举属性的字符串数组

   二、处理对象，返回可枚举的属性数组

   let person = {name:"张三",age:25,address:"深圳",getName:function(){}}

   Object.keys(person) // ["name", "age", "address","getName"]

   三、处理数组，返回索引值数组

   let arr = [1,2,3,4,5,6]

   Object.keys(arr) // ["0", "1", "2", "3", "4", "5"]

   四、处理字符串，返回索引值数组

   let str = "saasd字符串"

   Object.keys(str) // ["0", "1", "2", "3", "4", "5", "6", "7"]

   五、常用技巧

   let person = {name:"张三",age:25,address:"深圳",getName:function(){}}
Object.keys(person).map((key)=>{　
person[key] // 获取到属性对应的值，做一些处理
})

   六、Object.values()和Object.keys()是相反的操作，把一个对象的值转换为数组

   三个参数: (键值, 键名, index索引) (value, name, index)

   <div v-for="(value, name, index) in object">
     {{ index }}. {{ name }}: {{ value }}
   </div>
   

   当 Vue 正在更新使用 v-for 渲染的元素列表时，它默认使用“就地更新”的策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序，而是就地更新每个元素，并且确保它们在每个索引位置正确渲染。

   这个默认的模式是高效的，但是只适用于不依赖子组件状态或临时 DOM 状态 (例如：表单输入值) 的列表渲染输出。

   为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key attribute