Vue之指令

Posted 2020-09-19 花信

指令（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不存在的元素。