写在前面的话
学习 Vue 的一系列文章，主要是参考官方文档，同时结合自己的一点点心得体会整理而成的
有不足之处还请多多指正，下面先附上 Vue 的官方文档：
- 教程：https://cn.vuejs.org/v2/guide
- API：https://cn.vuejs.org/v2/api/
- 风格指南：https://cn.vuejs.org/v2/style-guide/
- Cookbook：https://cn.vuejs.org/v2/cookbook/
1、安装
（1）通过 <script> 引入
- 在学习过程中，可以使用最新的版本：
<script src="https://cdn.jsdelivr.net/npm/vue"></script>- 在开发环境中，最好使用明确的版本（2.6.10 是目前最新的稳定版）：
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>- 在生产环境中，建议使用压缩的版本：
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>开发版本和生产版本的区别在于，开发版本包含完整的警告，而生产版本具有更快的速度
（2）通过 NPM 安装
在构建大型应用时，推荐使用 NPM 安装（在此之前，请确保你的电脑已配置好相关环境）：
$ npm install vue同时，Vue 还提供了一个官方 cli，可以快速搭建繁杂的脚手架
$ npm install vue-cli但是，由于新手刚刚入门的时候并不推荐使用 cli，所以这里先不作具体介绍
2、入门
每个 Vue 应用都是通过 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>首先，我们在 <head> 中的 <script> 标签内引入 Vue
然后，在 <body> 中的 <div> 标签内显示数据 message 和方法 reversedMessage() 的返回结果
接下来，我们主要看 <body> 中的 <script> 标签，在这里，我们声明了一个 Vue 构造器
在这个简单的 Vue 构造器中，有三个参数，分别是 el、data 和 methods
（1）el —— Vue 实例的挂载目标
el 既可以是 CSS 选择器（string 类型），也可以是 HTMLElement 实例
例如上例中的 '#app' 就是一个 CSS 选择器，表明将 Vue 实例与 id 为 app 的 HTML 元素绑定起来
以后的所有操作全部在以上指定的 HTML 元素内，HTML 元素外不受影响
（2）data —— Vue 实例的数据对象
data 既可以是 Object 类型，也可以是 Function 类型
一般而言，data 应该只是数据，因此，Object 必须是纯粹的对象（含有零个或多个键值对）
另外一种情况是在定义组件时，data 必须声明为返回一个初始数据对象的函数
因为组件可能被用来创建多个实例，如果 data 还是 Object，那么所有实例将会共享同一个数据对象
实例创建后，可以通过实例属性 vm.$data 访问原始的数据对象
同时，实例也代理了 data 对象上的所有属性，也就是说，访问 vm.a 等价于访问 vm.$data.a
（3）methods —— Vue 实例的方法
一般而言，方法中的 this 会自动绑定为 Vue 实例
但是，当我们使用箭头函数时，this 将不会绑定为 Vue 实例，因为 this 绑定了父级作用域的上下文
methods 将被混入到 Vue 实例中，也就是说，我们可以通过 vm.functionName() 访问这些方法
我们已经学习了什么？—— 选项
- 数据
- data √
- methods √
- computed
- watch
- props
- propsData
- DOM
- el √
- template
- render
- renderError
- 生命钩子函数
- 资源
- 组合
- 其它