vue常见的指令都有哪些,有什么作用
以下是 Vue 中最常见和核心的指令及其作用：
核心指令
1. 条件渲染
v-if作用：根据表达式的真假值，条件性地渲染一块内容。如果为假，元素及其子元素会被完全销毁（从 DOM 中移除）；如果为真，则会重新编译和渲染。
示例：
html
<p v-if="isVisible">你现在能看到我！</p>
v-else作用：不需要表达式，必须紧跟在
v-if或v-else-if的元素后面，表示“否则”块。示例：
html
<p v-if="score > 90">优秀</p> <p v-else>还需努力</p>
v-else-if作用：充当
v-if的“else if”块，可以连续使用。示例：
html
<p v-if="type === 'A'">A</p> <p v-else-if="type === 'B'">B</p> <p v-else-if="type === 'C'">C</p> <p v-else>Not A/B/C</p>
v-show作用：根据表达式真假值，切换元素的 CSS
display属性。元素始终会被渲染并保留在 DOM 中，只是简单地切换显示/隐藏。与
v-if的区别：v-if是真正的条件渲染，切换时元素会销毁和重建；v-show只是简单的 CSS 切换。v-if开销更大，v-show初始渲染开销更大。因此，如果需要非常频繁地切换，用v-show较好；如果在运行时条件很少改变，则用v-if更合适。
2. 列表渲染
v-for作用：基于源数据多次渲染一个元素或模板块。必须使用
item in items或(item, index) in items的特殊语法。Key 属性：为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一的
keyattribute。示例：
html
<ul><li v-for="(item, index) in items" :key="item.id">{{ index }} - {{ item.message }}</li> </ul>
3. 属性绑定
v-bind(缩写:)作用：动态地绑定一个或多个 attribute（属性），或一个组件 prop 到表达式。它是单向的（数据流向视图）。
示例：
html
<!-- 完整语法 --> <img v-bind:src="imageSrc"> <!-- 缩写 --> <img :src="imageSrc"> <!-- 动态绑定多个属性 --> <div v-bind="{ id: someId, title: someTitle }"></div> <!-- 绑定 class 和 style (非常常用) --> <div :class="{ active: isActive, 'text-danger': hasError }"></div> <div :style="{ color: dynamicColor, fontSize: size + 'px' }"></div>
4. 事件绑定
v-on(缩写@)作用：监听 DOM 事件，并在触发时运行一些 JavaScript 代码或调用一个方法。它是从视图到数据的通信方式。
事件修饰符：Vue 为
v-on提供了事件修饰符，用于实现常见需求，如阻止默认事件、阻止事件冒泡等，非常方便。.stop- 调用event.stopPropagation()。.prevent- 调用event.preventDefault()。.once- 事件将只触发一次。
示例：
html
<!-- 完整语法 --> <button v-on:click="counter += 1">Add 1</button> <!-- 缩写 --> <button @click="counter += 1">Add 1</button> <!-- 调用方法 --> <button @click="greet">Greet</button> <!-- 使用修饰符 --> <form @submit.prevent="onSubmit">...</form> <a @click.stop="doThis">...</a>
5. 双向数据绑定
v-model作用：在表单输入元素或组件上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。它本质上是
v-bind（绑定 value）和v-on（监听 input 事件）的语法糖。修饰符：
.lazy- 将input事件改为change事件（在失去焦点或按回车后更新）。.number- 将输入值转为数值类型。.trim- 自动过滤用户输入的首尾空白字符。
示例：
html
<input v-model="message" placeholder="edit me"> <p>Message is: {{ message }}</p><input v-model.number="age" type="number"> <!-- age 会是数字类型 --> <textarea v-model.lazy="comment"></textarea> <!-- 失焦后更新 -->
其他重要指令
6. 一次性插值
v-once作用：只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。
示例：
html
<span v-once>这个将不会改变: {{ msg }}</span>
7. 输出原始 HTML
v-html作用：更新元素的
innerHTML。注意：内容按普通 HTML 插入，不会作为 Vue 模板进行编译。轻易不要使用v-html来复合局部模板，因为容易导致 XSS 攻击。只对可信内容使用 HTML 插值，绝不要对用户提供的内容使用。示例：
html
<p>Using text interpolation: {{ rawHtml }}</p> <!-- 会输出文本 --> <p>Using v-html directive: <span v-html="rawHtml"></span></p> <!-- 会渲染HTML -->
8. 保持元素与 Vue 管理无关
v-pre作用：跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。跳过大量没有指令的节点会加快编译。
示例：
html
<span v-pre>{{ 这里的内容不会被编译 }}</span>
9. 记忆编译模板（Vue 3 已弃用）
v-cloak作用：这个指令保持在元素上直到关联组件实例结束编译。和 CSS 规则如
[v-cloak] { display: none }一起用时，这个指令可以隐藏未编译的 Mustache 标签直到组件实例准备完毕，防止页面加载时出现闪烁的原始{{ }}标签。示例：
css
[v-cloak] {display: none; }html
<div v-cloak>{{ message }} </div>
总结表
| 指令 | 缩写 | 作用 |
|---|---|---|
v-if | - | 条件性地渲染一块内容（销毁/重建） |
v-else | - | 表示 v-if 的“else”块 |
v-else-if | - | 表示 v-if 的“else if”块 |
v-show | - | 根据条件展示元素（切换 CSS display） |
v-for | - | 基于源数据多次渲染元素 |
v-bind | : | 动态绑定属性（单向绑定） |
v-on | @ | 监听 DOM 事件 |
v-model | - | 在表单元素/组件上创建双向数据绑定 |
v-once | - | 只渲染元素和组件一次 |
v-html | - | 输出原始 HTML（有 XSS 风险） |
v-pre | - | 跳过元素及其子元素的编译 |
v-cloak | - | 隐藏未编译的 Mustache 标签（防闪烁） |
这些指令是构建 Vue 应用的基础，熟练掌握它们是高效使用 Vue 的关键。