第一章 Vue的安装和初体验

1. Vue介绍

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。其核心思想是数据驱动视图，即让DOM对象和Vue中的数据建立关联，所有东西都变成响应式的，Vue中的数据一旦改变就自动更新页面。

2. Vue安装和导入

直接下载

可以直接从Vue的官网下载vue.js 文件，下载地址为 https://cdn.jsdelivr.net/npm/vue/dist/vue.js 。将vue.js文件放到项目文件夹中，直接在html文档中用script标签导入。

<script src="./vue.js"></script>

NPM

在构建大型项目时，推荐使用NPM的方式安装Vue。

npm install vue
# npm i vue

此时在html文件中引用vue.js的路径有所不同，如下：

<script src="html文件相对根目录的路径/node_modules/vue/dist/vue.js"></script>

Vue实例

要想使用Vue，必须要创建一个Vue实例，并在创建Vue对象的时候传入一些选项来初始化该Vue实例，通常，我们都会用变量 vm (ViewModel 的缩写) 来接收创建vue返回的实例对象。

let vm = new Vue({
  // 选项
  el: '#app',
  data: {
    message: 'hello world'
  }
})

Vue提供了一个 el 属性来关联html中的标签和Vue，该属性会将Vue挂载到html中id为 app 的标签上，从而进行数据渲染。选项中的 data 属性则是存放了要渲染到页面上的数据。

3. Vue的数据绑定

数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值：

<span>{{ message }}</span>

当Vue在渲染页面时，会将 {{ message }} 替换成数据对象 data 中 message 属性对应的值。无论何时，只要 message 的值发生改变，页面上的值也会发生改变。

4. 第一个Vue案例

在了解了以上知识后，我们可以创建一个简单的Vue案例了，也就是经典的hello world。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>第一个Vue案例</title>

  <!-- 导入Vue -->
  <script src="./vue.js"></script>
</head>
<body>
  <!-- 挂载Vue的根标签 -->
  <div id="app">
    {{ message }}
  </div>

  <script>
    // 创建Vue实例
    let vm = new Vue({
      el: '#app',
      data: {
        message: 'hello world'
      }
    })
  </script>
</body>
</html>

好了，运行该html文件，就可以在浏览器中看到 hello world 了。

运行结果