当前位置：首页 > news >正文

Vue内置指令

news 2025/7/5 13:12:48

前言

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>