指令（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不存在的元素。
时间： 2024-08-04 21:29:59