1、安装
（1）通过 <script> 引入
- 在学习过程中，可以使用最新的版本：
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
- 在开发环境中，最好使用明确的版本（2.6.10 是目前最新的稳定版）：
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
- 在生产环境中，建议使用压缩的版本：
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.min.js"></script>
开发版本和生产版本的区别在于，开发版本包含完整的警告，而生产版本具有更快的速度
（2）通过 NPM 安装
在构建大型应用时，推荐使用 NPM 安装（在此之前，请确保你的电脑已配置好相关环境）：
> npm install vue
同时，Vue 还提供了一个官方 cli，可以快速搭建繁杂的脚手架
> npm install vue-cli
但是，由于新手刚刚入门的时候并不推荐使用 cli，所以这里先不作具体介绍
2、入门
每个 Vue 应用都是通过 new Vue() 创建的一个 Vue 实例开始的
var vm = new Vue({ // 选项 })
一个简单的例子如下：
在没有任何说明的情况下，如果你能读懂下面的代码，那么这篇文章对你的帮助可能不大
但是如果你对代码中的某些地方感到疑惑，那么可以看看下面的注释帮助理解
<!DOCTYPE html> <html> <head> <title>Demo</title> <script src="https://cdn.jsdelivr.net/npm/vue"></script> </head> <body> <div id="app"> <p>{{ message }}</p> <p>{{ reversedMessage() }}</p> </div> <script type="text/javascript"> var vm = new Vue({ el: '#app', data: { message: "Hello Vue" }, methods: { reversedMessage: function () { return this.message.split('').reverse().join('') } } }) </script> </body> </html>
下面是添加注释之后的代码：
<!DOCTYPE html> <html> <head> <title>Demo</title> <!-- 引入 Vue --> <script src="https://cdn.jsdelivr.net/npm/vue"></script> </head> <body> <div id="app"> <!-- 通过 Mustache 语法（双大括号语法）实现数据绑定 --> <!-- 显示 message 数据 --> <p>{{ message }}</p> <!-- 显示 reversedMessage 函数的返回结果 --> <p>{{ reversedMessage() }}</p> </div> <script type="text/javascript"> // 创建 Vue 实例，这有三个参数，分别是 el、data 和 methods var vm = new Vue({ // el 是 Vue 实例的挂载目标，既可以是 CSS 选择器，也可以是 HTMLElement 实例 // 这里的 '#app' 是 CSS 选择器，表明将 Vue 实例与 id 为 app 的 HTML 元素绑定起来 // 以后的所有操作全部在指定的 HTML 元素内，HTML 元素外不受影响 el: '#app', // data 是 Vue 实例的数据对象，既可以是 Object 类型，也可以是 Function 类型 // 这里的 data 就是一个对象，而且一般而言 data 都应该是一个纯粹的对象 // 但是在定义组件时，data 必须声明为返回一个初始数据对象的函数 // 因为组件会被用来创建多个实例，若 data 为 Object，则所有实例将会共享同一个数据对象 data: { message: "Hello Vue" }, // methods 是 Vue 实例的方法，它可以是一个对象，并且对象中的每一项都是一个 method // 一般而言，方法中的 this 会自动绑定为 Vue 实例 // 但是当使用箭头函数时，this 不会绑定为 Vue 实例，因为 this 绑定了父级作用域的上下文 methods: { reversedMessage: function () { // 由于 this 绑定为 Vue 实例，所以可以直接访问 data 对象中的属性 message return this.message.split('').reverse().join('') } } }) // Vue 实例代理 data 对象上的所有属性，也就是说我们可以通过 `vm.message` 进行访问 console.log(vm.message) // methods 中的方法也混入到 Vue 实例中，即我们可以通过 `vm.reversedMessage()` 访问 console.log(vm.reversedMessage()) </script> </body> </html>
文章知识点与官方知识档案匹配，可进一步学习相关知识
