Vue3 指令知识点详解
专为编程小白准备的通俗易懂指南，通过实际示例掌握Vue3核心指令
T/H
v-text 与 v-html
v-text – 文本显示
用来在元素中显示纯文本内容，会覆盖元素原有的内容。
<div v-text=”message”></div>
v-html – HTML渲染
用于渲染HTML字符串，可以将包含HTML标签的内容渲染到页面上。
<div v-html=”htmlContent”></div>
安全警告： v-html 会渲染原始HTML，可能导致XSS攻击。只用在可信任的内容上！
S/I
v-show 与 v-if
v-show – 显示/隐藏
通过CSS的display属性控制元素显示或隐藏，元素始终存在于DOM中。
<div v-show=”isVisible”>我会显示或隐藏</div>
v-if – 条件渲染
根据条件决定是否渲染元素到DOM中，可以和v-else-if、v-else一起使用。
<div v-if=”score >= 90″>优秀</div>
<div v-else-if=”score >= 60″>及格</div>
<div v-else>不及格</div>
<div v-else-if=”score >= 60″>及格</div>
<div v-else>不及格</div>
使用建议：频繁切换用v-show（性能更好），运行时条件很少改变用v-if
F
v-for – 列表渲染
用于循环渲染数组或对象，可以同时获取值和索引。
遍历数组
<li v-for=”(item, index) in items” :key=”item.id”>
{{ index }}: {{ item.name }}
</li>
{{ index }}: {{ item.name }}
</li>
遍历对象
<li v-for=”(value, key) in user” :key=”key”>
{{ key }}: {{ value }}
</li>
{{ key }}: {{ value }}
</li>
重要提示： 使用v-for时一定要加:key属性，帮助Vue高效更新DOM
O/B
v-on 与 v-bind
v-on（简写@） – 事件绑定
用于监听DOM事件并在触发时执行JavaScript代码。
<button v-on:click=”handleClick”>点击</button>
<!– 简写形式 –>
<button @click=”handleClick”>点击</button>
<!– 简写形式 –>
<button @click=”handleClick”>点击</button>
事件修饰符
用于处理事件细节，如阻止默认行为、停止冒泡等。
<form @submit.prevent=”onSubmit”>阻止默认提交行为</form>
<div @click.stop=”doThis”>阻止事件冒泡</div>
<div @click.stop=”doThis”>阻止事件冒泡</div>
v-bind（简写:） – 属性绑定
用于动态绑定HTML元素的属性。
<img v-bind:src=”imageUrl”>
<!– 简写形式 –>
<img :src=”imageUrl”>
<!– 简写形式 –>
<img :src=”imageUrl”>
M
v-model – 双向绑定
在表单元素上创建双向数据绑定，输入内容自动更新数据。
基本用法
<input v-model=”message” placeholder=”输入内容”>
<p>输入的内容是: {{ message }}</p>
<p>输入的内容是: {{ message }}</p>
修饰符
<input v-model.lazy=”msg”> 懒更新（change事件后更新）
<input v-model.number=”price”> 将输入转为数字
<input v-model.trim=”name”> 自动去除首尾空格
<input v-model.number=”price”> 将输入转为数字
<input v-model.trim=”name”> 自动去除首尾空格
O
其他重要指令
v-slot – 插槽
用于定义插槽内容，在组件中使用。
<template v-slot:header>
<h1>页面标题</h1>
</template>
<!– 简写 –>
<template #footer>
页脚内容
</template>
<h1>页面标题</h1>
</template>
<!– 简写 –>
<template #footer>
页脚内容
</template>
v-pre – 跳过编译
跳过该元素及其子元素的编译过程，显示原始Mustache标签。
<div v-pre>{{ 这里的内容不会编译 }}</div>
v-cloak – 隐藏未编译模板
在Vue实例编译完成前隐藏原始模板，防止闪现。
<div v-cloak>{{ message }}</div>
/* CSS中需要添加 */
[v-cloak] { display: none; }
/* CSS中需要添加 */
[v-cloak] { display: none; }
v-once – 单次渲染
元素和组件只渲染一次，之后被视为静态内容。
<div v-once>{{ 只渲染一次的内容 }}</div>
v-memo – 性能优化(Vue3新增)
根据条件缓存模板，避免不必要渲染。
<div v-for=”item in list” :key=”item.id” v-memo=”[item.id === selected]”>
{{ item.name }}
</div>
{{ item.name }}
</div>
Vue指令实时演练场
您输入的内容: {{ demoText }}
这是使用 v-if 的内容（DOM中移除）
这是使用 v-show 的内容（CSS隐藏）
项目 {{ index + 1 }}: {{ item }}