五一闲在家没事做，又重温了一下vue的入门指南，边看边记录，便于记忆。
1.安装
1.1 直接
1.2 npm
npm install vue
1.3 CLI
CLI官方文档
2.介绍
Vue是一套用于构建用户界面的渐进式框架，支持申明式渲染，条件与循环，处理用户输入，组件化应用构建等。
3.Vue实例
一个Vue应用由一个通过new Vue创建的根vue，以及可选的嵌套组件和可选的组件树组成，所有的vue组件都是vue实例。
var vm = new Vue({
// 选项
})
3.1.数据与方法
当一个Vue实例被创建时，它将data对象中所有的property加入到Vue的响应式系统中，当这些property的值发生改变时，视图将产生响应，更新为最新的值。
// 我们的数据对象
var data = { a: 1 }
// 该对象被加入到一个 Vue 实例中
var vm = new Vue({
data: data
})
// 获得这个实例上的 property
// 返回源数据中对应的字段
vm.a == data.a // => true
注意
只有当实例被创建时就已经存在于data中的property才是响应式的。
除了用户自定义的data数据外，vue实例还提供了一些自身的property和方法，它们都有前缀$。
var data = { a: 1 }
var vm = new Vue({
el: '#example',
data: data
})
vm.$data === data // => true
vm.$el === document.getElementById('example') // => true
// $watch 是一个实例方法
vm.$watch('a', function (newValue, oldValue) {
// 这个回调将在 `vm.a` 改变后调用
})
3.1.生命周期
每个Vue实例在被创建时都要经过一系列的初始化过程，比如设置数据监听，编译模板，挂载DOM，监听数据更新等等，这些生命周期的函数给了用户在不同阶段添加自己的代码的机会。生命周期钩子的this上下文指向调用它的vue实例。
4.模板语法
Vue使用了基于html的模板语法，允许开发者声明式的将DOM绑定至底层Vue实例的数据，所有Vue的模板都是合法的HTML，所以能被规范的浏览器和HTML解析器解析。在底层的实现上，Vue将模板编译成虚拟DOM渲染函数，结合响应系统，Vue能够智能的计算出最少需要重新渲染多少组件，并把DOM操作的次数减少到最少。
4.1.文本
使用{{}}可以方便的显示文本信息，如下所示：
Message: {{ msg }}
当msg的值发生变化时，界面上也将发生相应的变化 。
4.2.原始html
如果需要在界面上渲染html内容，需要使用v-html指令：
4.3.Attribute
使用v-bind可以动态设置attribute的值。
4.4.表达式
在vue的模板中，除了使用data中设置的property外，还可以使用表达式的形势：
{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
4.5.指令
指令是带有v-前缘的特殊attribute，指令的职责是：当表达式的值改变时，将其产生的连带影响，响应式的作用于DOM。
现在你看到我了
这里，v-if 指令将根据表达式 seen 的值的真假来插入/移除
元素。
4.6.动态参数
从2.6.0开始，可以用广括号括起来的javascript表达式作为一个指令的参数，可以是attribute和事件名：
...
...
4.7.修饰符
修饰符是以半角句号.指明的特殊后缀，用于指出一个指令应该以特殊方式绑定，例如，.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()：
4.8.缩写
对于一些频繁使用的指令，使用缩写是很必要的，因此Vue 为 v-bind 和 v-on 这两个最常用的指令，提供了特定简写：
v-bind
...
...
v-on
...
...
5.计算属性和侦听器
5.1 计算属性
模板内只能写一些简单的表达式，来进行简单的运算，但当逻辑较复杂时，让模板难以维护，所以，对于任何复杂逻辑，都应当使用计算属性,不仅能简化逻辑，还能提升代码的复用。
Original message: "{{ message }}"
Computed reversed message: "{{ reversedMessage }}"
var vm = new Vue({
el: '#example',
data: {
message: 'Hello'
},
computed: {
// 计算属性的 getter
reversedMessage: function () {
// `this` 指向 vm 实例
return this.message.split('').reverse().join('')
}
}
})
这里我们声明了一个计算属性 reversedMessage。我们提供的函数将用作 property vm.reversedMessage 的 getter 函数：
computed与methods区别
我们可以将同一函数定义为一个方法而不是一个计算属性。两种方式的最终结果确实是完全相同的。然而，不同的是计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。
5.2侦听属性
Vue提供了一种更通用的方式来观察和响应Vue实例上的数据变动：侦听属性。通过 watch 选项提供了一个更通用的方法，来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。在watch中定义需要监听的property,当属性发生变化时，将执行对应的方法：
{{ fullName }}
var vm = new Vue({
el: '#demo',
data: {
firstName: 'Foo',
lastName: 'Bar',
fullName: 'Foo Bar'
},
watch: {
firstName: function (val) {
this.fullName = val + ' ' + this.lastName
},
lastName: function (val) {
this.fullName = this.firstName + ' ' + val
}
}
})
6. Class 与 Style绑定
在操作元素的class列表和内联样式时，可以使用v-bind来处理它们，只需要通过表达式计算出字符串结果即可。
6.1.绑定HTML Class
6.1.1 对象语法
可以给class传递一个对象，来动态的切换class：
绑定的data如下所示：
data: {
isActive: true,
hasError: false
}
渲染结果如下所示：
当 isActive或者 hasError 变化时，class 列表将相应地更新。例如，如果 hasError 的值为 true，class 列表将变为 "static active text-danger"。
绑定的数据对象不必内联定义在模板里：
data: {
classObject: {
active: true,
'text-danger': false
}
}
或者使用计算属性：
data: {
isActive: true,
error: null
},
computed: {
classObject: function () {
return {
active: this.isActive && !this.error,
'text-danger': this.error && this.error.type === 'fatal'
}
}
}
6.1.2 数组语法
我们可以把一个数组传给v-bind:class，以应用一个class列表：
data: {
activeClass: 'active',
errorClass: 'text-danger'
}
渲染结果为：
6.2.绑定内联样式
6.2.1 对象语法
v-bind:style 的对象语法十分直观——看着非常像 CSS，但其实是一个 JavaScript 对象。CSS property 名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，记得用引号括起来) 来命名：
data: {
activeColor: 'red',
fontSize: 30
}
6.2.2.数组语法
v-bind:style 的数组语法可以将多个样式对象应用到同一个元素上：
7.条件渲染
7.1. v-if
v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 truthy 值的时候被渲染。v-if必须将它添加到一个元素上，除了作用于html中的元素外，还可以在template中使用：
Vue is awesome!
Title
Paragraph 1
Paragraph 2
7.2. v-else
可以使用 v-else 指令来表示 v-if 的else 块：
Now you see me
Now you don't
v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别。
7.3.v-else-if
v-else-if，可以充当 v-if 的else-if 块，可以连续使用：
div v-if="type === 'A'">
A