Vue3 指令

指令是模板中以 v- 开头的特殊属性，用于给元素附加"响应式行为"。掌握常用指令，就掌握了 Vue 模板的大半能力。

指令总览

指令	作用
v-text	更新元素的文本内容
v-html	更新为解析后的 HTML
v-bind (:)	动态绑定属性
v-on (@)	绑定事件监听
v-model	表单双向绑定
v-if / v-else-if / v-else	条件渲染（后续章节详讲）
v-show	按条件切换显示/隐藏
v-for	列表循环渲染（后续章节详讲）
v-pre / v-once	跳过编译 / 只渲染一次

v-text 与 v-html

<template>
  <p v-text="msg"></p>
  <div v-html="html"></div>
</template>
<script setup>
const msg = '使用 v-text 更新的文本'
const html = '<i>斜体 HTML 内容</i>'
</script>

页面分别显示一段普通文本与一段斜体字。二者都会整体替换元素内容，与 {{ }} 的局部插值不同。

v-bind 动态属性

<template>
  <img :src="imgUrl" :title="tip" />
  <button :disabled="loading">提交</button>
</template>
<script setup>
const imgUrl = '/logo.png'
const tip = 'Vue 图标'
const loading = true
</script>

图片地址与按钮禁用状态都由变量控制；loading 为 true 时按钮不可点击。

v-on 事件处理

<template>
  <p>次数：{{ n }}</p>
  <button @click="n++">+1</button>
  <button @click="reset">清零</button>
</template>
<script setup>
import { ref } from 'vue'
const n = ref(0)
const reset = () => { n.value = 0 }
</script>

两个按钮分别实现计数与清零：@click 既可以写内联表达式，也可以调用定义好的方法。

v-model 双向绑定

v-model 让数据与输入框双向同步：数据变化更新输入框，用户输入也写回数据。

<template>
  <input v-model="keyword" placeholder="请输入关键词" />
  <p>正在搜索：{{ keyword }}</p>
</template>
<script setup>
import { ref } from 'vue'
const keyword = ref('')
</script>

在输入框中打字，下方文字会实时跟随显示同一内容。

参数与修饰符

部分指令支持参数（:）与修饰符（.）：

• @submit.prevent：阻止表单默认提交行为。
• @click.stop：阻止事件冒泡。
• v-model.trim：自动去除输入首尾空格。

<template>
  <form @submit.prevent="onSubmit">
    <button type="submit">提交</button>
  </form>
</template>
<script setup>
const onSubmit = () => console.log('表单已提交，页面未刷新')
</script>

点击提交后页面不会刷新，逻辑全部由 onSubmit 接管（可在控制台看到输出）。

小结

指令即 v-xxx 语法，高频用法是绑定属性(:)、监听事件(@)、双向绑定(v-model)，配合修饰符让事件与表单处理更简洁。