简述 Vue 有哪些内置指令 ?

Vue提供了一些内置指令,可以在模板中进行一些常见的任务。以下是一些最常用的内置指令:

  1. v-bind:用于绑定一个属性到表达式。简写为 :。例如,v-bind:class 可以绑定一个 class 到一个表达式。

  2. v-model:在表单元素或者组件上创建双向数据绑定。

  3. v-show:根据表达式之真假值,切换元素的显示/隐藏状态。

  4. v-ifv-else-ifv-else:根据表达式的值的真假,在DOM中渲染或者销毁元素。

  5. v-for:基于源数据多次渲染元素或模板块。

  6. v-on:绑定事件监听器。事件类型由参数指定。简写为 @。例如,v-on:click 可以监听一个点击事件。

  7. v-text:更新元素的 textContent。如果要更新部分的 textContent,需要使用 {{ Mustache }} 插值。

  8. v-html:更新元素的 innerHTML。注意,内容按普通 HTML 插入 – 不会作为 Vue 模板进行编译。

  9. v-cloak:这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时,这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。

  10. v-pre:跳过这个元素和它的子元素的编译过程。可以用来显示原始的 Mustache 标签。跳过大量没有指令的节点会加快编译。

  11. v-once:只渲染元素和组件一次。随后的重新渲染, 元素/组件及其所有的子节点将被视为静态内容并跳过。

这些内置指令大大增强了模板的功能,使我们可以在模板中实现更多的逻辑。

发表评论

后才能评论