Vue.js 提供了一系列的指令,用于在模板中操作 DOM 和数据绑定。以下是一些常见的 Vue 指令:
- v-bind:用于绑定属性,简写为
:
。可以将数据绑定到元素属性上,实现动态更新。
- v-on:用于监听 DOM 事件,简写为
@
。可以绑定事件处理函数,实现用户交互。
- v-if、v-else-if、v-else:用于条件渲染。根据条件判断,决定是否渲染某个元素或组件。
- v-for:用于列表渲染。可以遍历数组或对象,生成多个元素或组件。
- v-model:用于表单元素的数据双向绑定。可以实现输入框、单选框、复选框等表单元素的值和数据的双向同步。
- v-show:用于控制元素的显示与隐藏。通过切换 CSS 的
display
属性来实现。
- v-text:用于更新元素的文本内容。
- v-html:用于更新元素的 HTML 内容。
- v-pre:跳过这个元素和它的子元素的编译过程。可以用来显示原始的 Mustache 标签。
- v-cloak:这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如
[v-cloak] { display: none }
一起用时,这个指令可以隐藏
未编译的 Mustache 标签直到实例准备完毕。
这些是 Vue.js 中常用的一些指令,它们提供了强大的功能,使得在模板中操作 DOM 和数据绑定变得更加简单和直观。