Vue(2)

过滤器Filter

Vue可以自定义过滤器，可以在{{message}}和v-bind两处使用。

Filter的定义

全局过滤器

//过滤器的函数名为firstCodeUp，返回值将会替换过滤前的值，但不会改变该变量。
Vue.filter("firstCodeUp",function(target){
    return target.charAt(0).toUpperCase() + target.slice(1);
});

局部过滤器（在组件中定义）

//使用filters键，就行使用methods一样
filters: {
    firstCodeUp: function(target){
        return target.charAt(0).toLowerCase() + target.slice(1);
    }
}

注：

过滤器的第一个参数默认为被过滤的变量。
在创建 Vue 实例之前定义全局过滤器，否则该实例无法调用。

Filter的使用

使用管道符号|进行过滤。

//对msg使用firstCode函数进行过滤返回
{{msg | firstCodeUp()}}

加入全局过滤器和局部过滤器名称重复，优先调用局部过滤器。

键盘事件

预定义和自定义键盘事件修饰符

keyup事件为键盘抬起事件，一般用于触发键盘按键。Vue中使用如下形式进行绑定键盘事件：

其中，keyCode是按键对应的keyCode值，比如Entry的keyCode值为13，那么我们使用修饰符.13就能绑定回车键事件。
但是键盘的keyCode值不便于记忆，所以Vue预定义了一些修饰符来指代:

如果你需要使用自定义修饰符来实现按键事件，需要进行全局定义，可以使用Vue.config.keyCodes.name = keycode来全局定义一个按键修饰符。比如F1的keyCode为112，那我们可以这样来定义：

Vue.keyCodes.f1 = 112;//这样我们就能使用.f1这个修饰符了。

组合键的使用

比如想要使用ctrl + c这样的组合键，那我们需要使用Vue定义好的修饰键：

意思是我们在按下以上键的时候才能触发另外的建，以此达到组合键效果。
比如：

//当按下alt + enter时触发clear

//click + ctrl 组合
Do something

值得注意的是，组合修饰键不仅仅能搭配其他键盘事件，还能和鼠标事件组合使用。
目前没有可以自定义的组合修饰键，以官方新增为主。

.exact修饰符

.exact可以让我们更准确地触发事件。

自定义指令

我们经常使用一些指令如v-on、v-bind，但是有的指令Vue并没有提供，比如我们希望某个input标签在页面加载后获得焦点，然而Vue并没有v-focus的指令。
而在使用Vue时不建议开发人员直接操作DOM，所以我们需要自己定义一个指令v-focus，来实现input标签自动聚焦的需求。
（ps：h5新增“autofocus ”属性能让input自动获得焦点）

定义全局指令


Vue.directive("focus",{
    inserted: function(el){
        el.focus();
    }
})

钩子函数

在上面的定义中我们发现，第一个参数为指令名，而第二个参数为一个对象，而这个对象中的函数就是指令的钩子函数，Vue的自定义指令提供了以下几种钩子函数：

其中，bind表示元素刚绑定到元素上的时候，这个时候元素还没有被渲染到界面上，还在BOM树内存中；inserted也不一定被插入到文档中。

Vue实例的生命周期 | 生命函数事件 | 钩子函数

上面说的生命周期、生命函数事件和钩子函数是一个东西，就是在Vue实例在创建到使用再到销毁这一生命周期中触法的函数/事件。
一般分为三个就阶段：

Vue实例创建阶段
- beforeCreate:创建前执行
- ceated:创建后执行
Vue实例装载阶段
- beforeMount:数据渲染到页面前
- mounted:数据渲染到页面后
Vue实例使用阶段
- beforeUpdate:数据发生变化后执行
- updated:数据更新到页面后执行
Vue实例销毁阶段
具体可移步官网：Vue实例的生命周期

在Vue中使用vue-resource或axios插件发送ajax请求

Vue中不建议开发人员直接操作Dom元素，希望开发者将注意力集中于义务逻辑而非代码逻辑，我们习惯用jquery发送ajax请求，同样在Vue中也是不推荐的。Vue本身没有提供相应的发送ajax的方法，但有另外的第三方插件以供使用，比如vue-resource，axios等。（两者使用差别很小，目前vue-reource已不再更新，所以官方推荐使用axios）

vue-resource

安装及说明请移步：vue-resource git官方地址