1.2　Vue.js语法结构

1.2.1　实例化Vue与Mustache语法

在原生JavaScript中，使用new可以实例化一个对象，初步体验Vue.js的语法可知，Vue.js也采用相同的做法。

【示例1-1】 在页面的h1标签中显示“你好，世界”，但这串文字不能将固定值写在标签中，要求使用Vue.js进行管理。

代码如下：

上面的代码做了什么事情？

（1）创建了一个Vue.js对象。

（2）在创建Vue对象时，传入了一个options对象，options中的el属性决定了这个Vue对象挂载到哪一个元素上，很明显，这里挂载到了id为app的元素上。

（3）同时options对象中包含了data属性，该属性中通常会存储一些数据，上面例子中的msg就是直接定义出来的数据。

（4）标签中使用{{}}包裹着msg，这对双花括号就是Mustache语法，俗称胡子语法。

当然，data中的数据除了可以像msg一样是一个字符串外，也可以是一个对象，因此，渲染方式也应当进行修改，代码如下：

以上代码主要运用了Vue.js的基本语法规则。

1.2.2　双向数据绑定及其原理

1．Vue.js双向数据绑定场景

【示例1-2】 页面中有一个输入框input和一个标题标签h1，当input输入内容时，想看到h1的内容也被同步修改了。

代码如下：

在以上代码中，使用v-model指令达到了这个效果。尽管读者暂时不清楚v-model的作用，但依然可以观察到Vue.js在处理数据方面，确实会让开发者感受到其便捷性。

2．简单实现双向数据绑定

【示例1-3】 接下来用原生JavaScript实现一个简单的双向数据绑定。

代码如下：

3．双向数据绑定原理

Vue.js双向数据绑定原理是通过数据劫持结合发布订阅者模式的方式实现的，其核心是Object.defineProperty()方法。实现的基本效果是数据和视图同步，当数据发生变化时视图跟着变化、视图变化时数据也随之发生改变。

Object.defineProperty(obj, prop, descriptor)有3个参数，分别为obj（要定义属性的对象）、prop（要定义或修改的属性）、descriptor（具体的改变方法）。简单地说，就是用这种方法来定义一个值。当调用时，使用了Object.defineProperty()中的get()方法，当给这个属性赋值时，又用到了Object.defineProperty()中的set()方法。

1.2.3　Vue.js文件中的MVVM

要理解MVVM，可以进行如下拆分。

（1）View（V）层：视图层，在前端里指DOM层，主要作用是给用户展示各种信息。

（2）Model（M）层：数据层（逻辑层），数据可能是自定义的数据，或者从网络请求下来的数据。

（3）ViewModel（VM）层：视图模型层，是View层和Model层沟通的桥梁。一方面它实现了数据绑定（Data Binding），将Model的改变实时反映到View中；另一方面它实现了DOM监听，当DOM发生改变时可以相应地改变数据（Data）。

MVVM的流程如图1-3所示。

本节主要讲解了Vue.js的基本语法结构、双向数据绑定及其原理，以及对MVVM进行了剖析。 TC28KocK/R5aJHlcQ3edpEDFBLB31J33cQps7z7ujQpW2Q9QxDJz1aNBTeXXEUPC