前言
Vue.js作为当前最流行的前端框架之一，其内置指令系统是Vue的核心功能。这些指令为开发者提供了强大的数据绑定和DOM操作能力。本文将全面解析Vue的所有内置指令，通过实例演示它们的用法，并给出实用的开发建议。
一、数据绑定指令
1. v-bind：单向数据绑定
v-bind用于将数据单向绑定到HTML元素的属性上，简写为:。
<!-- 基本用法 -->
<img v-bind:src="imageSrc">
<!-- 简写形式 -->
<img :src="imageSrc">
<!-- 动态绑定class -->
<div :class="{ active: isActive, 'text-danger': hasError }"></div>
<!-- 动态绑定style -->
<div :style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>使用场景：当需要将Vue实例中的数据绑定到DOM元素的属性时使用。
2. v-model：双向数据绑定
v-model在表单元素上创建双向数据绑定。
<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>
<!-- 复选框 -->
<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{ checked }}</label>
<!-- 下拉选择 -->
<select v-model="selected">
<option disabled value="">请选择</option>
<option>A</option>
<option>B</option>
</select>修饰符：
.lazy- 取代input事件监听change事件.number- 输入字符串转为有效的数字.trim- 输入首尾空格过滤
使用建议：在表单处理时优先使用v-model，但要注意它本质上是语法糖，结合value属性和input事件。
二、条件渲染指令
1. v-if / v-else / v-else-if
<div v-if="type === 'A'">A</div>
<div v-else-if="type === 'B'">B</div>
<div v-else>C</div>特点：真正的条件渲染，元素会被销毁和重建。
2. v-show
<h1 v-show="ok">Hello!</h1>与v-if的区别：
v-show只是切换display属性，元素始终存在DOM中
v-if是真正的条件渲染，切换时元素会被销毁/重建
使用建议：
频繁切换用v-show
运行时条件很少改变用v-if
三、列表渲染指令
v-for
<!-- 数组渲染 -->
<ul>
<li v-for="(item, index) in items" :key="item.id">
{{ index }} - {{ item.message }}
</li>
</ul>
<!-- 对象渲染 -->
<div v-for="(value, key, index) in object">
{{ index }}. {{ key }}: {{ value }}
</div>
<!-- 数字迭代 -->
<span v-for="n in 10">{{ n }} </span>关键点：
必须使用
:key，推荐用唯一ID而非index数组更新检测：变异方法(push/pop等)会触发视图更新
替换数组或使用非变异方法(filter/concat等)时，应替换旧数组
使用建议：
始终提供key
避免v-if和v-for用在同一元素上
四、文本处理指令
1. v-text
<span v-text="msg"></span>
<!-- 等同于 -->
<span>{{msg}}</span>2. v-html
<div v-html="htmlContent"></div>安全警告：
动态渲染任意HTML有XSS风险
永远不要用于用户提交的内容
使用建议：
尽量使用{{}}插值而非v-text
v-html仅用于完全信任的内容
五、特殊指令
1. v-cloak
解决初始化闪烁问题：
[v-cloak] {
display: none;
}<div v-cloak>
{{ message }}
</div>2. v-once
<span v-once>这个将不会改变: {{ msg }}</span>使用场景：优化性能，用于静态内容
3. v-pre
<span v-pre>{{ 这里的内容不会被编译 }}</span>使用场景：显示原始Mustache标签或大量静态内容时提升性能
六、综合实例
<div id="app">
<!-- v-cloak防止闪烁 -->
<div v-cloak>
<!-- v-model双向绑定 -->
<input v-model.trim="username" placeholder="用户名">
<!-- v-if条件渲染 -->
<div v-if="username">
欢迎, <span v-text="username"></span>!
<!-- v-show条件显示 -->
<button v-show="!isSubscribed" @click="subscribe">
订阅
</button>
</div>
<!-- v-for列表渲染 -->
<ul>
<li v-for="item in filteredItems" :key="item.id">
{{ item.name }} - {{ item.price | currency }}
</li>
</ul>
<!-- v-once静态内容 -->
<footer v-once>
© 2023 公司名称
</footer>
</div>
</div>
<script>
new Vue({
el: '#app',
data: {
username: '',
isSubscribed: false,
items: [
{ id: 1, name: '商品A', price: 100 },
{ id: 2, name: '商品B', price: 200 }
]
},
computed: {
filteredItems() {
return this.items.filter(item => item.price > 150);
}
},
methods: {
subscribe() {
this.isSubscribed = true;
}
},
filters: {
currency(value) {
return '¥' + value.toFixed(2);
}
}
});
</script>七、最佳实践总结
性能优化：
频繁切换用v-show，不常变化用v-if
大数据列表使用v-for时务必加key
静态内容使用v-once
安全实践：
谨慎使用v-html，避免XSS攻击
用户输入内容必须过滤后再渲染
代码可维护性：
复杂表达式提取到计算属性
避免在模板中写复杂逻辑
开发体验：
使用v-cloak避免初始化闪烁
合理使用v-pre跳过无需编译的内容
通过掌握这些内置指令的特性和适用场景，可以大幅提升Vue应用的开发效率和应用性能。记住，正确的指令选择往往能让代码更简洁高效。