vue模板中插值表达式{{ }}仅支持单个表达式，禁止语句和赋值；复杂逻辑应抽至computed；默认转义html防xss，渲染html需v-html；属性绑定须用v-bind而非{{ }}。
Vue 模板中的插值表达式（{{ }}）是数据绑定最直观的方式，但不是所有 JavaScript 写法都能直接往里塞。用对了清爽高效，滥用则埋下可维护性、性能甚至安全风险。
只允许单个表达式，禁止语句和赋值
插值内只能写能求出一个值的表达式，比如变量、运算、三元判断、方法调用、可选链等。不能出现 if、for、function、let/const、= 这类语句或声明。
- ✅ 正确：{{ count + 1 }}、{{ user?.name || '匿名' }}、{{ isActive ? '启用' : '停用' }}
- ❌ 错误：{{ if (count > 0) { ... } }}、{{ let x = 1 }}、{{ doSomething() }}（除非该方法无副作用且纯返回）
不推荐在插值中写复杂逻辑
哪怕语法上合法，像 {{ firstName.toUpperCase() + ' ' + lastName.trim().split(' ')[0] }} 这类写法也应避免。它难读、难调试、无法复用，且每次渲染都重新执行。
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
- 建议把这类逻辑抽到 计算属性（computed） 中，例如定义 fullName，再写 {{ fullName }}
- 涉及异步、格式化、权限判断等场景，更应交给方法或 computed，而非模板内硬编码
注意文本与 HTML 的区别
{{ }} 默认输出为纯文本，会自动转义 HTML 字符（如 显示为文字，而非标签）。若真需渲染 HTML，必须用 <strong>v-html</strong> 指令，且仅限可信内容。
- ✅ 安全展示：{{ article.title }} —— 自动防 XSS
- ⚠️ 风险操作： —— 若 content 来自用户输入，可能执行恶意脚本
属性绑定不能用 {{ }}，要用 v-bind
HTML 标签的 attribute（如 class、href、disabled）不支持双大括号语法。必须用 v-bind:（或简写 :）来动态绑定。
- ✅ 正确：
@#@#@#@#@#@#@#@#@#@0、<img :src="avatar" :alt="name"> - ❌ 错误：
@#@#@#@#@#@#@#@#@#@1—— Vue 会忽略，浏览器按字面渲染 "{{ url }}"
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
