自定义过滤器
//全局过滤器
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">