自定义过滤器/vue指令/键盘修饰符

自定义过滤器

//全局过滤器
Vue.filter('过滤器名称',function(){});

//局部过滤器  与methods同级
filters:{
	filterA(params) {
		return params+'111';
	}
}

可以直接在循环的时候使用过滤器：
 <tr v-for="item in filterA(params)">

//过滤器的使用方式：
1，{{ filterA }}
2,v-bind="data | filterA"

自定义vue全局指令

// 自定义全局指令 v-focus，为绑定的元素自动获取焦点：

    Vue.directive('focus', {
      inserted: function (el) { // inserted 表示被绑定元素插入父节点时调用
        el.focus();
      }
    });

    // 自定义局部指令 v-color 和 v-font-weight，为绑定的元素设置指定的字体颜色 和 字体粗细：写在与methods：{}同级
      directives: {
        color: { // 为元素设置指定的字体颜色
          bind(el, binding) {
            el.style.color = binding.value;
          }
        },
        'font-weight': function (el, binding2) { // 自定义指令的简写形式，等同于定义了 bind 和 update 两个钩子函数
          el.style.fontWeight = binding2.value;
        }
      }

//自定义指令的使用方式：
<input type="text" v-model="searchName" v-focus v-color="'red'" v-font-weight="900">

自定义键盘修饰符

//自定义键盘修饰符
Vue.directive('on').keyCodes.f2 = 113;

Vue.config.keyCodes.f2 = 113;

//使用自定义的键盘修饰符
<input type="text" v-model="name" @keyup.f2="add">