生命周期函数
每一个vue对象都有一个从 创建 -> 挂载 -> 更新 -> 移除 -> 销毁 的过程，这是vue对象的一个完整的生命周期函数，而生命周期函数，就是在这些执行过程中绑定的钩子函数，当执行到特定的生命周期时，将会触发对应的钩子函数。通过钩子函数，我们就可以对这个vue实例进行自定义的配置，从而方便的实现各种功能。
几个常用的周期函数
var vm = Vue({
el:
data:
method:{
created:function(){
// 生命周期钩子函数中的 this 指向调用它的 Vue 实例
}
// 创建对象时，
beforeCreate(){}, // 实例创建之前
created(){} // 创建实例之后，此时内部 data，method等基本重要数据均已经创建，但此时只是单个vue对象。
beforeMount(){} // 将实例挂在到页面对象的dom 树前执行该函数
mounted(){} // 成功挂载实例后执行
// 当data更新 和 销毁节点的钩子函数
beforeUpdate(){} // data被更新时最先触发该函数，此时data 中的内容已经改变，如果在该函数中获取页面中的对象，对象上的值还没有刷新。
updated： // data 和 页面上的内容均被更新，节点更新后执行。
beforeDestory: // 调用 Vue.$destory()方法进行销毁时，在这个函数中这个Vue对象仍然可用
destoryed: // 对象被销毁后调用该函数
// 其他
active： // 被 keep-alive 缓存的组件激活时调用。
deactiv: // 被 keep-alive 缓存的组件停用时调用。
errorCaptured:(err: Error, vm: Component, info: string)
// 当捕获一个来自子孙组件的错误时调用，三个参数分别为 错误对象、发生错误的组件实例，错误描述字符串。
// 可以返回 false 以阻止该错误继续向上传播。
}
})
所有的生命周期钩子自动绑定
this上下文到实例中，因此你可以使用this 上的绑定的属性和方法。而不能使用箭头函数来定义一个生命周期方法 (例如created: () => this.fetchTodos())。这是因为箭头函数绑定了父的上下文，此时的this并不是 Vue 实例，使用this.fetchTodos的行为是未定义的。
官网提供的生命周期图示：
watch监听
可以在watch中观察 Vue 实例上的一个表达式或者一个函数计算结果的变化，一旦该变量值发生改变，便执行绑定的回调函数，并为回调函数注入两个参数，第一个值是被watch 变量变化后的新值，第二个为变量变化前的值。
var vm = new Vue({ el:"", methods:{}, data: { msg: "", msg2:""}, watch:{ "msg":function(newVal, oldVal){ }, // 当data中msg 发生改变时，触发执行该函数。 "msg2":function(newVal, oldVal){ }, "$route.path": function(newVal, oldVal){ } // 当路由变量发生改变时候，触发该函数 } })
Vue 实例会在实例化时调用 $watch()方法，遍历 watch 对象中指定的每一个 property，对他们进行watch，一旦发生改变将会触发回调，如果被watch 的变量是一个引用类型，例如对象或者数组，那个这个引用类型内部的数据更改并不会触发watch 回调，因为watch 变量的值保存的是数据的引用，引用类型内部进行改变时候，引用没有发生改变，所以watch 不会执行回调，只有变量的值被替换，才会执行触发watch。
vm.$watch("mag", function(){})，定义这个回调函数时，不能使用箭头函数，理由是箭头函数绑定了父级作用域的上下文，所以函数内部 this 将不会按照期望指向 Vue 实例
计算属性computed
vue示例中，还可以定义一个计算属性的key， computed 其值是一个对象，对象中定义key是变量名的字符串，值是一个函数，这个变量的值就是这个函数的返回值。计算的属性的值是由这个函数的计算结果得到的。
- 在计算属性对应的函数内部，如果使用了vue示例上的数据，那么这些数据一旦发生了变化，vue就会立即执行该函数来重新计算这个计算属性的值。
- 每次计算完结果，这个结果将会被缓存起来，方便下次直接使用，而不是重新计算。只要计算属性对应的函数中使用的数据没有发生过任何变化，就不会重新对计算属性求值。所以我们在页面中多次引用一个计算属性时候，只要多次引用之间函数内部使用的数据没有改变，就只会计算该计算属性一次，其他引用直接使用第一次计算的结果即可。
var vm = new Vue({ el:"", methods:{}, data: { msg: "", msg2:""}, computed:{ "variable": function(){ // 使用时直接指定 variable变量即可，当msg或者msg2发生改变，都会自动执行这个函数 return this.msg + this.msg2 // return 值就是计算属性的值 } } })
网络请求
安装及导入
发送请求可以使用 Vue提供的 vue-resource 插件 或者 axios 包，vue-resource 是官网提供插件，这里介绍vue-resource，axios 可以看官网使用说明，文档也是通俗易懂。
Vue-resource 的项目地址 https://github.com/pagekit/vue-resource/blob/develop/docs/http.md。下载解压到本地即可使用，解压后的文件中包含下面几个文件。
vue-resource.common.js vue-resource.esm.js vue-resource.js // 页面导入这个文件即可 vue-resource.min.js // 这是压缩后的文件，功能同上
在导入vue-resource时，必须保证vue 已经被加载，因为 vue-resource 实在 Vue 对象上绑定一个http的属性，所以需要先导入 vue，保证该命名空间中有 Vue 这个对象，才可以绑定值，否则导入操作将会直接报错。
<script src="./../lib/vue.js"></script> 导入vue <script src="./../lib/vue-resource.js"></script> 导入 vue-resource
发送请求
安装这个包之后，所有可操作的属性和方法都被注册到了 Vue 对象的上的 Vue.$http（或者.Vue.http）属性中，可以直接输出这个Vue.$http 查看相关的属性。
<script src="./../lib/vue.js"></script> 导入vue <script src="./../lib/vue-resource.js"></script> 导入 vue-resource <script> console.log(Vue.http) 输出这个对象可以 看到这个对象中许多属性。 </script>
这个http属性中包含需要许多的属性和方法，属性包含了一些配置的信息等，必要时候我们可以直接进行配置。提供的方法则是用来我们发送http 请求的接口，需要时直接调用即可。这些方法都是异步的。
例如定义一个发送get 请求方法getInfo，当方法被调用时执行发送数据。
var vm = new Vue({ el:"#app", data:{}, methods:{ getInfo: function(){ this.$http.get('http://www.shopping.com/path/to:', [config]).then( successCallback(response){ // 成功的返回数据，response是返回的结果对象，，可以从response.body中获取返回的数据 response.status; // 返回信息的状态码 response.statusText; response.headers.get('Expires'); // 头 this.someData = response.body; // 返回的数据信息 }, errorCallback(response){} // 失败后调用该函数 ); } } })
这个些方法都是基于Promise实现异步的，使用.then方法可以指定两个请求的回调函数，一个用来处理成功的结果，一个用来处理错误的信息。是否请求成功是根据返回的状态码决定的，默认的成功状态码是 200 - 299
发送请求时可以指定参数来配置本次http请求的头信息，查询字符串，数据格式等等信息，下面会详细讲解这些参数。
请求方法
get(url, [config])head(url, [config])delete(url, [config])jsonp(url, [config])post(url, [body], [config])put(url, [body], [config])patch(url, [body], [config])
调用上述的方法即可发送相应请求，然后通过 .then() 指定处理回调的函数即可。
// 全局中使用时。Vue是全局对象 Vue.http.get('/someUrl', [config]).then(successCallback, errorCallback); Vue.http.post('/someUrl', [body], [config]).then(successCallback, errorCallback); // 局部使用时，也就是在某个Vue对象实例内部定义的，this是Vue对象的实例 this.$http.get('/someUrl', [config]).then(successCallback, errorCallback); this.$http.post('/someUrl', [body], [config]).then(successCallback, errorCallback);
config参数说明
config 主要是对本次http 请求再次进行配置，通过关系request 请求对象上的属性来实现对请求的配置，常用的配置参数如下：
| 参数 |
类型 |
描述 |
| url | string |
请求的目的 url |
| body | Object, FormData, string |
发送的 body 中的数据 |
| headers | Object |
对象中设置各个header |
| params | Object |
url中查询字符串的值 |
| method | string |
HTTP method （GET, POST, ...) |
| responseType | string |
返回的response.body数据的类型 (e.g. text, blob, json, ...) |
| timeout | number |
请求超时时间，单位毫秒(0 表示不会超时） |
| credentials | boolean |
Indicates whether or not cross-site Access-Control requests should be made using credentials |
| emulateHTTP | boolean |
Send PUT, PATCH and DELETE requests with a HTTP POST and set the X-HTTP-Method-Override header |
| emulateJSON | boolean |
使用 作为请求的content-type |
| before | function(request) |
发送请求前修改请求对象的钩子函数，参数为request对象 |
| uploadProgress | function(event) |
处理上传事件流程的回调函数 |
| downloadProgress | function(event) |
处理下载事件流程的回调函数 |
response对象中封装的属性
与发送请求类似，返回的结果会被封装为一个response对象，这个对象有后端发送过来的数据，请求头，请求的状态等信息，直接通过 response.attribute 的方式即可获取对应的属性值。
| Property | Type | Description |
| url | string |
数据返回时原始的url |
| body | Object, Blob, string |
返回的数据 |
| headers | Header |
Response 头信息对象 |
| ok | boolean |
HTTP 状态码描述 200 - 299为ok |
| status | number |
状态码 |
| statusText | string |
状态码描述 |
| Method | Type | Description |
| text() | Promise |
将body 中的数据按字符串形式输出 |
| json() | Promise |
将body中的数据解析为json对象 |
| blob() | Promise |
将body中的数据输出为一个二进制的blob对象，例如图片数据等 |
过度和动画
vue中实现的动画只是组件在更新时，也就是组件开始展示或组件消失时实现的逐渐过度的效果，这样不会因为页面突然的跳转而让用户感觉很突兀，而是使用简单的转场动画，实现页面或者组件切换时候的动态变换的效果。
单元素或组件的过度
如果一个元素被渲染到页面或者从页面中消失时需要实现动画的效果，那么第一步是使用 vue提供的transition 标签进行包裹，在transition 标签中标签或者组件，会做以下处理：
- 自动嗅探目标元素是否应用了 CSS 过渡或动画，如果是，在恰当的时机添加/删除 CSS 类名，在这些类中定义了不同的样式和操作，从而实现动画的效果。
- 如果过渡组件提供了 JavaScript 钩子函数，那么将在设定的时机调用这些钩子函数，在钩子函数内部，对元素的样式进行修改，也可以实现动画的效果。
所以vue给我们提供了上面两种方式来实现动画。
元素的切换主要有以下几种情况：
- v-if 进行条件渲染
- v-show 条件渲染
- 组件切换
例如：
<transition name="fade"> <p v-if="show">hello</p> </transition>
根据show 的状态，这个P标签会进行切换，那么使用 <transiton> 作为他的父标签。
过度的类
这是使用第一方式，vue 在指定的时机为 标签添加或者移除class，所以我们在这些class 中定义开始样式，中间的样式，结束时的样式即可实现动画，vue提供了指定的6个类名，分别对应了在6个不同的时机的样式，以此进行切换。
v-enter：进入时的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。v-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。v-enter-to：(2.1.8 版及以上) 定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时v-enter被移除)，在过渡/动画完成之后移除。v-leave：定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。v-leave-active：定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。v-leave-to：(2.1.8 版及以上) 定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时v-leave被删除)，在过渡/动画完成之后移除。
有了这6个类，我们只需要在这里面添加对应的样式即可。向下面这样
<style> .my-enter, .my-leave-to {} ; // 进场之前状态和出场之后的最状态，这两个状态的样式应该是相同的，所以这里统一设置。 .my-enter-active, .my-leave-active {}; // 进场之后，出场之前状态也是相同的，也统一设置 </style> // 没有指定 name, style中使用 v-前缀，制定了name, 使用name指定的前缀即可，my-enter // duration 指定过度时间 <transition name="my" :duration="{ enter: 500, leave: 800 }"> <h3> 动画操作的内容 </h3> </transition>
钩子函数
可以在 <transiton> 的 attribute 中声明 JavaScript 钩子函数，然后在vue的methods中定义这些函数
<transition v-on:before-enter="beforeEnter" v-on:enter="enter" v-on:after-enter="afterEnter" v-on:enter-cancelled="enterCancelled" v-on:before-leave="beforeLeave" v-on:leave="leave" v-on:after-leave="afterLeave" v-on:leave-cancelled="leaveCancelled" > <!-- ... --> </transition> <script> var vm = Vue({ methods:{ // 进入时的四个钩子函数 beforeEnter(el, done){}, // el 是当前执行动画过度的标签对象，done 是回调函数，可选 enter(el, done){}, afterEnter(el, done){}, enterCancelled(){} } }) </script>
当只用 钩子函数过渡的时候，在 enter 和 leave 中必须使用 done 进行回调。否则，它们将被同步调用，过渡会立即完成。
如果使用钩子函数过度，为了避免css 类的过度影响，可以在transition标签中添加v-bind:css="false"，Vue 会跳过 CSS 的检测