Vue中可以自定义过滤文本插值的过滤器。目前有两个地方可以使用：
插值文本{{ var }}中使用。
在v-bind中使用。（ 2.1.0+ ）
用法：使用管道连接符 | 将需要过滤的文本变量与过滤函数连接起来即可。
1、定义局部过滤器在Vue实例中定义局部过滤器类似定义普通函数一样，使用关键字filters来定义，如定义一个大写首字母的过滤函数upperCaseFirst：
Var app = new Vue({ el: '#app', filters: { upperCaseFirst: function(value){ if(!value) return ''; value = value.toString(); return value.charAt(0).tpUpperCase() + value.slice(1); } } });
参数
过滤器的第一个参数默认为需要过滤的文本变量。
可以在使用的使用传入其他参数（目前只能传入字符串，不能传入变量），如：
{{ message | upperCaseFirst('s1','s2') }}但是需要注意对传入的参数进行必要性验证，因为不止此处会调用该过滤函数。
返回值
过滤函数的返回值将作为渲染结果或者下一个过滤器的第一个参数。
2、定义全局过滤器类似。
Vue.filter('upperCaseFirst', function(value){ if(!value) return ''; value = value.toString(); return value.charAt(0).tpUpperCase() + value.slice(1); }) 二、事件处理 监听事件 事件处理方法 内联处理器中的方法 事件修饰符 按键修饰符 自动匹配按键修饰符 系统修饰键 .exact 修饰符 鼠标按钮修饰符 为什么在 HTML 中监听事件? 1、使用v-on指令监听事件v-on指令可以绑定原生事件，也可以在组件中绑定自定义事件。
使用方法：
<button @click="say">Click me</button>也可以使用内联语句：
<button @click="say(message)">Click me</button> <button @click="say('okk')">Okk</button> <button @click="say('okk',$event)">Okk</button>还可以使用对象来绑定多个事件：
<button v-on="{ mousedown: doThis, mouseup: doThat }"></button> 2、事件修饰符在定义事件处理函数时，我们常常使用到下面这些操作：
event.preventDefault(); event.stopPropagation();所以为了方便且尽量不去处理事件细节，Vue定义了一些事件修饰符来满足一些事件处理需求：
.stop：阻止事件传播。
.prevent：取消浏览器默认事件动作。
.capture：启用时间捕获模式。即元素自身触发的事件先在此处理，然后才交由内部元素进行处理。
.self：绑定事件的元素本身才能触发，即内部元素不能触发。
.once：（2.1.4 ）事件只触发一次。
.passive：不让用户调用preventDefault()，所以不要和.prevent一起使用。
事件监听的原始参数定义规则请参考：
3、按键修饰符某些事件如keydown | keyup与键盘直接相关，我们常常判断按键的类型或按键码（keyCode）再进行事件处理。
Vue提供的按键修饰符就是用来判断按键是否符合设置的修饰符，比如：
<input type="text" @keyup.13>这里的keyCode就为13，当按键码为13时才会触发该事件。
为了方便使用，Vue预设了一些常用的按键别名代替按键码，
.enter
.tab
.delete (捕获“删除”和“退格”键)
.esc
.space
.up
.down
.left
.right
当然，我们也可以通过全局 config.keyCodes 对象自定义按键修饰符别名：
Vue.config.keyCodes.f1 = 112 4、系统修饰键可以用如下修饰符来实现仅在按下相应按键时才触发鼠标或键盘事件的监听器。如：
<!-- Ctrl + Click --> <div @click.ctrl="doSomething">Do something</div>
.exact修饰符（2.5.0+）
exact是”精确的“的意思，使用.exact 修饰符允许你控制由精确的系统修饰符组合触发的事件。
<!-- 即使 Alt 或 Shift 被一同按下时也会触发 --> <button @click.ctrl="onClick">A</button> <!-- 有且只有 Ctrl 被按下的时候才触发 --> <button @click.ctrl.exact="onCtrlClick">A</button> <!-- 没有任何系统修饰符被按下的时候才触发 --> <button @click.exact="onClick">A</button>
鼠标按钮修饰符（2.2.0+）
left
middle
right
三、自定义指令 1、简介Vue提供的指令都比较方便，Vue2.0 开始，Vue支持自定义指令。类似自定义过滤器（Filter）一样，指令（directive）也分为全局指令和局部指令。
定义全局指令
比如我们定义一个在元素插入父节点后聚焦元素的指令：
Vue.directive('focus', { inserted: function(el){ el.focus(); } })
定义局部指令
类似。
var app = new Vue({ el: "#app", data: { message: 'Json', } directives: { 'focus':{ 'inserted': function(el){ el.focus(); } } } }); 2、钩子函数