vue过滤器和修饰符

vue过滤器和修饰符

1、过滤器

Vue.js允许你自定义过滤器，过滤器可以用在两个地方

(1)mustache插值 和 v-bind表达式  添加在JavaScript表达式的尾部 由“管道”符指示。

作用：在我们页面显示值之前加一层过滤，展示我们过滤后的值。

注意事项
过滤器可以用在两个地方：双花括号插值和v-bind表达式

使用语法
{{变量|过滤器名}}
{{变量|过滤器|另一个过滤器}}可以同时使用多个过滤器，后面过滤器的
data就是前面表达式传过来的值

全局定义： 通过Vue提供的filter 方法定义：Vue.filter()  

参数：过滤器的名字或过滤器执行函数

Vue.filter('dateFormat',function(data,format){
//日期格式化
console.log(format);
//转成date对象
let time=newDate(data);
//字符串有个方法padStart,通过这个方法我们就可以把位数补到两位
let y=time.getFullYear();
//这里需要注意的地方，月份是从0开始排序的
let m=(time.getMonth()+1).toString().padStart(2,'0');
//getDay应该是获取了星期几
//getDate获取日期
let d=time.getDate().toString().padStart(2,'0');
//console.log(y);
//console.log(m);
//console.log(d);
if(format=='yyyy-mm-dd'){
return`${y}-${m}-${d}`;
}else{
//获取时分秒
let h=time.getHours().toString().padStart(2,'0');;
let min=time.getMinutes().toString().padStart(2,'0');;
let secondes=time.getSeconds().toString().padStart(2,'0');;
return`${y}-${m}-${d}${h}:${min}:${secondes}`;
}
})

私有定义

filters 是实例化Vue的一个参数，和data,methods平级的

newVue({
el:'#app',
filters:{
dateFormat(data,format){
...
}
}
});

注意事项
1.函数的第一个参数都是data，也就是我们要过滤的值。
2.过滤器可以自定义一些参数。
3.过滤器函数的返回值就是最终显示的值

键盘修饰符

1.监听所有按键：v-on:keyup
2.监听指定按键：v-on:keyup.按键码   每个键盘按键都会对应一个键盘码

vue提供的按键别名
.enter
.tab
.delete(捕获“删除”和“退格”键)
.esc
.space
.up
.down
.left
.right

使用 监听enter按键；v-on:keyup.ente

自定义按键别名

Vue.config.keyCodes.f1=112

自定义指令

全局定义

使用这个方法进行全局定义：Vue.directive()
参数：
1.指令的名字(定义的时候不加v-,使用vue指令的时候加上v-)
2.对象，里面包含三个钩子方法
bind只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性
的初始化设置
inserted这个元素已经渲染到界面上之后执行
update当元素有更新的时候执行
3.这三个方法的参数有哪些
el：指令所绑定的元素，可以用来直接操作DOM。
binding：一个对象，包含以下属性：
name：指令名，不包括v-前缀。
value：指令的绑定值，例如：v-my-directive="1+1"中，绑定值为2。
oldValue：指令绑定的前一个值，仅在update和componentUpdated钩子中可用。
无论值是否改变都可用

//html内容
<divv-color="'#000'+'333'">你好</div>
//js内容
Vue.directive('color',{
//这个三个方法第一个参数都是el，原生的dom对象
//vue检测到指令绑定到界面元素的时候会执行这个方法
bind(el,bind){
//这些样式就相当于我们这个元素属性
el.style.color=bind.value;
},
//当我们这个元素插入到dom树的时候，会调用这个方法
//在执行这个方法的时候界面上的元素已经显示出来
inserted(el){
},
//当组件进行更新的时候会调用这个方法
update(el){
}
})

私有定义

Vue实例中有directives属性  是个对象里面放的就是我们指令，这个对象键就是指令的名字，后面的对象就是指令的内容，和全局定义是一样的简写直接写一个函数，函数名就是指令的名字，其他和全局定义是一样的。

varvm=newVue({
el:'#app',
directives:{
color(el,bind){
el.style.color='blue';
},
focus:{
inserted(el){
el.focus();
},
bind(el){
},
updated(){
}
}
}
})