二、自定义指令
除了核心功能默认内置的指令（v-model和v-show），Vue也允许注册自定义指令。在Vue2.0中，代码复用和抽象的主要形式是组件，然而有的情况下，你仍然需要对普通DOM元素进行底层操作，这时会用到自定义指令。如当页面加载时，输入框将获得焦点，只要你在打开这个页面后还没点击过任何内容，这个输入框就应当还是处于聚焦状态。
// 如果不使用指令，就需要操作DOM元素，这是vue不提倡的
document.getElementById('search').focus();指令的名称：定义时，指令的名称不需要加v-前缀；调用时，必须加v-前缀。
一个对象：包含指令相关的函数，这些函数在特定的阶段执行相关的操作。
注册一个全局自定义指令。
Vue.directive('focus',{
// 当被绑定的元素插入到DOM中时
inserted:function(el){
// 聚焦元素，一个元素只有插入DOM之后，才能获取焦点
el.focus()
}
})注册局部指令，组件中接受一个directives的选项。
directives:{
focus:{
inserted:function(el){
el.focus()
}
}
}然后可以在模板中任何元素上使用新的v-focus属性。
<input v-focus>1、钩子函数
一个指令定义对象可以提供如下几个钩子函数（均为可选）：
bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置，如用于绑定样式，只要通过指令绑定给了元素，不管该元素有没有被插入到页面中去，肯定有了一个内联的样式。
inserted：只调用一次，被绑定元素插入父节点（DOM树中）时调用（仅保证父节点存在，但不一定已被插入文档中）。可绑定和JS行为有关的操作，防止JS行为不生效。
update：可能调用多次，所在组件的VNode更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新。
componentUpdated：指令所在组件的VNode及其子VNode全部更新后调用。
unbind：只调用一次，指令与元素解绑时调用。
2、钩子函数的参数
el：指令所绑定的元素，是一个原生JS对象，可直接操作DOM。
binding：一个对象，包含以下属性：
name：指令名，不包括v-前缀。
value：指令的绑定值，如v-my-directive="1+1"中，绑定值为2。
expression：绑定值的字符串形式，如v-my-directive="1+1"中，表达式为1+1。
oldValue：指令绑定的前一个值，仅在update和componentUpdated钩子中可用，无论值是否改变都可用。
arg：传递指令的参数，如v-my-directive:foo中，参数为foo。
modifiers：一个包含修饰符的对象，如v-my-directive:foo.bar中，修饰符对象为{foo:true,bar:true}。
vnode：Vue编译生成的虚拟节点。
oldVnode：上一个虚拟节点，仅在update和componentUpdated钩子中可用
除了el之外，其它参数都应该是只读的，切勿进行修改。如果需要在钩子之间共享数据，建议通过元素的dataset来进行。
3、函数简写
自定义指令的简写形式，等同于定义了 bind 和 update 两个钩子函数，而不关心其它的钩子。
Vue.directive('color-swatch', function (el, binding) {
el.style.backgroundColor = binding.value
})五、过滤器
Vue.js允许自定义过滤器，可被用于一些常见的文本格式化。过滤器可以用在两个地方：双花括号插值和v-bind表达式（后者从 2.1.0+开始支持）。过滤器应该被添加在JavaScript表达式的尾部，由“管道”符号指示。过滤器调用时的格式：
<!-- 在双花括号中 -->
{{ message | 过滤器的名称 }}
<!-- 在`v-bind`中 -->
<div v-bind:id="rawId | formatId"></div>过滤器的定义语法：
（1）在一个组件的选项中定义本地的过滤器
filters:{
过滤器名称:function(data){
return data+'123';
}
}（2）在创建Vue实例之前定义全局过滤器，所有vm实例共享
Vue.filter('过滤器名称',function(data){
return data+'123';
})
var vm=new Vue({
// ...
});
{{ message | filterA | filterB }} 过滤器可以串联，过滤器函数总接收表达式的值 (之前的操作链的结果) 作为第一个参数。
{{ message | filterA('data', arg1, arg2) }} 过滤器可以有多个参数，第一个参数是过滤器管道符前面传来的数据。
<body>
<div id="app">
<p>{{msg | filterA('无敌','可爱') | filterB}}</p>
</div>
<script>
Vue.filter('filterA',function(msg,arg1,arg2){
return msg.replace(/无情/g,arg1+arg2);
});
Vue.filter('filterB',function(msg){
return '===='+msg+'====';
})
var vm=new Vue({
el:'#app',
data:{
msg:'你无情，你残酷! 那你就不无情，不残酷!? 我哪里无情，哪里残酷!?'
},
filters:{
filterA:function(msg,arg1,arg2){
return msg.replace(/残酷/g,arg1+arg2);
}
}
});
</script>
</body>当有局部和全局两个名称相同的过滤器时，以就近原则进行调用，即局部过滤器优先于全局过滤器。