Vue3 模板基础

上一篇（Vue3 初识组件）里，你已经见过 {{ }} 和 @click，这篇把模板语法完整讲一遍。

模板就是 <template> 里的那段结构，用 HTML + Vue 特有的语法，把它绑定的数据展示出来。

模板里只有两类东西：插值（把数据”放”进页面）和 指令（给元素附加行为或属性）。

文本插值

在双大括号里写变量名或 JavaScript 表达式，输出到对应位置：

<script setup>
const name = '小明'
const price = 99
const isVip = true
</script>

<template>
  <p>{{ name }}</p>
  <p>{{ price + 1 }}</p>
  <p>{{ price >= 100 ? '贵' : '便宜' }}</p>
  <p>{{ isVip ? 'VIP' : '普通用户' }}</p>
</template>

几点说明：

• 里面写的是 表达式，不是语句。算数、三元、字符串拼接、调用方法都可以。
• 有值才能显示；undefined、null 会显示为空字符串。
• 插值会经过 HTML 转义，<script> 这类内容只会被当作文本显示，这是安全的默认行为。

下面这几种写法会报错或无效，因为 if、const 是语句不是表达式：

{{ if (ok) return msg }}       <!-- 错误：不能写语句 -->
{{ const x = 1 }}              <!-- 错误：不能声明变量 -->

原始 HTML

{{ }} 会把 HTML 当纯文本，如果数据里真的是一段 HTML，需要用 v-html：

<script setup>
const content = '<b>粗体</b>内容'
</script>

<template>
  <p>{{ content }}</p>      <!-- 显示：<b>粗体</b>内容 -->
  <p v-html="content"></p>  <!-- 显示：粗体内容（加粗） -->
</template>

注意：v-html 不会转义，如果内容是用户输入（比如评论区），会带来 XSS 安全风险。只有数据来自可信来源时才用，平时优先用 {{ }}。

指令（Directives）

指令是带 v- 前缀的特殊属性，用来给元素加行为。

下面把常用指令逐个过一遍，只讲最基本用法，后续还会对部分指令进行详细讲解。

v-bind

绑定属性：把元素属性的值交给数据控制，数据一变属性就变。

<img v-bind:src="imgUrl" />

简写为 :：

<img :src="imgUrl" />

v-on

绑定事件：给元素加上事件处理函数。

<button v-on:click="count++">+1</button>

简写为 @：

<button @click="count++">+1</button>

v-if / v-show

按条件决定元素显示还是隐藏。

<p v-if="isVip">VIP 内容</p>

v-for

按数组重复生成元素。

<li v-for="item in list">{{ item }}</li>

v-model

表单双向绑定：输入框里打什么，变量就变什么；变量一变，输入框也跟着变。

<input v-model="keyword" />

v-html

把数据当 HTML 输出（”原始 HTML”一节已详述）。

<div v-html="content"></div>

v-once

只渲染一次，之后数据再变页面也不更新。

<p v-once>{{ msg }}</p>

指令结构

一个指令由三部分构成：指令名 + 参数 + 修饰符。

前缀        参数      修饰符
 v-on     :click    .stop   =  "handler"

• 指令名：v-bind、v-on 等。
• 参数（可选）：v-bind: 后用属性名，v-on: 后用事件名。
• 修饰符（可选）：. 开头，改变行为，比如 .stop 阻止事件冒泡。

v-html、v-if 这类不需要参数和修饰符，直接 v-xxx="值"。

指令简写

v-bind 能简写，v-html 能简写吗？不能。

只有 v-bind（简写 :）和 v-on（简写 @） 有简写，其他指令必须写全名，这是 Vue 的官方约定。

速查卡片

用法	写法	说明
插值输出	{{ 表达式 }}	自动转义，不能写语句
输出原始 HTML	<div v-html="html"></div>	注意 XSS 风险
动态绑定属性	<img :src="url">	简化自 v-bind:src
绑定事件	<button @click="fn">	简化自 v-on:click
指令范畴	v-xxx:参数.修饰符="值"	部分指令只有 :参数 修饰符

掌握了插值、v-bind、v-on 和 v-html，模板就等于”会说话的 HTML”了。