Vue指令基础要素完整指南
东城
·2026-01-31
概述
本文是Vue前端开发入门系列的第8部分，专注于Vue指令的基础要素。让我们学习Vue模板中经常使用的指令，这些指令为HTML元素添加特殊功能。
Vue指令基础要素一览
指令
简写
说明
示例
v-bind
:
将数据绑定到HTML属性
<img :src="imageUrl">
v-model
无
表单元素与数据双向绑定
<input v-model="userName">
v-on
@
监听事件并执行处理
<button @click="handleClick">
v-if
无
根据条件切换元素的显示/隐藏（DOM删除）
<p v-if="showMessage">
v-show
无
根据条件切换元素的显示/隐藏（CSS display: none）
<p v-show="showMessage">
v-for
无
重复渲染列表元素
<li v-for="item in items" :key="item.id">
Vue指令基础要素详解
v-bind
将响应式数据绑定到HTML属性。
简写：:
示例：将图片URL绑定到src属性，将动态CSS类绑定到class属性。
<template>
<img :src="imageUrl" :alt="imageAlt" :class="{ 'active': isActive }">
template>

<script setup>
import { ref } from 'vue'

const imageUrl = 'https://example.com/image.jpg'
const imageAlt = '示例图片'
const isActive = ref(true)
vue
v-model
将表单元素（<input>、<textarea>、<select>等）与JavaScript数据进行双向绑定。输入内容会自动反映到数据中，数据变化时输入框也会相应更新。
<template>
<input type="text" v-model="userName">
<p>输入的名字: {{ userName }}p>
template>

<script setup>
import { ref } from 'vue'

const userName = ref('')
script>
vue
v-on
监听DOM事件（点击、输入等），当事件发生时执行JavaScript方法。
简写：@
<template>
<button @click="handleClick">请点击button>
template>

<script setup>
const handleClick = () => {
alert('按钮被点击了！')
}
script>
vue
v-if / v-else-if / v-else
根据条件切换元素的显示/隐藏。当条件为false时，元素会从DOM中完全删除。
<template>
<button @click="toggleMessage">消息显示/隐藏button>
<p v-if="showMessage">你好！消息正在显示。p>
<p v-else>消息已隐藏。p>
template>

<script setup>
import { ref } from 'vue'

const showMessage = ref(true)
const toggleMessage = () => {
showMessage.value = !showMessage.value
}
script>
vue
v-show
与v-if类似，用于切换元素的显示/隐藏，但当条件为false时，元素仍保留在DOM中，只是应用CSS的display: none;。对于频繁切换的情况比v-if更高效，但实际用途可能比v-if少。
<template>
<p v-show="showMessage">这是用v-show显示的内容。p>
template>
vue
v-for
根据数组数据重复渲染元素。
<template>
<ul>
<li v-for="(item, index) in items" :key="index">
{{ index }}: {{ item }}
li>
ul>
template>

<script setup>
import { ref } from 'vue'

const items = ref(['苹果', '香蕉', '橙子'])
script>
vue
key属性的重要性：使用v-for时，为元素添加:key属性是非常重要的。key用于唯一标识每个元素，Vue用它来高效地处理元素的添加、删除和重新排序。通常指定数据的ID等唯一且稳定的值。
实际应用示例
1. 动态样式绑定
<template>
<div>
<button
:class="{
'btn-primary': isPrimary,
'btn-secondary': !isPrimary
}"
@click="toggleStyle"
>
切换样式
button>
<div :style="{
color: textColor,
fontSize: fontSize + 'px'
}">
动态样式文本
div>
div>
template>

<script setup>
import { ref } from 'vue'

const isPrimary = ref(true)
const textColor = ref('blue')
const fontSize = ref(16)

const toggleStyle = () => {
isPrimary.value = !isPrimary.value
textColor.value = isPrimary.value ? 'blue' : 'red'
fontSize.value = isPrimary.value ? 16 : 20
}
script>
vue
2. 表单处理
<template>
<form @submit.prevent="handleSubmit">
<div>
<label>用户名:label>
<input
v-model="formData.username"
type="text"
required
>
div>
<div>
<label>邮箱:label>
<input
v-model="formData.email"
type="email"
required
>
div>
<div>
<label>兴趣:label>
<select v-model="formData.interests" multiple>
<option value="reading">阅读option>
<option value="music">音乐option>
<option value="sports">运动option>
select>
div>
<button type="submit">提交button>
form>
<div v-if="submitted">
<h3>提交的数据:h3>
<pre>{{ JSON.stringify(formData, null, 2) }}pre>
div>
template>

<script setup>
import { ref, reactive } from 'vue'

const formData = reactive({
username: '',
email: '',
interests: []
})

const submitted = ref(false)

const handleSubmit = () => {
submitted.value = true
console.log('表单数据:', formData)
}
script>
vue
3. 列表渲染和条件渲染
<template>
<div>
<h2>任务列表h2>
<div>
<input
v-model="newTask"
@keyup.enter="addTask"
placeholder="输入新任务"
>
<button @click="addTask">添加button>
div>
<ul>
<li
v-for="task in filteredTasks"
:key="task.id"
:class="{ 'completed': task.completed }"
>
<input
type="checkbox"
v-model="task.completed"
>
<span v-if="!task.completed">{{ task.text }}span>
<span v-else style="text-decoration: line-through;">
{{ task.text }}
span>
<button @click="removeTask(task.id)">删除button>
li>
ul>
<div>
<button @click="filter = 'all'">全部button>
<button @click="filter = 'active'">进行中button>
<button @click="filter = 'completed'">已完成button>
div>
<p v-show="tasks.length === 0">暂无任务p>
div>
template>

<script setup>
import { ref, computed } from 'vue'

const tasks = ref([])
const newTask = ref('')
const filter = ref('all')

const filteredTasks = computed(() => {
switch (filter.value) {
case 'active':
return tasks.value.filter(task => !task.completed)
case 'completed':
return tasks.value.filter(task => task.completed)
default:
return tasks.value
}
})

const addTask = () => {
if (newTask.value.trim()) {
tasks.value.push({
id: Date.now(),
text: newTask.value,
completed: false
})
newTask.value = ''
}
}

const removeTask = (id) => {
const index = tasks.value.findIndex(task => task.id === id)
if (index > -1) {
tasks.value.splice(index, 1)
}
}
script>
vue
指令使用技巧
1. 性能优化
v-if vs v-show：
使用v-if当条件很少改变时
使用v-show当条件频繁切换时
v-for优化：
始终使用:key属性
避免在v-for中使用复杂表达式
考虑使用v-memo进行缓存
2. 事件处理
<template>
<input @keyup.enter="onEnter">
<form @submit.prevent="onSubmit">
<div @click.stop="onClick">
template>
vue
3. 动态属性
<template>
<div :[attributeName]="attributeValue">
<div :class="[baseClass, { active: isActive }]">
<div :style="[baseStyle, dynamicStyle]">
template>
vue
总结
通过掌握这些Vue指令，您可以充分利用Vue强大的数据绑定和响应式UI构建的优势。这些指令是Vue开发的基础，掌握它们将大大提高您的开发效率。
记住：
合理使用v-if和v-show
始终为v-for提供:key
善用指令的简写形式
注意性能优化
Aa