```
### 内联样式绑定
内联样式的绑定，非常类似于样式类的操作。v-bind:style 的对象语法十分直观——看着非常像 CSS ，其实它是一个 JavaScript 对象。 CSS属性名可以用驼峰式（camelCase）或短横分隔命名（kebab-case）。
看个例子：
```html
Vue入门之htmlraw
```
自动添加前缀
当 v-bind:style 使用需要特定前缀的 CSS 属性时，如 transform ，Vue.js 会自动侦测并添加相应的前缀。
## 计算属性
在做数据的绑定的时候,数据要进行处理之后才能展示到html页面上，虽然vue提供了非常好的表达式绑定的方法，但是只能应对低强度的需求。比如： 把一个日期按照规定格式进行输出，可能就需要我们对日期对象做一些格式化的出来，表达式可能就捉襟见肘了。
Vue对象提供的computed属性，可以让我们开发者在里面可以放置一些方法，协助我们绑定数据操作，这些方法可以跟data中的属性一样用，注意这些方法用的时候不要加`()`。
例子来了：
```html
Vue入门之htmlraw
| 生日 | {{ getBirthday }} |
| 年龄 | {{ age }} |
| 地址 | {{ address }} |
```
## 绑定的数据过滤器
过滤器本质就是数据在呈现之前先进行过滤和筛选。官网上写的不错，我就不再赘述，下面是官网的描述。
Vue.js 允许你自定义过滤器，被用作一些常见的文本格式化。过滤器应该被添加在 mustache 插值的尾部，由“管道符”指示：
```
{{ message | capitalize }}
{{ message | capitalize }}
Vue 2.x 中，过滤器只能在 mustache 绑定和 v-bind 表达式（从 2.1.0 开始支持）中使用，因为过滤器设计目的就是用于文本转换。为了在其他指令中实现更复杂的数据变换，你应该使用计算属性。
过滤器函数总接受表达式的值作为第一个参数。
new Vue({
// ...
filters: {
capitalize: function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
}
}
})
过滤器可以串联：
{{ message | filterA | filterB }}
过滤器是 JavaScript 函数，因此可以接受参数：
{{ message | filterA('arg1', arg2) }}
这里，字符串 'arg1' 将传给过滤器作为第二个参数， arg2 表达式的值将被求值然后传给过滤器作为第三个参数。
```
## 核心：自动响应对象的变化到HTML标签
上面的例子都是 数据对象是写死在创建的Vue对像上，那如果数据（data）发生改变时会怎样呢？
让我们用chrome把上面例子的页面打开，并打开发者工具控制台,输入：`app.age = 20` 会有什么情况发生呢？
---
在页面中添加一个按钮，动态的增加年龄：
```html
Vue入门之htmlraw
| 生日 | {{ getBirthday }} |
| 年龄 | {{ age }} |
| 地址 | {{ address }} |
```
## 双向数据绑定
上面的例子我们大多讲的是单向的 js对象向 HTML数据进行绑定，那HTML怎样向js进行反馈数据呢？
HTML中只有表达能接受用户的输入，最简单的演示双向绑定的就是文本框了。
Vue提供了一个新的指令：v-model进行双向数据的绑定，注意不是v-bind。
```html
Vue入门之htmlraw
```
最终的结果就是：你改变input文本框的内容的时候，p标签中的内容会跟着进行改变，哇是不是很神奇呢...
关于其他表单的绑定的语法我就不赘述了，还是参考官网吧，我这里大部分例子也是来自[官网](https://cn.vuejs.org/v2/guide/forms.html#基础用法)。
## 数据绑定总结
vue提供了大量的绑定的语法和方法，非常方便我们进行数据的绑定，尤其它是双向的数据绑定，极大的减少了我们dom操作的麻烦程度。可能你越来越喜欢它了吧...
------
# Vue列表渲染及条件渲染实战
## 条件渲染
有时候我们要根据数据的情况，决定标签是否进行显示或者有其他动作。最常见的就是，表格渲染的时候，如果表格没有数据，就显示无数据。如果有数据就显示表格数据。
Vue帮我们提供了一个`v-if`的指令，帮助我们完成判断的模板处理。
```html
Yes
No
```
`v-if`指令可以根据数据绑定的情况进行插入标签或者移除标签。
当然，如果熟悉js的都清楚，有if，肯定会有else。 Vue提供的是 `v-else`指令。
## 列表渲染
### 基本v-for循环渲染标签
模板引擎都会提供循环的支持。Vue也不例外，Vue是提供了一个`v-for`指令。基本的用法类似于foreach的用法。还是看例子最直接，上代码：
```html
| 姓名 |
年龄 |
地址 |
| {{ item.name }} |
{{ item.age }} |
{{ item.address }} |
```
### Template循环渲染多标签
上面的例子，我们演示的是 每次循环输出一个tr标签。如果我们希望每次循环生成两个tr标签呢？如果还有生成其他的标签呢？
Vue给我们提供了template标签，供我们用于v-for循环中进行处理。
上代码喽：
```html
```
### 关于v-for对应的数组的更新
由于Vue的机制就是检测数据的变化，自动跟新HTML。数组的变化，Vue之检测部分函数，检测的函数执行时才会触发视图更新。这些方法如下：
- push()
- pop()
- shift()
- unshift()
- splice()
- sort()
- reverse()
## 表格显示的综合案例
下面是一个综合的案例，每秒钟往表格中添加一条数据。
本案例综合使用了v-if 和 v-for循环综合案例。
```html
Vue入门之动态显示表格
| 姓名 |
年龄 |
地址 |
| {{ item.name }} |
{{ item.age }} |
{{ item.address }} |
| 没有数据奥！ |
```
## 总结列表和条件绑定
列表的使用其实本质还是js的衍生使用，对于有js开发基础的没有什么难度。关键是多写几个案例就会详细通了。
-----------
# Vue事件处理
## 监听事件的Vue处理
Vue提供了协助我们为标签绑定时间的方法，当然我们可以直接用dom原生的方式去绑定事件。Vue提供的指令进行绑定也是非常方便，而且能让ViewModel更简洁，逻辑更彻底。所以还是推荐大家使用的。
Vue提供了`v-on`指令帮助我们进行事件的绑定。
基本的内联事件处理方法[官方demo]：
```html
这个按钮被点击了 {{ counter }} 次。
```
## 事件处理方法集成到Vue对象
内联的方式绑定的事件，只能处理简单的事件的处理逻辑。复杂的情况还是封装到js中最方便，也不容易出错。
Vue对象中可以添加methods属性，开发者可以把事件处理函数的逻辑放到methods中。
```html
Vue入门之动态显示表格
```
## 事件修饰符
官网上写的非常好，这块就直接用管网的吧。在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。尽管我们可以在 methods 中轻松实现这点，但更好的方式是：methods 只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。
为了解决这个问题， Vue.js 为 v-on 提供了 事件修饰符。通过由点(.)表示的指令后缀来调用修饰符。
- .stop
- .prevent
- .capture
- .self
- .once
```html
...
...
```
## 按键修饰符
在监听键盘事件时，我们经常需要监测常见的键值。 Vue 允许为 v-on 在监听键盘事件时添加按键修饰符：
```html
记住所有的 keyCode 比较困难，所以 Vue 为最常用的按键提供了别名：
```
全部的按键别名：
- .enter
- .tab
- .delete (捕获 “删除” 和 “退格” 键)
- .esc
- .space
- .up
- .down
- .left
- .right
- .ctrl
- .alt
- .shift
- .meta
## 事件绑定的简写
Vue中属性的绑定的简写直接是`:` === 'v-bind:'
而事件的缩写是直接变成`@`. 也就是说： `v-on:` === `@`
看下面的例子：
```html
```
## 事件绑定总结
Vue为了方便大家进行开发，提供了事件的相关的封装，可以让我们方便我们用Vue对事件进行开发，尤其是v-on指令的非常方便的跟Vue对象中methods进行配合进行复杂的事件处理，非常方便。另外事件的事件修饰符和按键修饰符也可以让Vue事件这块锦上添花。
---------
# Vue实例详解与生命周期
Vue的实例是Vue框架的入口，其实也就是前端的ViewModel，它包含了页面中的业务逻辑处理、数据模型等，当然它也有自己的一系列的生命周期的事件钩子，辅助我们进行对整个Vue实例生成、编译、挂着、销毁等过程进行js控制。
## Vue实例初始化的选项配置对象详解
前面我们已经用了很多次 `new Vue({...})`的代码，而且Vue初始化的选项都已经用了`data`、`methods`、`el`、`computedd`等,估计您看到这里时，应该已经都明白了他们的作用，我们就详细讲解一下他们的使用情况。更详细的请参考[官网内容](https://cn.vuejs.org/v2/api/#data)
### Vue实例的的data对象
- 介绍
Vue的实例的数据对象data 我们已经用了很多了，数据绑定离不开data里面的数据。也是Vue的核心属性。
它是Vue绑定数据到HTML标签的数据源泉，另外Vue框架会自动监视data里面的数据变化，自动更新数据到HTML标签上去。本质原理是：Vue会自动将data里面的数据进行递归抓换成getter和setter，然后就可以自动更新HTML标签了，当然用getter和setter所以老的浏览器Vue支持的不够好。
- data对象的类型：
+ 类型是Object或者Function。
+ 如果是组件对象中，data必须是Function类型。【后面学了组件后就明白了，暂时对组件先放放。】
- 实例：
```js
// 创建普通的Vue实例
var vm = new Vue({
data: data
})
// 组件定义【后面会详细讲的】
// Vue.extend() 中 data 必须是函数
var Component = Vue.extend({
data: function () { //这里必须是函数！！！！
return { a: 1 }
}
})
```
### Vue实例的computed
- 介绍
Vue的计算属性（computed)的属性会自动混入Vue的实例中。所有 getter 和 setter 的 this 上下文自动地绑定为 Vue 实例。这就很强大了，再计算属性中定义的函数里面可以直接使用指向了vue实例的this，异常方便的啊。
- 类型
`{ 键：函数}`
`{ [key: string]: Function | { get: Function, set: Function } }`
当然，可以省略setter,如果省略了setter，那么值就可以是普通函数，但是必须有返回值。
- 官方的实例
```html
var vm = new Vue({
data: { a: 1 },
computed: {
// 仅读取，值只须为函数
aDouble: function () {
return this.a * 2
},
// 读取和设置
aPlus: {
get: function () {
return this.a + 1
},
set: function (v) {
this.a = v - 1
}
}
}
})
vm.aPlus // -> 2
vm.aPlus = 3
vm.a // -> 2
vm.aDouble // -> 4
```
### methods
- 类型: { [key: string]: Function }
- 详细:
methods 将被混入到 Vue 实例中。可以直接通过 VM 实例访问这些方法，或者在指令表达式中使用。方法中的 this 自动绑定为 Vue 实例。
注意，不应该使用箭头函数来定义 method 函数 (例如 plus: () => this.a++)。理由是箭头函数绑定了父级作用域的上下文，所以 this 将不会按照期望指向 Vue 实例，this.a 将是 undefined。
- 示例:
```js
var vm = new Vue({
data: { a: 1 },
methods: {
plus: function () {
this.a++
}
}
})
vm.plus()
vm.a // 2
```
### watch
- 类型
` { [key: string]: string | Function | Object }`
- 详细:
一个对象，键是需要观察的表达式，值是对应回调函数。值也可以是方法名，或者包含选项的对象。Vue 实例将会在实例化时调用 $watch()，遍历 watch 对象的每一个属性。
- 示例:
```js
var vm = new Vue({
data: {
a: 1,
b: 2,
c: 3
},
watch: {
// 监控a变量变化的时候，自动执行此函数
a: function (val, oldVal) {
console.log('new: %s, old: %s', val, oldVal)
},
// 深度 watcher
c: {
handler: function (val, oldVal) { /* ... */ },
deep: true
}
}
})
vm.a = 2 // -> new: 2, old: 1
//注意，不应该使用箭头函数来定义 watcher 函数 (例如 searchQuery: newValue => this.updateAutocomplete(newValue))。理由是箭头函数绑定了父级作用域的上下文，所以 this 将不会按照期望指向 Vue 实例，this.updateAutocomplete 将是 undefined。
```
参考综合案例：
```html
Vue入门之数据监控
```
### 设置el的详解
- 类型
` string | HTMLElement`
限制： 只在由 new 创建的实例中遵守。
- 详细：
提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标,也就是说Vue绑定数据到哪里去找。可以是`CSS 选择器`，也可以是一个 `HTMLElement实例`。
在实例挂载之后(生命周期的内容后面会详细讲的奥)， 元素可以用 vm.$el 访问。
如果这个选项在实例化时有作用，实例将立即进入编译过程，否则，需要显式调用 vm.$mount() 手动开启编译。
```js
// 几乎所有例子都用到这个，所以就不再赘述
var app = new Vue({
el: '#app',
...
});
```
## Vue实例的生命周期
Vue实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程，我们称这是Vue的生命周期。通俗说就是Vue实例从创建到销毁的过程，就是生命周期。
在Vue的整个生命周期中，它提供了一系列的事件，可以让我们注册js方法，可以让我们达到控制整个过程的目的地，哇赛，如果你搞过Asp.Net WebForm的话，你会发现整个就是WebForm的翻版嘛哈哈。值得注意的是，在这些事件响应方法中的this直接指向的是vue的实例。
首先看看下面官网的一张生命周期的图，我做一下标注，看看整体的流程，后面我们上代码做一下效果。
Vue提供的可以注册的钩子都在上图片的红色框标注。
他们是：
- `beforeCreate`
在实例初始化之后，数据观测(data observer) 和 event/watcher 事件配置之前被调用。
- `created`
实例已经创建完成之后被调用。在这一步，实例已完成以下的配置：数据观测(data observer)，属性和方法的运算， watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。
- `beforeMount`
在挂载开始之前被调用：相关的 render 函数首次被调用。
- `mounted`
el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$el 也在文档内。
- `beforeUpdate`
数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。
你可以在这个钩子中进一步地更改状态，这不会触发附加的重渲染过程。
- `updated`
由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。
当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下，你应该避免在此期间更改状态，因为这可能会导致更新无限循环。
该钩子在服务器端渲染期间不被调用。
- `beforeDestroy`
实例销毁之前调用。在这一步，实例仍然完全可用。
- ` destroyed`
Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。
该钩子在服务器端渲染期间不被调用。
接下来我们做一个例子，看一下Vue中所有的生命周期怎么用的。
```html
Vue入门之生命周期
```
再看一个综合的实战的例子，可能涉及到ajax和组件，不过先看一下vue的生命周期的例子的用法：
```js
import Axios from 'axios' // 这是一个轻量级的ajax库，import是es6模块导入的语法。
export default { // 这是一个vue的模块，后面讲奥。
name: 'app',
components: {
},
data: function () {
return {
list: []
}
},
mounted: function () { // 挂在完成后的生命周期钩子注册。
this.$nextTick(function () { // 等待下一次更新完成后执行业务处理代码。
Axios.get('/api/menulist', {// 将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新
params: {
}
}).then(function (res) {
this.list = res.data
}.bind(this))
})
}
}
```
## Vue实例的全局配置
这一块都是一些小的知识点，我就不赘述了，直接copy [官网](https://cn.vuejs.org/v2/api/#silent)
Vue.config 是一个对象，包含 Vue 的全局配置。可以在启动应用之前修改下列属性：
- silent
- 类型： boolean
- 默认值： false
- 用法：
```js
Vue.config.silent = true
//取消 Vue 所有的日志与警告。
```
- optionMergeStrategies
- 类型： { [key: string]: Function }
- 默认值： {}
- 用法：
```js
Vue.config.optionMergeStrategies._my_option = function (parent, child, vm) {
return child + 1
}
const Profile = Vue.extend({
_my_option: 1
})
// Profile.options._my_option = 2
//自定义合并策略的选项。
//合并策略选项分别接受第一个参数作为父实例，第二个参数为子实例，Vue实例上下文被作为第三个参数传入。
```
- devtools
- 类型： boolean
- 默认值： true (生产版为 false)
- 用法：
```js
// 务必在加载 Vue 之后，立即同步设置以下内容
Vue.config.devtools = true
//配置是否允许 vue-devtools 检查代码。开发版本默认为 true，生产版本默认为 false。生产版本设为 true 可以启用检查。
```
- errorHandler
- 类型： Function
- 默认值： 默认抛出错误
- 用法：
```js
Vue.config.errorHandler = function (err, vm) {
// handle error
}
//指定组件的渲染和观察期间未捕获错误的处理函数。这个处理函数被调用时，可获取错误信息和 Vue 实例。
//Sentry, an error tracking service, provides official integration using this option.
```
- ignoredElements
- 类型: Array
- 默认值: []
- 用法:
```js
Vue.config.ignoredElements = [
'my-custom-web-component', 'another-web-component'
]
须使 Vue 忽略在 Vue 之外的自定义元素 (e.g., 使用了 Web Components APIs)。否则，它会假设你忘记注册全局组件或者拼错了组件名称，从而抛出一个关于 Unknown custom element 的警告。
```
- keyCodes
- 类型： { [key: string]: number | Array }
- 默认值： {}
- 用法：
```js
Vue.config.keyCodes = {
v: 86,
f1: 112,
mediaPlayPause: 179,
up: [38, 87]
}api
//给 v-on 自定义键位别名。
```
## Vue的全局API
Vue的全局API提供大量的功能，我这里就给大家罗列几个常用的结果，其他的还是参考[官网](https://cn.vuejs.org/v2/api/#全局-API).
### Vue.nextTick
`语法： Vue.nextTick( [callback, context] )`
```
参数：
{Function} [callback]
{Object} [context]
```
用法：
在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。
```js
// 修改数据
vm.msg = 'Hello'
// DOM 还没有更新
Vue.nextTick(function () {
// DOM 更新了
})
```
### Vue.set
`语法： Vue.set( object, key, value )`
```
参数：
{Object} object
{string} key
{any} value
返回值： 设置的值.
```
用法：
设置对象的属性。如果对象是响应式的，确保属性被创建后也是响应式的，同时触发视图更新。这个方法主要用于避开 Vue 不能检测属性被添加的限制。
注意对象不能是 Vue 实例，或者 Vue 实例的根数据对象。
### Vue.compile
- 语法：
`Vue.compile( template )`
- 参数：
`{string} template`
- 用法：
```js
//在render函数中编译模板字符串。只在独立构建时有效
var res = Vue.compile('{{ msg }}
')
new Vue({
data: {
msg: 'hello'
},
render: res.render,
staticRenderFns: res.staticRenderFns
})
```
### 全局API总结
其实还有几个其他的全局API，不打算在这里讲了，比如扩展组件Vue.extend 的用法、Vue.use加载插件、Vue.filter加载过滤器、Vue.directive自定义指令等
后面再讲其他Vue的知识点的时候，再加上这些，全局API其实就是Vue类型的静态方法，全局范围内都可以使用的，某些实例的方法本质也是调用了这些全局的，后面用到时候再说。
## Vue实例与生命周期总结
Vue的实例封装的还是挺有艺术性的，很符合开发者的思维规范，它的生命周期也非常清晰，使用起来也非常方便。Vue确实一个好框架。
------------------
# Vue入门之组件化开发
组件其实就是一个拥有样式、动画、js逻辑、HTML结构的综合块。前端组件化确实让大的前端团队更高效的开发前端项目。而作为前端比较流行的框架之一，Vue的组件和也做的非常彻底，而且有自己的特色。尤其是她单文件组件开发的方式更是非常方便，而且第三方工具支持也非常丰富，社区也非常活跃，第三方组件也呈井喷之势。当然学习和使用Vue的组件也是我们的最重要的目标。
## 全局扩展方法`Vue.extend`
Vue提供了一个全局的API，`Vue.extend`可以帮助我们对Vue实例进行扩展，扩展完了之后，就可以用此扩展对象创建新的Vue实例了。
类似于继承的方式。
```
语法：Vue.extend( options )
参数：
{Object} options
用法：
使用基础 Vue 构造器，创建一个“子类”。参数是一个包含组件选项的对象[后面会细讲]。
data 选项是特例，需要注意 - 在 Vue.extend() 中它必须是函数
```
下面是一个官网demo：
```html
// 创建 Profile 实例，并挂载到一个元素上。
new Profile().$mount('#mount-point')
// .$mount() 方法跟设置 el属性效果是一致的。
结果如下：
Walter White aka Heisenberg
```
综合案例代码：
```html
Vue入门之extend全局方法
```
## 创建组件和注册组件
当然上面的方式只是能让我们继承Vue实例做一些扩展的动作。看Vue中如何创建一个组件并注册使用。
Vue提供了一个全局注册组件的方法：Vue.component。
```
语法： Vue.component( id, [definition] )
参数：
{string} id 组件的名字，可以当HTML标签用，注意组件的名字都是小写，而且最好有横线和字母组合。
{Function | Object} [definition] 组件的设置
用法：
注册或获取全局组件。注册还会自动使用给定的id设置组件的名称
// 注册组件，传入一个扩展过的构造器
Vue.component('my-component', Vue.extend({ /* ... */ }))
// 注册组件，传入一个选项对象（自动调用 Vue.extend）
Vue.component('my-component', { /* ... */ })
// 获取注册的组件（始终返回构造器）
var MyComponent = Vue.component('my-component')
```
简单demo：
```html
```
```js
// 注册一个组件
Vue.component('my-component', {
// 模板选项设置当前组件，最终输出的html模板。注意：有且只有一个根元素。
template: 'A custom component!
'
})
// 创建根实例
new Vue({
el: '#example'
})
```
那么我们注册一个组件自动帮我生成 label和radiobutton组合。
```html
Vue入门之extend全局方法
```
注意结果点
- 组件的名字都必须是小写【[其实是非必须，但是为了不麻烦就强制吧](https://cn.vuejs.org/v2/guide/components.html#组件命名约定)】！！！而且建议是小写字母和横线的组合比如： my-radiobtn
- 注册组件的时候，可以传入一个选项对象进行配置。其中`props`是设置当前组件的属性，属性也都必须小写。属性是连接父容器和子组件的桥梁。
- 注意：属性名和组件的名字都要小写啊，不然vue不会认的。
- 编写组件代码最好配合Vue的chrome插件：[vue-devtool](https://github.com/vuejs/vue-devtools)
- 组件可以返还自己的数据，但是必须是函数。data必须是Function
## 局部注册组件
全局注册组件就是使用全局API `Vue.componet(id, {....})`就行了，当然我们有时候需要注册一个局部模块的自己用的组件。那么就可以用下面的方式了。
```js
var Child = {
template: 'A custom component!
'
}
new Vue({
// ...
components: {
// 将只在父模板可用
'my-component': Child
}
})
```
## 组件的slot
使用组件的时候，经常需要在父组件中为子组件中插入一些标签等。当然其实可以通过属性等操作，但是比较麻烦，直接写标签还是方便很多。
那么Vue提供了slot协助子组件对父容器写入的标签进行管理。
当父容器写了额外的内容时， 如果子组件恰好有一个slot标签，那边子容器的slot标签会被父容器写入的内容替换掉。
比如下面的例子：
```html
<
Vue入门之extend全局方法
这里是父容器写入的
{{ email }}
```
最终结果：
```html
这里是子组件
这里是父容器写入的
这里是子组件
flydragon@gmail.com
这里是子组件
slot标签会被父容器写的额外的内容替换掉，如果父容器没有写入任何东西，此标签将删除！
```
## 单文件组件的使用方式介绍
通过上面我们定义组件的方式，就已经感觉很不爽了，尤其是模板的定义，而且样式怎么处理也没有很好的进行规整。
Vue可以通过Webpack等第三方工具实现单文件的开发的方式。当然这里会牵扯到很多es6的语法、第三方工具实现前端模块化等很多知识，
我们大概看一眼指导Vue的组件可以直接写一个文件中，其他地方就可以直接导入这个模块了。后面做项目的时候我还会再讲一下怎么用。
```html
```
单文件书写组件的方式必须要配合webpack之类的工具才行，所以这里暂时不讲解如何做，后面到项目阶段的时候再详细讲解。
不过你可以参考：[Vue官网单文件组件](https://cn.vuejs.org/v2/guide/single-file-components.html)
## 组件总结
Vue的组件化还是做的比较彻底的。不像Angular1.0中的模块那么鸡肋。组件化确实让前端模块化开发更加容易实现，
Vue的单文件开发组件的方式也是Vue的一大创新，也发非常好用。
--------
# Vue路由详解
> 对于前端来说，其实浏览器配合超级连接就很好的实现了路由功能。但是对于单页面应用来说，浏览器和超级连接的跳转方式已经不能适用，
所以各大框架纷纷给出了单页面应用的解决路由跳转的方案。
> Vue框架的兼容性非常好，可以很好的跟其他第三方的路由框架进行结合。当然官方也给出了路由的方案： `vue-router`;
建议还是用官方的最好，使用量也是最大，相对来说Vue框架的升级路由组件升级也会及时跟上，所以为了以后的维护和升级方便还是使用Vue自家的东西最好。
## Vue-router的版本对应
> 注意: vue-router@2.x 只适用于 Vue 2.x 版本。
> vue-router@1.x 对应于Vue1.x版本。
- 的Github地址：[vue-router](https://github.com/vuejs/vue-router)
- [文档地址](https://router.vuejs.org/zh-cn/)
## vue-router的安装使用
- CDN连接方式
`https://unpkg.com/vue-router/dist/vue-router.js`
- npm 安装
```shell
npm install vue-router
```
## vue-router 入门demo
vue-router开发的步骤：
- 第一步： 引入vue和vue-router包。
> 可以使用cdn的方式或者npm的方式。如果配合npm和webpack的话可以直接作为一个模块导入即可。但是作为初学入门的话建议还是
> 直接使用cdn包的形式，先学会怎么用路由。
```html
```
- 第二步： 定义路由跳转的组件
```js
// 1. 定义（路由）组件。
const Foo = { template: '
' }
```
- 第三步： 定义路由规则对象
```js
// 每个路由path应该映射一个组件。 其中"component" 可以是
// 通过 Vue.extend() 创建的组件构造器，
// 或者，只是一个组件配置对象。
const routes = [
{ path: '/foo', component: Foo },
{ path: '/bar', component: Bar }
]
// 创建路由对象
const router = new VueRouter({
routes // （缩写）相当于 routes: routes，es6的新语法
})
```
- 第四步： 创建Vue对象，并加重上面创建的路由对象
```js
// 记得要通过 router 配置参数注入路由，
// 从而让整个应用都有路由功能
const app = new Vue({
router
}).$mount('#app')
```
- 第五步： 在模板中编写路由跳转链接
```html
```
## 使用vue-router的综合实例
下面是一个综合的例子, 页面上有几个导航的按钮，然后通过点击不同的按钮，可以在当前页面切换不同的组件。
```html
```
## 路由参数获取
定义路由路径的时候，可以指定参数。参数需要通过路径进行标识：`/user/:id`就是定义了一个规则，/user开头，然后后面的就是id参数的值。
比如：
```
路由规则： /user/:id
/user/9 => id = 9
/user/8 => id = 8
/user/1 => id = 1
```
然后在跳转后的vue中可以通过`this.$route.params.参数名`获取对应的参数。
比如代码：
```html
```
## js控制路由跳转
上面我们演示的都是通过router-link进行跳转。 其实我们还可以通过js编程的方式进行路由的跳转。
```js
// 当前路由的view跳转到 /home
router.push('home')
// 对象, 跳转到/home
router.push({ path: 'home' })
// 命名的路由
router.push({ name: 'user', params: { userId: 123 }})
// 带查询参数，变成 /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})
```
## 嵌套路由
嵌套路由跟普通路由基本没有什么区别。但是可以让vue开发变的非常灵活。
官网这块写的也非常好，我就直接拷贝了（原谅我吧。）
实际生活中的应用界面，通常由多层嵌套的组件组合而成。同样地，URL 中各段动态路径也按某种结构对应嵌套的各层组件，例如：
```
/user/foo/profile /user/foo/posts
+------------------+ +-----------------+
| User | | User |
| +--------------+ | | +-------------+ |
| | Profile | | +------------> | | Posts | |
| | | | | | | |
| +--------------+ | | +-------------+ |
+------------------+ +-----------------+
借助 vue-router，使用嵌套路由配置，就可以很简单地表达这种关系。
```
```html
'
}
const router = new VueRouter({
routes: [
{ path: '/user/:id', component: User }
]
})
这里的