Vue之指令
指令（Directives）是带有 v- 前缀的特殊属性。指令属性的值预期是单一 JavaScript 表达式（除了 v-for，之后再讨论）。指令的职责就是当其表达式的值改变时相应地将某些行为应用到 DOM 上。
|
指令 |
描述 |
代码 |
|
v-if |
根据表达式的值的真假条件渲染元素。在切换时元素及它的数据绑定 / 组件被销毁并重建。 当条件变化时该指令触发过渡效果 |
<div v-if="Math.random() > 0.5"> Now you see me </div> |
|
v-else |
不需要表达式 |
<div v-else>Now you don't </div> |
|
v-show |
根据表达式之真假值，切换元素的 display CSS 属性。 当条件变化时该指令触发过渡效果 |
|
|
|
|
|
|
v-for |
根据一组数组的选项列表进行渲染。 v-for 指令需要以 item in items 形式的特殊语法， items 是源数据数组并且 item 是数组元素迭代的别名。 |
<div v-for="item in items"> {{ item.text }} </div> |
|
v-bind |
用于动态绑定属性和数据，比如 v-bind:class=‘classname’ 更新HTML 缩写为“： ” |
绑定class：<div v-bind:class="{ active: isActive }"></div> 绑定内联样式： <div v-bind:style="styleObject"> </div> Vue: data: { styleObject: { color: 'red', fontSize: '13px' } }
|
|
v-on |
绑定事件监听器，触发JavaScript代码 缩写为@ |
<div id="example-2"> <button v-on:click="greet"> Greet</button></div> Vue: methods: { greet: function (event) { alert('Hello ' + this.name + '!') } |
|
v-model |
在表单控件或者组件上创建双向双向绑定 |
<input v-model="message" placeholder="edit me"> Vue: data: { message }
|
|
v-once |
只渲染元素和组件一次。随后的重新渲染,元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。 |
<span v-once>This will never change: {{msg}}</span> |
|
v-pre |
跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。跳过大量没有指令的节点会加快编译。 |
|
key的作用：key 的特殊属性主要用在 Vue的虚拟DOM算法，在新旧nodes对比时辨识VNodes。如果不使用key，Vue会使用一种最大限度减少动态元素并且尽可能的尝试修复/再利用相同类型元素的算法。使用key，它会基于key的变化重新排列元素顺序，并且会移除key不存在的元素。
key的作用：key 的特殊属性主要用在 Vue的虚拟DOM算法，在新旧nodes对比时辨识VNodes。如果不使用key，Vue会使用一种最大限度减少动态元素并且尽可能的尝试修复/再利用相同类型元素的算法。使用key，它会基于key的变化重新排列元素顺序，并且会移除key不存在的元素。
v-on ，v-bind，v-model 区别
v-on:绑定事件监听器，触发JavaScript代码
v-model：用作双向数据绑定，处理表单数据。除了表单数据以外的其他元素都没有任何意义。
v-bind：用来动态绑定属性和数据，例如绑定元素的id和class，从而实现HTML更新。
v-if 与v-show比较
相同点：都可以控制元素的显示和隐藏
不同点：
（1）切换方法
v-show：通过设置DOM元素的display样式属性display:none，display:“ ”，来显示和隐藏元素，它始终存在DOM树中的。
v-if：动态的向DOM树内添加或者删除DOM元素。
（2）编译过程
在切换 v-if 块时，Vue.js 有一个局部编译/卸载过程，因为 v-if 之中的模板也可能包括数据绑定或子组件。切换过程中合适地销毁与重建条件块内的事件监听器和子组件。
v-show：只是简单的基于css切换。
（3） 编译条件
v-if：如果在初始渲染时条件为假，则什么也不做——在条件第一次变为真时才开始局部编译（编译会被缓存起来）。
v-show是在任何条件下（首次条件是否为真）都被编译，然后被缓存，而且DOM元素保留；
（4）性能消耗
v-if有更高的切换消耗；v-show有更高的初始渲染消耗
（5）使用场景
v-if适合运营条件不大可能改变；v-show适合频繁切换
v-show使用tip：
如果v-show作用的元素，css文件中display:none，通过v-show进行设置不能显示该元素；原因：v-show控制显隐，是通过js代码去修改元素的element style，如果value为false，设置display: none;如果value为true，设置display: ''；于是value为true时，只能将元素style中的display效果清除，并不能覆盖css中的display效果；
解决方法: 使用v-show的话，在vue解析之前隐藏DOM的话，尽量在style属性里面设置display的值，不要在css文件中。
