双大括号{{ }}是vue最基础的数据绑定方式，支持响应式变量、javascript表达式（非语句）、自动html转义、空值安全处理及v-once一次性插值。
双大括号 {{ }} 是 Vue 最基础的数据绑定方式，它把 JavaScript 表达式的结果实时渲染到模板中，数据一变，视图自动更新。
绑定响应式变量
直接写变量名即可，支持 ref 和 reactive 定义的数据：
-
{{ username }}—— 显示 ref 声明的字符串 -
{{ user.name }}—— 访问 reactive 对象的嵌套属性 -
{{ count }}—— 数值型变量会自动转为字符串显示
在插值里写表达式
双大括号内允许单个 JavaScript 表达式，但不能是语句（比如不能写 if 或 for）：
- 算术运算：
{{ price * quantity }} - 三元判断：
{{ isActive ? '在线' : '离线' }} - 字符串处理：
{{ message.toUpperCase() }} - 调用方法：
{{ formatDate(createTime) }}（前提是该函数在组件作用域内可访问）
注意 HTML 转义与安全
默认情况下，{{ }} 会把内容当作纯文本处理，自动转义 HTML 标签，防止 XSS：
-
{{ '<strong>危险</strong>' }}→ 页面显示的是文字 `危险`，而不是加粗效果 - 如果真要渲染 HTML，必须改用
v-html指令，例如：<p v-html="rawHtml"></p> - 不要在
{{ }}里拼接用户输入的 HTML，避免安全风险
处理空值和未定义
当绑定的数据为 null 或 undefined 时，插值位置会渲染为空字符串，不会报错：
-
{{ userInfo?.name }}可配合可选链避免深层属性报错（需确保运行环境支持） - 若想显示默认值，可用逻辑运算符：
{{ user.nickname || '匿名用户' }} - 一次性插值可用
v-once，后续数据变化不再更新该节点：<span v-once>{{ msg }}</span>
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
