vue.js基础（二）

1.过滤器
Vue.js 的过滤器本质上是一个函数，这个函数会接收一个值，将其处理并返回。过滤器在指令中由一个管道
符(|) 标记，并可以跟随一个或多个参数：

<element directive="expression | filterId [args...]"></element>

例子：
过滤器必须放置在一个指令的值的最后：

<p v-text="msg | capitalize"></p>

你也可以用在 mustache 风格的绑定的内部：

<p>{{msg| uppercase}}</p>

可以串联多个过滤器：

<p>{{msg| lowercase | reverse}}</p>

参数
一些过滤器是可以接受参数的。参数用空格分隔开：

<span>{{order | pluralize 'st' 'nd' 'rd' 'th'}}</span>
<input v-on="keyup: submitForm | key 'enter'">

注意：纯字符串参数需要用引号包裹。无引号的参数会作为表达式在当前数据作用域内动态计算。
2.自定义指令
（1）Vue.js 允许你注册自定义指令，可以使用 Vue.directive(id, definition) 的方法传入指令 id 和定义对象来注册一个全局自定义指令。

<div v-global-directive></div>

var comp = Vue.extend({
　 directives : {
　　 'localDirective' : {}　
　 }
});

该指令就只能在当前组件内通过v-local-directive 的方式调用，而无法被其他组件调用。
（2）指令的定义对象
定义对象主要包含三个钩子函数（都是可选函数）：
• bind ： 仅调用一次，当指令第一次绑定元素的时候。
• update ： 第一次是紧跟在 bind 之后调用，获得的参数是绑定的初始值；以后每当绑定的值发生变化就会
被调用，获得新值与旧值两个参数。
• unbind ：仅调用一次，当指令解绑元素的时候。
注册一个局部的自定义指令。
（3）指令实例属性
在指令的钩子函数内，可以通过this 来调用指令实例。
el ：指令绑定的元素。
vm ：该指令的上下文ViewModel，可以为new Vue() 的实例，也可以为组件实例。
expression ：指令的表达式，不包括参数和过滤器。
arg ：指令的参数。
name ：指令的名字，不包括v- 前缀。
modifiers ：一个对象，包含指令的修饰符。
descriptor ：一个对象，包含指令的解析结果。

3.生命周期
Vue.js 实例在创建时有一系列的初始化步骤：创建、编译、插入、移除，最终销毁。每一个时间点，实例都会触发相应的事件，而在创建实例或者定义组件时，可以传入生命周期钩子函数来响应
这些事件。
生命周期图

它可以总共分为8个阶段：
(1)beforeCreate在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
(2)created在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (data observer)，property 和方法的运算，watch/event 事件回调。挂载阶段还没开始
(3)beforeMount在挂载开始之前被调用：相关的 render 函数首次被调用。
该钩子在服务器端渲染期间不被调用。
(4)mounted实例被挂载后调用,如果根实例挂载到了一个文档内的元素上，当 mounted 被调用时 vm.$el 也在文档内。
注意 mounted 不会保证所有的子组件也都一起被挂载。
该钩子在服务器端渲染期间不被调用。

//如果你希望等到整个视图都渲染完毕，可以在 mounted 内部使用 ：vm.$nextTick
mounted: function () {
  this.$nextTick(function () {
    // Code that will run only after the
    // entire view has been rendered
  })
}

(5)beforeUpdate数据更新时调用，发生在虚拟 DOM 打补丁之前。这里适合在更新之前访问现有的 DOM，比如手动移除已添加的事件监听器。
该钩子在服务器端渲染期间不被调用，因为只有初次渲染会在服务端进行。
(6)updated由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。
当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下，你应该避免在此期间更改状态。如果要相应状态改变，通常最好使用计算属性或 watcher 取而代之。
注意 updated 不会保证所有的子组件也都一起被重绘
该钩子在服务器端渲染期间不被调用。
(7)beforeDestroy实例销毁之前调用。在这一步，实例仍然完全可用。
该钩子在服务器端渲染期间不被调用。
(8)destroyed实例销毁后调用。该钩子被调用后，对应 Vue 实例的所有指令都被解绑，所有的事件监听器被移除，所有的子实例也都被销毁。
该钩子在服务器端渲染期间不被调用。
4.插件Vue-resouce（异步请求进行了封装）
（1）官网下载
（2）CDN 路径引入

<script src="https://cdn.jsdelivr.net/vue.resource/1.0.2/vue-resource.
min.js"></script>

（3）命令安装

npm install vue-resource 

使用方式

this.http.get(…).then()

then()接受一个response 的参数，具体的属性和方法如下。
url: response 的原始url。
body ：response 的body 数据，可以为Object，Blob，或者String 类型。
headers ：response 的Headers 对象。
ok: 布尔值，当HTTP 状态码在200 和299 之间时为true。
status: response 的HTTP 状态码。
statusText: response 的HTTP 状态描述。
this.$http 支持Promise 模式，使用.then 方法处理回调函数，接受成功/ 失败两个回调
函数，一般会在回调函数中再调用transition.next() 方法，给组件的data 对象赋值，并执行组件的下一步骤。

this.$http 还可以直接调用api 方法
get(url, [options])
head(url, [options])
delete(url, [options])
jsonp(url, [options])
post(url, [body], [options])
put(url, [body], [options])
patch(url, [body], [options])