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>
【 阅读更多 Vue 系列文章，请看 Vue学习笔记 】