Vue模板语法需区分插值{{}}与指令v-bind：插值仅用于文本内容和简单表达式，不可用于属性；v-bind专用于动态绑定HTML属性，支持class、style等复杂绑定；模板中只允许JavaScript表达式，禁止语句。
Vue.js 模板语法的核心是让数据与视图保持同步，关键在于分清什么该用插值（{{ }}），什么必须用指令（如 v-bind），以及哪些 JavaScript 表达式能写、哪些不能写。用错地方会导致渲染失败或属性不生效。
插值表达式：只用于文本内容和简单计算
双大括号 {{ }} 是最基础的绑定方式，它只能出现在 HTML 文本节点中，比如标签内文字、注释位置，**不能直接写在 HTML 属性里**。
- ✅ 正确用法：
<p>欢迎{{ name }}</p>、<span>{{ count + 1 }}条消息</span> - ✅ 支持简单表达式：
{{ gender === 'male' ? '先生' : '女士' }}、{{ Math.round(price) }} - ❌ 禁止语句：
{{ if (x > 0) {...} }}、{{ let a = 1 }}—— 这些不是表达式，会报错 - ⚠️ 注意安全：默认会转义 HTML 字符，若需渲染原始 HTML，改用 v-html 指令，而非
{{ }}
v-bind 指令：专用于动态绑定 HTML 属性
当需要把数据赋给 class、href、src、disabled 等 HTML 特性时，必须用 v-bind（可简写为 :），因为插值无法作用于属性值。
- ✅ 正确写法：
<a :href="url">链接</a>、<img :src="avatar" :alt="desc"> - ✅ 动态 class：
:class="{ active: isActive, 'text-red': error }"或:class="[baseClass, { hidden: isHidden }]" - ✅ 动态 style：
:style="{ color: textColor, fontSize: size + 'px' }" - ⚠️ 注意：绑定布尔属性（如
disabled）时，值为false会移除该属性，true才保留 —— 不是设为字符串"false"
表达式限制：模板中只允许表达式，不支持语句
Vue 模板里的所有 JS 内容都运行在沙箱环境中，仅支持表达式求值，目的是保障安全与可预测性。
立即学习“前端免费学习笔记（深入）”；
- ✅ 允许：
{{ items.length }}、{{ message.split('').reverse().join('') }}、{{ $filters.formatDate(date) }} - ✅ 可调用方法：
{{ formatDate(date) }}（前提是formatDate在methods或setup中定义） - ❌ 不允许：
{{ var x = 1 }}、{{ for (let i=0; i、<code>{{ function foo(){} }} - ? 小技巧：复杂逻辑不要塞进模板，提取到计算属性（
computed）或方法里更清晰、可复用
其他常用指令配合插值使用
插值负责“显示什么”，指令负责“怎么控制行为或结构”，两者常组合使用。
-
v-if / v-show：控制元素是否渲染或显隐，
v-if有惰性，v-show切换 display -
v-for：遍历数组或对象，注意加
key，避免复用问题 -
v-on（简写
@）：绑定事件，如@click="handleClick"，支持修饰符如.prevent、.enter -
v-model：实现表单控件的双向绑定，本质是
v-bind+v-on的语法糖
