Vue.js模板核心机制包括插值表达式、指令及自定义指令：插值支持单表达式与可选链，推荐计算属性；v-bind支持对象/数组语法动态绑定；v-if/v-show/v-for需按场景协作并规范key；自定义指令封装复杂DOM行为。
Vue.js 的插值表达式（{{ }}）和指令（如 v-if、v-for、v-bind、v-on 等）是模板渲染的核心机制。掌握它们的高级用法，能显著提升代码可读性、性能和灵活性，避免常见陷阱。
插值表达式：不止是简单取值
插值表达式支持 JavaScript 表达式，但有明确限制：只能是单个表达式，不能含语句（如 if、for）、赋值或函数声明。不过可通过计算属性、方法或可选链/空值合并等现代语法实现更安全、更清晰的逻辑。
- 推荐用计算属性替代复杂内联表达式：
{{ fullName }}比{{ firstName + ' ' + lastName.toUpperCase() }}更易维护、可复用且自动响应依赖变化。 - 安全访问嵌套属性：使用可选链（
?.）和空值合并（??）避免报错：{{ user.profile?.address?.city ?? '未填写' }} - 过滤器已废弃（Vue 3 中移除），改用方法调用或计算属性：
{{ formatPrice(price) }}或{{ priceFormatted }}
v-bind：动态绑定的深度控制
v-bind 不仅能绑定单个属性，还支持对象语法、数组语法及响应式展开，适合处理多条件类名、样式或组件 prop。
- 类名绑定灵活组合：
:class="{ active: isActive, 'text-danger': hasError }"
或结合数组与对象：:class="[{ active: isActive }, errorClass]" - 样式绑定支持对象与数组：
:style="{ color: textColor, fontSize: size + 'px' }"
多个样式对象可合并：:style="[baseStyles, overridingStyles]" - 批量绑定 prop 使用展开运算符（需确保对象为响应式）：
<child-component v-bind="propsObject" />
v-if / v-show / v-for 的协作与避坑
三者用途不同：v-if 控制元素是否渲染（销毁/重建），v-show 控制 display（仅 CSS 切换），v-for 渲染列表。混用时需注意优先级与 key 规范。
立即学习“前端免费学习笔记（深入）”；
-
v-for优先级高于v-if，避免在同一元素上同时使用；如需条件过滤，应在数据层处理（如 computed 过滤）：v-for="item in filteredList"，而非v-for="item in list" v-if="item.visible" - 用
v-if替代v-show当条件极少变化（如权限开关）；频繁切换用v-show减少 DOM 开销。 -
v-for必须配合:key，且 key 应稳定唯一（不推荐用index）；对列表排序/过滤后，key 若基于索引会导致状态错乱。
指令进阶：自定义指令与函数式组件中的插值
原生指令满足多数场景，但复杂 DOM 行为（如聚焦、防抖、权限指令）可通过自定义指令封装。同时，在函数式组件或 render 函数中，插值逻辑需转为 JavaScript 表达式。
- 自定义指令示例（自动聚焦）：
app.directive('focus', { mounted(el) { el.focus() } })，模板中用v-focus - 权限控制指令可结合用户角色与路由元信息：
v-permission="'user:delete'"，内部判断后决定是否插入元素 - 在
setup()+h()或 JSX 中，插值变为 JS 表达式：h('div', { class: ['btn', { active: isActive }] }, `点击次数：${count.value}`)
