过滤器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函数进行过滤返回
<p>{{msg | firstCodeUp()}}</p>
- 加入全局过滤器和局部过滤器名称重复，优先调用局部过滤器。
键盘事件
预定义和自定义键盘事件修饰符
keyup事件为键盘抬起事件，一般用于触发键盘按键。Vue中使用如下形式进行绑定键盘事件：
<p v-on:keyup.keyCode="fun"></p>
- 其中，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
<input @keyup.alt.enter="clear">
//click + ctrl 组合
<div @click.ctrl="doSomething">Do something</div>
- 值得注意的是，组合修饰键不仅仅能搭配其他键盘事件，还能和鼠标事件组合使用。
- 目前没有可以自定义的组合修饰键，以官方新增为主。
.exact修饰符
.exact可以让我们更准确地触发事件。
<!-- 没有.exact时，只要按下了规定的按键就会触发 -->
<button @click.ctrl="onClick">A</button>
<!-- 有.exact时，只有按下规定的键才能出发，多按其他键也不会触发 -->
<button @click.ctrl.exact="onCtrlClick">A</button>
<!-- 没有任何系统修饰符被按下的时候才触发 -->
<button @click.exact="onClick">A</button>
自定义指令
我们经常使用一些指令如v-on、v-bind，但是有的指令Vue并没有提供，比如我们希望某个input标签在页面加载后获得焦点，然而Vue并没有v-focus的指令。
而在使用Vue时不建议开发人员直接操作DOM，所以我们需要自己定义一个指令v-focus，来实现input标签自动聚焦的需求。
（ps：h5新增“autofocus ”属性能让input自动获得焦点）
定义全局指令
<!--使用directive()方法定义一个全局指令，指令名为v-focus(自动带v-) -->
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官方地址
