Vue 模板语法

环境装好后,我们来学习 Vue 的核心——模板语法。Vue 的模板是基于 HTML 的扩展语法,你只要会写 HTML,加几个特殊属性就能让页面"动起来"。本章是后续所有章节的地基,务必吃透。

1. 文本插值:双花括号

最基本的数据绑定形式是"Mustache"语法——双花括号。它会自动把响应式数据的值渲染出来,且数据变化时自动更新。

<template>
  <!-- 文本插值:双花括号输出响应式数据,会自动转义 HTML -->
  <p>{{ message }}</p>
  <p>姓名:{{ user.name }},年龄:{{ user.age }}</p>

  <!-- 表达式:可以写简单 JS,但不能写语句(if/for 不行) -->
  <p>{{ count + 1 }}</p>
  <p>{{ ok ? "是" : "否" }}</p>
  <p>{{ message.split("").reverse().join("") }}</p>
</template>

<script setup>
import { ref, reactive } from "vue";
const message = ref("Hello");
const count = ref(10);
const ok = ref(true);
const user = reactive({ name: "小明", age: 20 });
</script>

双花括号里只能写表达式,不能写语句。表达式是有返回值的代码(如 count + 1、ok ? '是' : '否');语句是控制流(如 if (...) {}、for (...) {}),不允许写。需要分支/循环时用 v-if / v-for 指令。

2. 原始 HTML:v-html

双花括号会把数据当作纯文本显示(自动转义 < > 等)。如果你确实需要把字符串当 HTML 渲染(比如富文本编辑器内容),用 v-html:

<template>
  <!-- v-html 把字符串当成 HTML 渲染(不会转义) -->
  <div v-html="rawHtml"></div>
  <!-- 渲染结果:<span style="color:red">这是红色文字</span> -->

  <!-- 注意:双花括号会把 HTML 当文本显示 -->
  <div>{{ rawHtml }}</div>
  <!-- 渲染结果:&lt;span style=...&gt;...(显示成源码) -->
</template>

<script setup>
const rawHtml = '<span style="color:red">这是红色文字</span>';
</script>

警告:v-html 会有 XSS 风险!绝不要把用户输入直接 v-html——攻击者可以注入 <script> 偷 cookie。只有信任的内容(自己后台返回的富文本、Markdown 转换结果)才能用。

3. 属性绑定:v-bind 与冒号缩写

双花括号只能放在元素内容里,不能放在属性里。属性要用 v-bind:

<template>
  <!-- v-bind:把数据绑定到 HTML 属性上 -->
  <img v-bind:src="avatar" v-bind:alt="name" />
  <a v-bind:href="link">GitHub</a>

  <!-- 缩写:冒号 : —— 几乎所有项目都用这个 -->
  <img :src="avatar" :alt="name" />
  <a :href="link">GitHub</a>

  <!-- class 与 style 绑定支持对象/数组语法 -->
  <div :class="{ active: isActive, 'text-danger': hasError }"></div>
  <div :class="[baseClass, isActive ? 'on' : 'off']"></div>
  <div :style="{ color: theme, fontSize: size + 'px' }"></div>
</template>

<script setup>
import { ref } from "vue";
const avatar = ref("/me.png");
const name = ref("小明");
const link = ref("https://github.com");
const isActive = ref(true);
const hasError = ref(false);
const theme = ref("#42b883");
const size = ref(16);
</script>

实际项目里几乎只用冒号缩写 :,没人写全称。class 和 style 还支持对象/数组语法,这是 Vue 模板的精髓——让样式也"响应式"起来。

:class="{ active: isActive }":isActive 为 true 时加上 active 类。
:class="[a, b]":数组形式,把 a 和 b 两个类都加上。
:style="{ color: theme }":注意 CSS 属性名要用驼峰(fontSize)或短横线引号('font-size')。

4. 事件绑定:v-on 与 @ 缩写

用 v-on 监听 DOM 事件(点击、输入、键盘等):

<template>
  <!-- v-on:绑定事件 -->
  <button v-on:click="onClick">点我</button>

  <!-- 缩写:@ —— 项目里几乎只用这个 -->
  <button @click="onClick">点我</button>

  <!-- 内联表达式:可以传入 $event -->
  <button @click="count++">+1</button>
  <button @click="say('hi', $event)">打招呼</button>
</template>

<script setup>
import { ref } from "vue";
const count = ref(0);
function onClick() {
  alert("被点了");
}
function say(msg, e) {
  console.log(msg, e.target);
}
</script>

同样,实际项目几乎只用 @ 缩写。事件修饰符和按键修饰符我们专门放在《事件处理》一章细讲(@click.stop、@keyup.enter 等),这里先记住基本用法。

5. 双向绑定:v-model

表单元素(input、textarea、select)和数据的双向同步,用 v-model:

<template>
  <!-- v-model:表单双向绑定(输入即同步) -->
  <input v-model="keyword" placeholder="搜索..." />
  <p>你输入了:{{ keyword }}</p>

  <!-- 复选框 -->
  <input type="checkbox" v-model="agree" /> 同意条款

  <!-- 单选 -->
  <input type="radio" v-model="gender" value="M" /> 男
  <input type="radio" v-model="gender" value="F" /> 女
</template>

<script setup>
import { ref } from "vue";
const keyword = ref("");
const agree = ref(false);
const gender = ref("M");
</script>

v-model 本质是 :value + @input 的语法糖——输入框值变了,数据就更新;数据变了,输入框也跟着变。它是表单开发的核心,我们专门用《表单与 v-model》一章展开。

6. 指令(directives)一览

Vue 模板里以 v- 开头的特殊属性叫"指令",它们告诉 Vue"怎么渲染这个元素"。常用的就那么几个,记住它们你就能写出绝大多数页面:

v-text:更新元素的文本内容(等价于双花括号,但少用)。
v-html:把字符串当 HTML 渲染。
v-show:切换 display 样式,DOM 一直在。
v-if / v-else-if / v-else:条件渲染,不满足时 DOM 不存在。
v-for:列表渲染,必须配 :key。
v-on(缩写 @):绑定事件。
v-bind(缩写 :):绑定属性。
v-model:表单双向绑定。
v-once:只渲染一次,之后不再更新(性能优化用)。
v-memo:按依赖缓存子树(高级优化)。

每个指令都可以带参数(v-bind:href 的 href)、修饰符(v-on:click.stop 的 .stop)、动态参数(v-on:[eventName])。本系列后续会逐一展开。

7. 模板里的关键字

Vue 在模板里提供了一些特殊变量,以 $ 开头:

$event:事件对象,在内联事件处理器里用。
$refs:访问模板里标了 ref 属性的 DOM 元素或子组件。
$nextTick:等下一次 DOM 更新后执行的回调(选项式 API 用)。

但 <script setup> 里你更多用 ref() 函数(const el = ref(null))来获取 DOM 引用,后面会详讲。

小结

这一章你学会了模板的四大支柱:文本插值、属性绑定、事件绑定、双向绑定,以及它们的缩写。下一篇我们深入 Vue 的灵魂——响应式数据,看看为什么改个数据视图就会自动变。

← 上一篇 Vue 环境搭建

下一篇 Vue 响应式数据 →

✈️💬