您的位置: 首页> Vue

Vue2（三）——模板语法

匿名上传

发布时间:2026-02-03 09:00:02

v2.cn.vuejs.org/v2/guide/sy…

上面这段原封不动，来自官方，我比较菜，看不懂，下面AI的分析

第一层：写什么？—— 声明式模板 (Declarative Templates)

原文： “Vue.js 使用了基于 HTML 的模板语法... 声明式地将 DOM 绑定至数据... 所有模板都是合法的 HTML。”

这讲的是 Vue 的**“门面”**。

声明式 (Declarative) vs 命令式 (Imperative)：

- 命令式（如 jQuery）： 你需要一步步告诉浏览器怎么做（“找到 id 为 app 的 div，清空内容，插入一个 span，设置 span 的文字...”）。
- 声明式（Vue）： 你只告诉 Vue 你想要什么结果（“这里要显示 {{ message }}”），具体的脏活累活（DOM 操作）交给 Vue 去处理。

基于 HTML：

- 这大大降低了学习门槛。设计师或后端开发人员也能看懂 Vue 代码，因为它长得就像普通的 HTML。
- 这也意味着现有的 HTML 解析器都能处理它，不会像某些非标语法那样导致编辑器报错。

第二层：怎么变？—— 编译与虚拟 DOM (Compilation & VDOM)

原文： “在底层的实现上，Vue 将模板编译成虚拟 DOM 渲染函数。”

这讲的是 Vue 的**“转换过程”**。浏览器其实看不懂 v-if 或 {{ }}，所以 Vue 在代码运行前（或运行时）做了一次“翻译”。

编译 (Compile)：

Vue 有一个编译器，它会把你的 HTML 模板字符串“翻译”成一段 JavaScript 代码。这段代码就叫 渲染函数 (Render Function) 。

虚拟 DOM (Virtual DOM)：

渲染函数执行后，不会直接去动真的 DOM（因为操作真 DOM 很慢），而是生成一个 JavaScript 对象树，这个对象树就是虚拟 DOM。它就像是真实 DOM 的一份“轻量级蓝图”。

举个例子：

你的模板：

HTML

<div :id="dynamicId">Hello</div>

Vue 编译后的渲染函数 (伪代码)：

JavaScript

function render() {
  return h('div', { id: this.dynamicId }, 'Hello')
}

第三层：怎么跑？—— 响应式与智能更新 (Reactivity & Diffing)

原文： “结合响应系统，Vue 能够智能地计算出... 把 DOM 操作次数减到最少。”

这讲的是 Vue 的**“超能力”**。

响应系统 (Reactivity)：

Vue 会“监视”你的数据。当数据变化时，它不仅知道数据变了，还精确地知道哪个组件依赖了这个数据。

Diff 算法 (最小化更新)：

当数据变化，渲染函数会重新执行，生成新的虚拟 DOM 树。

Vue 会拿着新树和旧树做对比（Diff）。

- Vue 发现： “哦，只有这个 div 的 class 变了，其他都没变。”
- 结果：Vue 只去更新真实 DOM 里那个 div 的 class，其他不动。

这就是为什么 Vue 即使在处理庞大页面时依然很快的原因。

第四层：给高手的“后门” —— Render 函数 & JSX

原文： “如果你熟悉虚拟 DOM 并且偏爱 JavaScript 的原始力量... 直接写渲染 (render) 函数...”

这段话是说，模板虽然好用，但有时候不够灵活。

模板的局限： 比如你要写一个组件，根据 props 动态生成 h1 到 h6 标签。用模板写，你可能得写 6 个 v-if。
JS 的力量： 如果用渲染函数，你只需要写一行 JS：return h('h' + this.level, ...)。

Vue 并不强迫你用模板，它完全支持你像 React 那样写代码（JSX），这给了高级开发者极大的灵活性。

总结分析

这段话其实揭示了 Vue 的架构分层：

层次	作用	对应原文
顶层 (API)	易用性	基于 HTML 的模板，声明式绑定
中间层 (Compiler)	转化	模板 $\to rightarrow$ 渲染函数 $\to rightarrow$ 虚拟 DOM
底层 (Engine)	性能	响应式系统 + 智能 Diff 计算
扩展层 (Flexibility)	灵活性	可选 JSX / Render 函数

插值

文本

双大括号 Mustache

<span>Message: {{ msg }}</span>

Mustache 标签将会被替代为对应数据对象上 msg property 的值。无论何时，绑定的数据对象上 msg property 发生了改变，插值处的内容都会更新。

可以使用v-once ,只执行一次插值，后面值变化不会更新

<span v-once>这个将不会改变: {{ msg }}</span>

原始HTML

v-html

<p>Using mustaches: {{ rawHtml }}</p>
<p>Using v-html directive: <span v-html="rawHtml"></span></p>

整个span 的内容会被替换成 property 值 rawHtml直接作为 HTML

注意：XSS 攻击，并且只支持常规html，不支持解析自定义组件

Attribute

v-bind 执行绑定 Attribute

<div v-bind:id="dynamicId"></div>

注意与 HTML的不同 ( 里面的布尔属性提到了)

对于布尔 attribute (它们只要存在就意味着值为 true)，v-bind 有不同，在这个例子中：

<button v-bind:disabled="isButtonDisabled">Button</button>

如果 isButtonDisabled 的值是 null、undefined 或 false，则 disabled attribute 甚至不会被包含在渲染出来的 <button> 元素中。

使用 JavaScript 表达式

插值模板还支持三目运算符和数学表达式，以及库函数操作

{{ number + 1 }}

{{ ok ? 'YES' : 'NO' }}

{{ message.split('').reverse().join('') }}

<div v-bind:id="'list-' + id"></div>

错误例子

<!-- 这是语句，不是表达式 -->
{{ var a = 1 }}

<!-- 流控制也不会生效，请使用三元表达式 -->
{{ if (ok) { return message } }}

模板表达式都被放在沙盒中，只能访问全局变量的一个白名单，如 Math 和 Date 。你不应该在模板表达式中试图访问用户定义的全局变量。

大白话就是指定访问 new Vue({}) 时传入的对象里面的 data,methods computed等，以及库函数，外部定义的变量，只要没传入 new Vue({}) 里面就不能访问

指令

指令 (Directives) 是带有 v- 前缀的特殊 attribute。

指令 attribute 的值预期是单个 JavaScript 表达式 (v-for 是例外情况，稍后我们再讨论)。

当表达式的值改变时，将影响DOM

即 Model 影响 -> DOM

<p v-if="seen">现在你看到我了</p>

v-if 指令将根据表达式 seen 的值的真假来插入/移除 <p> 元素

参数

一些指令能够接收一个“参数”，在指令名称之后以冒号表示。

例如，v-bind 指令可以用于响应式地更新 HTML attribute：

<a v-bind:href="url">...</a>

在这里 href 是参数，告知 v-bind 指令将该元素的 href attribute 与表达式 url 的值绑定。

另一个例子是 v-on 指令，它用于 DOM 事件：

<a v-on:click="doSomething">...</a>

在这里参数是的事件名。我们也会更详细地讨论事件处理。

动态参数

用方括号括起来的 JavaScript 表达式作为一个指令的参数：

<!--
注意，参数表达式的写法存在一些约束，如之后的“对动态参数表达式的约束”章节所述。
-->
<a v-bind:[attributeName]="url"> ... </a>

这里的 attributeName 会被作为一个 JavaScript 表达式进行动态求值，求得的值将会作为最终的参数来使用。例如，如果你的 Vue 实例有一个 data property attributeName，其值为 "href"，那么这个绑定将等价于 v-bind:href。

使用动态参数为一个动态的事件名绑定处理函数：

<a v-on:[eventName]="doSomething"> ... </a>

在这个示例中，当 eventName 的值为 "focus" 时，v-on:[eventName] 将等价于 v-on:focus。

动态参数值的约束

预期是求出一个字符串
异常情况为null，null表示移除该绑定
动态参数表达式有一些语法约束，因为某些字符，如空格和引号，放在 HTML attribute 名里是无效的。

<!-- 这会触发一个编译警告 -->
<a v-bind:['foo' + bar]="value"> ... </a>

使用没有空格或引号的表达式，或者计算属性替代。

在 DOM 中使用模板时 (直接在一个 HTML 文件里撰写模板)，还需要避免使用大写字符来命名键名，因为浏览器会把 attribute 名全部强制转为小写：

<!--
在 DOM 中使用模板时这段代码会被转换为 `v-bind:[someattr]`。
除非在实例中有一个名为“someattr”的 property，否则代码不会工作。
-->
<a v-bind:[someAttr]="value"> ... </a>

例子如下

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <a v-bind:[someAttr]="value">掘金</a>
    </div>
  </body>
  <script>
    var app = new Vue({
      el: "#app",
      data: {
        value: "https:///",
        someAttr: "href",
      },
    });
  </script>
</html>

修改之后的代码

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <a v-bind:[someAttr]="value">掘金</a>
    </div>
  </body>
  <script>
    var app = new Vue({
      el: "#app",
      data: {
        value: "https:///",
        someattr: "href",
      },
    });
  </script>
</html>

修饰符

修饰符 (modifier) 是以半角句号 . 指明的特殊后缀

可以用于阻止事件冒泡或者阻止表单提交

例如，.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()：

<form v-on:submit.prevent="onSubmit">...</form>

缩写

缩写不是必须的

v-bind 缩写

<!-- 完整语法 -->
<a v-bind:href="url">...</a>

<!-- 缩写 -->
<a :href="url">...</a>

<!-- 动态参数的缩写 (2.6.0+) -->
<a :[key]="url"> ... </a>

v-on 缩写

<!-- 完整语法 -->
<a v-on:click="doSomething">...</a>

<!-- 缩写 -->
<a @click="doSomething">...</a>

<!-- 动态参数的缩写 (2.6.0+) -->
<a @[event]="doSomething"> ... </a>