第一篇
Vue.js基础篇
第2章
Vue.js开发基础
从本章开始，我们正式学习Vue.js。本章首先从最基础的知识开始，使读者了解一下让Vue.js运转起来的基本结构，以及如何在一个简单的页面上实现数据模型和页面元素的绑定。
Web开发的基础是HTML、CSS和JavaScript这三种语言，因此，希望读者在正式开始学习之前，确认自己已经基本掌握这三种语言。特别是JavaScrip-t，由于历史原因，它经历了比较复杂的演进过程，目前主流的开发中使用的是ES6语法。如果读者不是很熟悉的话，可以阅读一下本书附录中的简明介绍，以便对ES6有一个基本的了解。本章的思维导图如下所示。
本章导读
2.1
Vue根实例
知识点讲解
Vue.js遵循MVVM模式，因此使用Vue.js的核心工作就是创建一个“视图模型”（ViewModel）对象，并将它作为“视图”（View）和业务“模型”（Model）之间的桥梁。Vue.js的做法是提供Vue类型，开发者可通过创建一个Vue类型的实例来实现视图模型的定义。在一个完整的项目中，虽然可能会创建多个Vue实例并由此形成层次结构，但是通常一个应用中只能有一个唯一的处于最上层的Vue实例，这个Vue实例就称为“Vue根实例”。具体的语法形式如下所示。
1 let vm = new Vue({
2 // 选项对象3 })
可以看到，从JavaScript的角度看，Vue是类型，Vue()是其构造函数，可通过使用new运算符调用Vue()构造函数来创建一个“实例”，或者叫作“对象”。调用构造函数的时候，参数是以JavaScript的对象方式传入的。在这个对象中，可以设定很多选项，这些选项指定了这个对象的行为，即它与页面如何配合工作。学习使用Vue.js的很大一部分内容就是学习如何设置这个对象。
2.1.1 文本插值
先来看一个最简单的例子。在这个例子中，我们将显示一位用户的基本信息并向他问好，代码如下，详情可以参考本书配套资源文件“第2章/instance-01.html”。
1 <html>2 <head>3 <script src="vue.js"></script>4 </head>5 <body>6 <div id="app">7 <p>用户您好！</p>8 <ul>9 <li>姓名 : {{name}}</li>
10 <li>城市 : {{city}}</li>
11 </ul>12 </div>13 <script>14 let user = {
15 name : "Chance",16 city : "Beijing",17 };18 let vm = new Vue({
19 el: '#app',20 data: user21 })22 </script>23 </body>24 </html>
这个例子尽管非常简单，但却已经充分体现了Vue.js的使用方式。首先需要引入vue.js文件，然后HTML部分的写法就像普通网页一样，只是在某些需要动态生成的部分，用双大括号括起来一些变量，这些变量正好和后面的JavaScript代码中声明的对象一致。
仔细观察<script>部分的代码，理解传入Vue()构造函数中的对象（注意必须使用new运算符才能创建对象）是学习Vue.js的关键。
首先，参数对象有一个名为“el”（el是element的前两个字母，表示元素）的属性，其值恰好是我们需要处理的HTML元素的根节点id，即“#app”。这样，想要执行的任何操作都只会影响到这个div元素，而不会影响除了它之外的任何内容。
其次，参数对象（也可以叫选项对象）中定义了data属性，它的值是一个名为user的对象，这个对象就是“业务模型”，并且在代码中已经声明好了，它有两个属性——name和city，分别表示姓名和城市。可以看到，HTML结构中包含了如下部分：