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 或它的简写 :：
vue-composition-api-best-practices
下载
Vue 3 组合式 API 与 最佳实践，涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。
立即学习“前端免费学习笔记（深入）”；
- ✅ 推荐：
<img :src="avatarUrl" :alt="user.name"> - ✅ 动态类名：
:class="{ active: isActive, disabled: !canClick }" - ❌ 不合法：
<div id="{{ dynamicId }}">（浏览器报错，模板解析失败）
事件处理只调方法，不写逻辑
用户交互（点击、输入、提交）统一通过 @click、@input 等指令绑定，后面只跟已定义的方法名或简单调用：
- ✅ 清晰安全：
@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() }}（难维护、无复用、每次重渲染都执行）
