vue模板语法核心是声明式绑定，通过双大括号插值、v-html、:简写属性绑定、@事件指令及computed/methods封装逻辑实现响应式开发，禁用内联表达式与副作用操作。
Vue 模板语法的核心是“声明式绑定”——用最接近 HTML 的写法，把数据和 DOM 自然连起来。不需手操作 DOM，也不用写一堆回调，只要告诉 Vue “这里要显示什么”“这个按钮点一下干什么”，它就自动处理响应和更新。规范不是为了炫技，而是让代码好读、好改、好协作。
文本插值与原始 HTML 要分清用途
双大括号 {{ }} 是最常用的数据绑定方式，只渲染纯文本：
- ✅ 正确：
{{ message }}、{{ user.name || '游客' }}（支持简单表达式） - ❌ 错误：
{{ console.log('hello') }}（有副作用）、{{ if (x) {...} }}（语句不允许）
想渲染真实 HTML？必须用 v-html 指令，但仅限可信内容：
- ✅ 安全用法：
<div v-html="trustedContent"></div> - ❌ 危险行为：
<div v-html="userInput"></div>（可能执行恶意脚本）
属性绑定优先用简写 :，别硬套双大括号
HTML 标签的属性（如 id、class、src）不能直接写 {{ }}，要用 v-bind 或它的简写 :：
- ✅ 推荐：
<img :src="avatarUrl" :alt="user.name"> - ✅ 动态类名：
:class="{ active: isActive, disabled: !canClick }" - ❌ 不合法：
<div id="{{ dynamicId }}">（浏览器报错，模板解析失败） <h3>事件处理只调方法，不写逻辑</h3> <p>用户交互（点击、输入、提交）统一通过 <strong>@click</strong>、<strong>@input</strong> 等指令绑定，后面只跟已定义的方法名或简单调用：</p> <ul> <li>✅ 清晰安全：<code>@click="submitForm"、@input="updateSearch(query)" - ✅ 带原生事件：
@click="handleClick($event, item)"（显式传参更可控） - ❌ 避免内联：
@click="count++"、@click="doA(); doB()"（不可测试、难追踪、破坏响应式） - ❌ 禁止箭头函数：
@click="() => deleteItem(id)"（每次渲染新建函数，影响性能和 diff）
复杂逻辑坚决移出模板
模板不是 JavaScript 执行器。判断权限、格式化日期、拼接字符串、过滤列表……这些都该封装成 computed 或 methods：
- ✅ 计算属性（缓存、响应式）：
computed: { fullName() { return this.firstName + ' ' + this.lastName } }，模板中写{{ fullName }} - ✅ 方法封装（可复用、易测试）：
methods: { formatDate(ts) { return new Date(ts).toLocaleString() } }，模板中写{{ formatDate(post.time) }} - ❌ 模板堆砌：
{{ post.author.name.split(' ')[0] + ' · ' + new Date(post.time).getFullYear() }}（难维护、无复用、每次重渲染都执行）
