html中直接写{{变量}}会原样显示，因浏览器不识别该语法；需引入vue等模板引擎或手动js替换才能生效，且纯html文件中它始终是字面量。
HTML里直接写 {{变量}} 会原样显示，不是渲染结果
浏览器根本不认识 {{变量}} 这种语法，它既不是 HTML 标准，也不是 JavaScript 原生行为。你写的 {{name}} 会被当作文本节点直接输出到页面上，不会被替换成值。
要让 {{变量}} 生效，必须引入支持该语法的模板引擎（比如 Vue、Handlebars、Nunjucks），或自己用 JS 手动替换。
- 纯 HTML 文件双击打开 →
{{user}}就是字面量，不解析 - Vue 单文件组件中写在
<template></template>里 → 被 Vue 编译器识别并响应式替换 - 用
innerHTML+ 字符串.replace(/{{(\w+)}}/g, ...)手动处理 → 可行但无响应性，且易漏转义
Vue 中 {{变量}} 的基本使用和限制
Vue 是最常遇到 {{变量}} 的场景，但它只在 Vue 实例/组件的模板范围内有效，且有明确规则：
- 只能写在
<template></template>或支持模板编译的宿主（如v-html不支持，它只渲染 HTML 字符串） - 表达式内只能是单个语句，不能写
if、for、赋值（{{count++}}报错） - 支持管道符
{{message | capitalize}}，但需提前定义filters（Vue 3 已移除，改用计算属性或函数） - 访问嵌套属性如
{{user.profile.name}}，若user为null会报错 → 推荐用可选链{{user?.profile?.name}}（Vue 3.3+ 支持）
用 String.raw + 正则做轻量模板替换（无框架时）
如果只是静态页想快速填几个变量，又不想引整个模板引擎，可以用 JS 做一次简单替换：
const data = { title: "首页", count: 42 };
const template = String.raw`<h1>{{title}}</h1><p>共 {{count}} 条</p>`;
const html = template.replace(/{{(\w+)}}/g, (match, key) => data[key] ?? '');
document.body.innerHTML = html;
注意点：
- 正则只匹配单词字符
\w+，不支持{{user.name}}这种点号路径 - 没做 HTML 转义，
data.title = "<script>..."</script>会 XSS → 生产环境必须用textContent或DOMPurify - 无法响应数据变化，填完就固定了
服务端模板（如 Nunjucks、EJS）中 {{变量}} 的路径和上下文差异
Node.js 后端常用 Nunjucks（语法同 Jinja2）或 EJS，它们的 {{变量}} 在服务端执行，生成最终 HTML 再发给浏览器：
- Nunjucks 中
{{user.name}}可安全访问嵌套属性，{{user|default({})}}可设默认值 - EJS 用
输出转义内容，不转义（等价于 Nunjucks 的{{ name | safe }}） - 路径错误时表现不同：Nunjucks 报
Template render error: Cannot read property 'xxx' of undefined；EJS 直接抛ReferenceError - 前端 JS 里不要混用：比如你在 EJS 模板里写了
<script>console.log({{config}})</script>，若config是对象，得确保 JSON 序列化且加引号，否则语法错误
{{变量}} 永远只是字符串——这点最容易被忽略。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
