Vue指令基础要素完整指南

作者头像东城·2026-01-31 23:20:54·
概述
本文是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属性。
  1. <template>
  2. <img :src="imageUrl" :alt="imageAlt" :class="{ 'active': isActive }">
  3. template>

  5. <script setup>
  6. import { ref } from 'vue'

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

  6. <script setup>
  7. import { ref } from 'vue'

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

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

  7. <script setup>
  8. import { ref } from 'vue'

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

  9. <script setup>
  10. import { ref } from 'vue'

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

  22. <script setup>
  23. import { ref } from 'vue'

  25. const isPrimary = ref(true)
  26. const textColor = ref('blue')
  27. const fontSize = ref(16)

  29. const toggleStyle = () => {
  30. isPrimary.value = !isPrimary.value
  31. textColor.value = isPrimary.value ? 'blue' : 'red'
  32. fontSize.value = isPrimary.value ? 16 : 20
  33. }
  34. script>
vue
2. 表单处理
  1. <template>
  2. <form @submit.prevent="handleSubmit">
  3. <div>
  4. <label>用户名:label>
  5. <input
  6. v-model="formData.username"
  7. type="text"
  8. required
  9. >
  10. div>
  12. <div>
  13. <label>邮箱:label>
  14. <input
  15. v-model="formData.email"
  16. type="email"
  17. required
  18. >
  19. div>
  21. <div>
  22. <label>兴趣:label>
  23. <select v-model="formData.interests" multiple>
  24. <option value="reading">阅读option>
  25. <option value="music">音乐option>
  26. <option value="sports">运动option>
  27. select>
  28. div>
  30. <button type="submit">提交button>
  31. form>
  33. <div v-if="submitted">
  34. <h3>提交的数据:h3>
  35. <pre>{{ JSON.stringify(formData, null, 2) }}pre>
  36. div>
  37. template>

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

  42. const formData = reactive({
  43. username: '',
  44. email: '',
  45. interests: []
  46. })

  48. const submitted = ref(false)

  50. const handleSubmit = () => {
  51. submitted.value = true
  52. console.log('表单数据:', formData)
  53. }
  54. script>
vue
3. 列表渲染和条件渲染
  1. <template>
  2. <div>
  3. <h2>任务列表h2>
  5. <div>
  6. <input
  7. v-model="newTask"
  8. @keyup.enter="addTask"
  9. placeholder="输入新任务"
  10. >
  11. <button @click="addTask">添加button>
  12. div>
  14. <ul>
  15. <li
  16. v-for="task in filteredTasks"
  17. :key="task.id"
  18. :class="{ 'completed': task.completed }"
  19. >
  20. <input
  21. type="checkbox"
  22. v-model="task.completed"
  23. >
  24. <span v-if="!task.completed">{{ task.text }}span>
  25. <span v-else style="text-decoration: line-through;">
  26. {{ task.text }}
  27. span>
  28. <button @click="removeTask(task.id)">删除button>
  29. li>
  30. ul>
  32. <div>
  33. <button @click="filter = 'all'">全部button>
  34. <button @click="filter = 'active'">进行中button>
  35. <button @click="filter = 'completed'">已完成button>
  36. div>
  38. <p v-show="tasks.length === 0">暂无任务p>
  39. div>
  40. template>

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

  45. const tasks = ref([])
  46. const newTask = ref('')
  47. const filter = ref('all')

  49. const filteredTasks = computed(() => {
  50. switch (filter.value) {
  51. case 'active':
  52. return tasks.value.filter(task => !task.completed)
  53. case 'completed':
  54. return tasks.value.filter(task => task.completed)
  55. default:
  56. return tasks.value
  57. }
  58. })

  60. const addTask = () => {
  61. if (newTask.value.trim()) {
  62. tasks.value.push({
  63. id: Date.now(),
  64. text: newTask.value,
  65. completed: false
  66. })
  67. newTask.value = ''
  68. }
  69. }

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