Vue常用内置指令有哪些

Vue常用内置指令有哪些

Vue.js 是一个流行的前端框架，它提供了许多内置指令来简化开发过程。指令是带有 v- 前缀的特殊属性，用于在模板中应用一些特殊的行为。以下是一些常用的 Vue 内置指令：

1. v-bind

v-bind 指令用于动态绑定 HTML 属性。它可以将 Vue 实例中的数据绑定到 HTML 元素的属性上。

<div v-bind:class="{'active': isActive}"></div> 

简写形式：

<div :class="{'active': isActive}"></div> 

2. v-model

v-model 指令用于在表单元素上创建双向数据绑定。它通常用于 <input>、<textarea> 和 <select> 元素。

<input v-model="message" placeholder="请输入内容"> 

3. v-if、v-else-if、v-else

这些指令用于条件渲染。v-if 根据表达式的值来决定是否渲染元素，v-else-if 和 v-else 则用于链式条件判断。

<div v-if="type === 'A'">A</div> <div v-else-if="type === 'B'">B</div> <div v-else>C</div> 

4. v-show

v-show 指令用于根据表达式的值来切换元素的显示状态。与 v-if 不同，v-show 只是简单地切换 CSS 的 display 属性。

<div v-show="isVisible">可见内容</div> 

5. v-for

v-for 指令用于渲染列表。它可以遍历数组或对象，并为每个元素生成一个模板。

<ul> <li v-for="(item, index) in items" :key="index">{{ item }}</li> </ul> 

6. v-on

v-on 指令用于监听 DOM 事件，并在触发时执行一些 JavaScript 代码。

<button v-on:click="handleClick">点击我</button> 

简写形式：

<button @click="handleClick">点击我</button> 

7. v-text

v-text 指令用于更新元素的 textContent。它会覆盖元素内部的所有内容。

<span v-text="message"></span> 

8. v-html

v-html 指令用于更新元素的 innerHTML。它可以渲染 HTML 字符串，但要注意防止 XSS 攻击。

<div v-html="htmlContent"></div> 

9. v-pre

v-pre 指令用于跳过该元素及其子元素的编译过程。这在需要显示原始 Mustache 标签时非常有用。

<span v-pre>{{ 这里的内容不会被编译 }}</span> 

10. v-cloak

v-cloak 指令用于在 Vue 实例编译完成之前隐藏未编译的 Mustache 标签。通常与 CSS 结合使用。

<div v-cloak>{{ message }}</div> 

[v-cloak] { display: none; } 

11. v-once

v-once 指令用于只渲染元素和组件一次。之后的更新将不再重新渲染。

<span v-once>{{ message }}</span> 

12. v-slot

v-slot 指令用于定义插槽内容。它通常用于具名插槽或作用域插槽。

<template v-slot:header> <h1>标题</h1> </template> 

简写形式：

<template #header> <h1>标题</h1> </template> 

总结

Vue 提供了丰富的内置指令，帮助开发者更高效地构建动态和响应式的用户界面。通过熟练掌握这些指令，可以大大提升开发效率和代码质量。