前语

本篇博文是《Vue.js 打怪升级之路》中入门系列的第二篇博文，主要内容是探索插值表达式和呼应式特性的奥妙，深化学习其间的语法和用法，了解如何将数据动态地展现在页面上，往期系列文章请访问博主的 Vue 专栏，博文中的一切代码全部收集在博主的 GitHub 库房中；

插值表达式

在 Vue 中，插值表达式是一种特殊的语法，用于将数据动态地刺进到HTML模板中。它运用双大括号 {{ }} 将表达式包裹起来，并将其放置在 HTML 元素的文本内容中。

具体地，Vue 的编译器将解析插值表达式，并经过创立虚拟 DOM 节点来表示插值的位置和内容。在运转时，这些虚拟 DOM 节点将被动态地更新，以反映数据的改变。

【Vue】「Vue.js 入门攻略」（二）了解插值表达式和呼应式特性

如上图所示，这儿的 name 是 Vue 实例的一个数据特点，将会在烘托时刺进到 <div> 元素的文本内容中。

插值表达式一些常见的语法如下，代码此处跳转：

<h3>{{name}}</h3>
<p>{{motto.toUpperCase()}}</p>
<p>{{age >= 18 ? '成年':'未成年'}}</p>
<p>{{friend.sex}}</p>
<p>{{fn()}}</p>

运转结果：

【Vue】「Vue.js 入门攻略」（二）了解插值表达式和呼应式特性

需求注意的是，插值表达式只能处理简略的表达式，因为 Vue 的编译器只能解析和生成特定的代码逻辑。关于杂乱的逻辑，例如条件判别和循环，Vue 提供了其他的指令和语法来处理。

因而需求注意以下几点：

  1. 在插值表达式中的数据需求在 data 中存在。 比方运用 data 中不存在的数据 desc，控制台会提示 Property or method "desc" is not defined on the instance but referenced during render.。

    【Vue】「Vue.js 入门攻略」（二）了解插值表达式和呼应式特性

  2. 不支持运用句子。比方 for。

    【Vue】「Vue.js 入门攻略」（二）了解插值表达式和呼应式特性

  3. 不能在标签的特点中运用插值表达式。如果要给标签特点动态赋值，依据提示用 v-bind 指令。

    【Vue】「Vue.js 入门攻略」（二）了解插值表达式和呼应式特性

呼应式特性

Vue 中的呼应式特性指的是 Vue 框架能够主动追寻数据改变并当即更新相关视图的才能。

这种呼应式特性是经过 Vue 的 “数据绑架” 机制来完成的，具体完成过程如下：

  1. 数据目标的初始化：界说一个包含数据的 JavaScript 目标，作为 Vue 实例的 data 选项。
  2. 监听数据目标特点：Vue 将遍历 data 选项中的一切特点，并运用 Object.defineProperty 方法将它们转化为 “呼应式特点”。在转化过程中，Vue 会为每个特点创立一个监听器 Watcher 目标，用于追寻特点的改变状况。
  3. 建立数据依靠关系：这是 Vue 完成 “呼应式” 的关键步骤。当运用呼应式特点时，模板中的视图会创立对应的依靠，Vue 之所以能够追寻到视图，依靠于相对应的数据特点。
  4. 捕获呼应数据改变：当呼应式特点被修正时，Vue 能够捕获到这个改变，并通知依靠于该特点的相关视图进行更新。
  5. 同步更新依靠视图：一旦某个呼应式特点发生改变，Vue 会当即更新一切依靠于该特点的视图，以坚持与数据的同步。

【Vue】「Vue.js 入门攻略」（二）了解插值表达式和呼应式特性

比方咱们需求烘托 title 和 content 两个数据，代码此处跳转：

<div id="app">
    <h3>{{title}}</h3>
    {{content}}
</div>

数据内容如下所示：

<script src="../../vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            title: "呼应式数据",
            content: "这儿是呼应式内容！"
        }
    })
</script>

作为呼应式数据，在 content 中增加内容 Hello, World! --sidiot.，页面上也会随之增加。

运转结果：

【Vue】「Vue.js 入门攻略」（二）了解插值表达式和呼应式特性

当然也能够在浏览器控制台进行修正：

【Vue】「Vue.js 入门攻略」（二）了解插值表达式和呼应式特性

开发者东西

在动态调试数据时，可能浏览器控制台运用的没有那么利索，这时候咱们能够寻求插件的协助，在谷歌商铺搜索 Vue.js，挑选第一个进行安装；

【Vue】「Vue.js 入门攻略」（二）了解插值表达式和呼应式特性

这样咱们就能够经过插件快速地修正数据了：

【Vue】「Vue.js 入门攻略」（二）了解插值表达式和呼应式特性

跋文

当你完成了阅读这篇博文时，期望你对 Vue.js 的插值表达式和呼应式特性有了更全面的了解。经过插值表达式，能够轻松地将数据动态地显现在 HTML 模板中，完成数据的灵敏绑定和展现。一起，Vue.js 独特的呼应式特性使得数据的改变能够主动地反映在应用程序的 UI 上，无需手动操作 DOM，这样能够专心于数据的处理和逻辑的编写，提高开发效率和代码的可维护性。

以上便是Vue.js 入门攻略：了解插值表达式和呼应式特性的一切内容了，期望本篇博文对大家有所协助！

代码：

参阅：

上篇精讲：Vue.js 入门攻略：（一）从安装到创立第一个应用程序

我是，等待你的关注，创作不易，请多多支持；

大众号：sidiot的技能驿站；

系列专栏：Vue.js 打怪升级之路