Vue模板语法通过声明式渲染实现数据与视图自动同步：{{ }}插值绑定文本，v-bind动态绑定属性，v-if/v-for/v-on等指令控制结构与事件，v-model实现表单双向绑定，计算属性替代过滤器处理复杂显示逻辑。
Vue 的模板语法是声明式渲染的落地方式，核心在于用可读性强的 HTML-like 语法把数据和视图自然地关联起来。你不用手动查 DOM、改 innerHTML 或监听变化，只要定义好“数据长什么样”，Vue 就自动决定“界面怎么变”。
文本插值：最基础的数据绑定
用双大括号 {{ }} 把变量或表达式嵌入 HTML 文本中，是最直观的绑定形式：
- {{ message }} 会实时显示 data 中 message 的值，数据一变，页面立刻更新
- 支持简单 JavaScript 表达式，比如 {{ count + 1 }}、{{ isActive ? '在线' : '离线' }}
- 不支持语句或流程控制（如 if、for），也不能写多条表达式，只允许单个求值表达式
- 若需插入原始 HTML，用三括号 {{{ rawHtml }}}，但仅限可信内容，防止 XSS
属性绑定：让 HTML 特性也响应数据
双大括号不能直接用在标签属性里，比如 <div id="{{id}}"> 是非法的。必须用 v-bind 指令：
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
- v-bind:id="dynamicId" —— 动态设置 id，值为 null 或 undefined 时该属性会被移除
- 简写形式是 :class、:src 等，例如
<img :src="avatarUrl"> - 支持对象语法：:class="{ active: isActive, 'text-danger': hasError }"，根据布尔值开关类名
- 也支持数组语法：:class="[baseClass, { active: isActive }]"
指令驱动行为：不只是显示，还能控制结构
指令是以 v- 开头的特殊特性，用于在模板中执行响应式逻辑：
立即学习“前端免费学习笔记（深入）”；
- v-if / v-else / v-show 控制元素是否渲染或显隐，v-if 是真正的条件切换（销毁/重建），v-show 只切 display 样式
- v-for 遍历数组或对象生成列表，记得加 :key 帮助 Vue 追踪节点身份，提升更新效率
- v-on 绑定事件，如 @click="handleClick"（@ 是 v-on 的简写），支持修饰符如 .prevent、.stop
- v-model 实现表单元素与数据的双向绑定，底层是 v-bind + v-on 的语法糖
过滤器与计算属性：处理显示逻辑更清晰
模板中不适合写复杂逻辑，Vue 提供两种方式分离关注点：
- 过滤器（{{ msg | uppercase | truncate }}）适合简单格式化，但 Vue 3 已移除内置过滤器支持，建议改用方法或计算属性
- 计算属性（computed）更适合依赖响应式数据的派生值，有缓存、可读性强、支持 getter/setter
- 例如：用户输入邮箱，计算属性可实时返回格式校验结果或脱敏显示，比在模板里写一长串逻辑更可靠
