例如商城中商品的价格，既是动态的，而且重复出现的频率非常高，这就意味着，一些信息是重复的，像前面可以加一个“￥”，后面接一个单位“元”：￥10元。想实现只传价格10，其他信息让其自动生成，vue里提供了过滤器filter来实现。
例1：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>过滤器</title> </head> <body> <div id="app"> <div> <input v-model="price"> {{price | currency}} </div> </div> </body> <script src="js/vue.js"></script> <script> Vue.filter(‘currency‘, function(val, unit) { val = val || 0; unit = unit || ‘元‘; return val + unit; }); var app = new Vue({ el: ‘#app‘, data: { price: 10 } }) </script> </html>
说明：
通过管道符|，将前面的数据price传到后面的过滤器currency中，
Vue.filter()，第一个参数是过滤器的名字，第二个参数是一个function，function也有两个参数（可以自定义的），第一个是传进来的值，第二个是过滤器的值，可以写在括号中传过来，就像调用函数时带着参数一样。
例2：单位换算
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>过滤器2</title> </head> <body> <div id="app"> <div> 请输入毫米数：<input type="text" v-model="length"> <br>换算成米：{{length|meter}} </div> </div> </body> <script src="js/vue.js"></script> <script> Vue.filter(‘meter‘, function(val, unit) { val = val || 0; unit = unit || ‘米‘; return (val / 1000).toFixed(2) + unit; //保留两位小数 }); var app = new Vue({ el: ‘#app‘, data: { length: 100 } }) </script> </html>
总结：filter就是解决一些格式的问题，可以提升用户体验的。如果filter内部非常复杂，建议写成计算属性computed，因为computed带有缓存，可重用性强。而filter都是做一些简单的事情。
如果vue自带的指令无法满足需求，就要自定义一个指令，用法就像自定义属性一样，只要在元素上加上这个属性，就具有相应的功能，
用directive来定义一个指令，第一个参数是指令名，第二个参数是回调函数，函数中第一个参数el是元素，就是指令所在的元素会自动传进来，这个元素可以用原生api来调用，也可以用jquery来调用，第二个参数binding是指令传进来的值和其他基本信息
（未完待续）
原文：https://www.cnblogs.com/hzhjxx/p/10763755.html