vue过滤器和修饰符
一、过滤器
Vue.js允许你自定义过滤器,可被用作一些常见的文本格式化
过滤器应该被添加在JavaScript表达式的尾部,由**“管道”符**指示
过滤器可以用在两个地方:双花括号插值和 v-bind 表达式
作用:在我们页面显示值之前加一层过滤,展示我们过滤后的值
1、{{变量 | 过滤器名}}
2、{{变量 | 过滤器 | 另一个过滤器}} 可以同时使用多个过滤器,后面过滤器的data就是前面表达式传过来的值
全局定义:
通过Vue提供的filter方法定义:Vue.filter()
1、第一个参数:过滤器的名字
2、第二个参数:回调函数 (data,format) data:数据 formet:传递的参数
//全局过滤器
Vue.filter('setMsg', function (data, format) {
console.log(data);
console.log(format);
/*
好人--**
*/
return data.replace('好人', '**')
})
Vue.filter('setMsg1', function (data, format) {
console.log(data);
console.log(format);
return data.replace('你','*')
})
let vm = new Vue({
el: '#app',
data: {
msg: '你是个大好人'
},
methods: {
},
})
私有定义:
filters这个是实例化Vue的一个参数,和data,methods平级的,里面放的就是我们这个实例的私有过滤器
let vm = new Vue({
el: '#app',
data: {
msg: '你是个大好人'
},
methods: {
},
// 私有定义
filters: {
setMsg(data,formet){
return data.replace('好人', '**')
}
}
})
二、键盘修饰符
1、注册一个监听按键事件
监听所有按键:v-on:keyup
监听指定按键:v-on:keyup.按键码
**注意:**每个键盘按键都会对应一个键盘码,可以参照这个网站[按键码对应网址](https://wenku.baidu.com/view/3f99a76148d7c1c709a14501.html)。
<input type="text" @keyup="keyup" v-model="value">
2、使用按键别名
vue提供的按键别名
.enter
.tab
.delete
(捕获“删除”和“退格”键)
.esc
.space
.up
.down
.left
.right
Vue.config.keyCodes.m = 77
Vue.config.keyCodes.b = 65
let vm = new Vue({
el: '#app',
data: {
value: '',
},
methods: {
keyup(event) {
console.log(event);
console.log(this.value);
}
},
})
三、自定义指令
1、 全局定义
使用这个方法进行全局定义:Vue.directive()
参数:
第一个参数:指令的名字 定义时不加v- 使用时加上v-
第二个参数:对象
- 指令的名字(定义的时候不加v-,使用vue指令的时候加上v-)
- 对象,里面包含三个钩子方法
bind 只调用一次,指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置
inserted 这个元素已经渲染到界面上之后执行
update 当元素有更新的时候执行
这三个方法的参数有哪些
el:指令所绑定的元素,可以用来直接操作DOM 。
binding:一个对象,包含以下属性:
name:指令名,不包括 v- 前缀。
value:指令的绑定值,例如:v-my-directive=“1+ 1” 中,绑定值为 2
oldValue:指令绑定的前一个值,仅在 update 和 componentUpdated钩子中可用。
Vue.directive('color', {
// bind 只调用一次,指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置
// el:当前DOM元素 binding
bind(el, binding) {
console.log(el);
console.log(binding);
el.style.color = binding.value
},
// inserted 这个元素已经渲染到界面上之后执行
inserted(el){
console.log(el);
el.focus()
},
// update当元素有更新的时候执行
update(el){
console.log(el);
}
})
let vm1 = new Vue({
el: '#app',
data: {
color: 'green',
value: ''
},
methods: {
},
})
2、私有定义
实例里有个directives属性,这个属性是个对象
里面放的就是我们指令,这个对象键就是指令的名字,后面的对象就是指令的内容,和全局定义是一样的
简写直接写一个函数,函数名就是指令的名字,其他和全局定义是一样的。
let vm = new Vue({
el: '#app',
data: {
color: 'green',
value: ''
},
methods: {
},
// 私有定义
color:{
inserted(el){
el.focus()
},
bind(el,binding){
el.style.color = binding.value
},
updated (el) {
console.log(el);
}
}
}
})