Vue.js学习笔记：过滤器、自定义按键修饰符、指令

允许你自定义过滤器，可被用作一些常见的文本格式化。过滤器可以用在两个地方：mustache 插值和 v-bind 表达式。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符指示；

私有过滤器

1、HTML元素：

<td>{{item.ctime |dataFormat('yyyy-mm-dd')}}</td>

2、私有 filters 定义方式：

filters:{dataFormat(input, pattern =""){var dt =newDate(input);var y = dt.getFullYear();var m =(dt.getMonth()+1).toString().padStart(2,'0');var d = dt.getDate().toString().padStart(2,'0');if(pattern.toLowerCase()==='yyyy-mm-dd'){return`${y}-${m}-${d}`;}else{var hh = dt.getHours().toString().padStart(2,'0');var mm = dt.getMinutes().toString().padStart(2,'0');var ss = dt.getSeconds().toString().padStart(2,'0');return`${y}-${m}-${d}${hh}:${mm}:${ss}`;}}}

使用ES6中的字符串新方法 (maxLength, fillString=’’) 或 (maxLength, fillString=’’)来填充字符串；

全局过滤器

Vue.filter('dataFormat',function(input, pattern =''){var dt =newDate(input);var y = dt.getFullYear();var m =(dt.getMonth()+1).toString().padStart(2,'0');var d = dt.getDate().toString().padStart(2,'0');if(pattern.toLowerCase()==='yyyy-mm-dd'){return`${y}-${m}-${d}`;}else{var hh = dt.getHours().toString().padStart(2,'0');var mm = dt.getMinutes().toString().padStart(2,'0');var ss = dt.getSeconds().toString().padStart(2,'0');return`${y}-${m}-${d}${hh}:${mm}:${ss}`;}});

注意：当有局部和全局两个名称相同的过滤器时候，会以就近原则进行调用，即：局部过滤器优先于全局过滤器被调用！

自定义键盘修饰符

1、通过.名称 = 按键值来自定义案件修饰符的别名：

Vue.config.keyCodes.f2 =113;

2、使用自定义的按键修饰符：

<input type="text" v-model="name" @keyup.f2="add">

自定义指令

https://cn.vuejs.org/v2/guide/custom-directive.html

1、自定义全局和局部的 自定义指令：

 Vue.directive('focus',{
   inserted:function(el){
     el.focus();}});
   directives:{
     color:{bind(el, binding){
         el.style.color = binding.value;}},'font-weight':function(el, binding2){
       el.style.fontWeight = binding2.value;}}

2、自定义指令的使用方式：

<input type="text" v-model="searchName" v-focus v-color="'red'" v-font-weight="900">