插值与指令
模板语法分两类：插值与指令。插值用双花括号 {{ 表达式 }} 输出文本（支持三元、运算、方法调用，不支持语句）；指令是带 v- 前缀的特殊属性，告诉 Vue 对这个元素做特殊行为。
最常用的指令：v-bind（缩写 :）绑定属性、v-on（缩写 @）绑定事件、v-if/v-for 控制结构、v-model 双向绑定。指令的值是 JS 表达式，所以 :id="'item-' + n 这样的拼接是合法的。
- {{ }} 文本插值：输出表达式结果，支持过滤写法但 Vue3 已移除 filter
- v-bind/: 绑定属性；v-on/@ 绑定事件；两者都有缩写
- 指令值是表达式：可以写三元、方法调用、字符串拼接
HTML
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>插值与指令</title> <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> </head> <body> <div id="app"> <!-- 文本插值：支持表达式 --> <p>{{ msg }}，反转：{{ msg.split('').reverse().join('') }}</p> <!-- v-bind 缩写为 : ，绑定属性 --> <a :href="url" :title="msg">链接</a> <!-- v-on 缩写为 @ ，绑定事件 --> <button @click="msg = '变了'">改文字</button> <!-- v-html 输出真实 HTML（注意只用于可信内容） --> <p v-html="raw"></p> </div> <script> const { createApp } = Vue; createApp({ data() { return { msg: '你好', url: 'https://cn.vuejs.org', raw: '<b>加粗文字</b>' }; } }).mount('#app'); </script> </body> </html>
本节要点模板两大语法：{{ }} 插值文本，v- 指令驱动行为；: 与 @ 是最常用的两个缩写。
