第一章 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标签导入。

NPM

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

npm install vue
# npm i vue

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

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”语法 (双大括号) 的文本插值：

{{ message }}

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

4. 第一个Vue案例

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

  
  
  
  

  
  


  
  

    {{ message }}
  

  

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

运行结果