vue过滤器和修饰符
1、vue的过滤器
概念:Vue.js 允许你自定义过滤器,可被用作一些常见的文本格式化。
过滤器可以用在两个地方:双花括号插值和v-bind表达式。
过滤器应该被添加在JavaScript表达式的尾部,由“管道”符指示。
作用:在我们页面显示值之前加一层过滤,展示我们过滤后的值
使用语法:
{{变量 | 过滤器名}}(竖线叫做管道符)
{{变量 | 过滤器 | 另一个过滤器}}
可以同时使用多个过滤器,后面过滤器的data就是前面表达式传过来的值
(1)、全局定义:
通过Vue提供的filter方法定义:Vue.filter()
参数1 名字 参数二 函数(数据,格式(传递参数))注意事项:
1.函数的第一个参数都是data,也就是我们要过滤的值。
2.过滤器可以自定义一些参数。
3.过滤器函数的返回值就是最终显示的值
<div id='app'>
<div>{{msg}}</div>
<div>{{msg | getStar()}}</div>
<!-- 你是个** -->
<div>{{msg | getStar() |getStar2() }}</div>
<!-- *是个** -->
</div>
<script>
// 参数1 名字 参数二 函数(数据,格式(传递参数))
Vue.filter('getStar',function(data,format){
console.log(data);
console.log(format);
// 坏人 **
return data.replace("坏人","**")
})
// 参数1 名字 参数二 函数(数据,格式(传递参数))
Vue.filter('getStar2',function(data,format){
console.log(data);
console.log(format);
// 坏人 **
return data.replace("你","*")
})
const vm = new Vue({
el: '#app',
data: {
msg:"你是个坏人"
},
methods: {
},
})
</script>
(2)、私有定义:
filters这个是实例化Vue的一个参数,和data,methods平级的,里面放的就是我们这个实例的私有过滤器。
<div> {{num}}</div>
<!-- 66 -->
<div> {{num | addn(4)}}</div>
<!-- 70 -->
const vm = new Vue({
el: '#app',
data: {
num:66
},
methods: {
},
// 私有过滤器
filters:{
addn(data,n){
return data + n
},
}
})
2、按键修饰符
监听所有按键:v-on:keyup
监听指定按键:v-on:keyup.按键码
可以自定义按键别名
如:Vue.config.keyCodes.f1 = 112
3、自定义vue的指令
(1)、全局定义:
Vue.directive()
参数:
- 指令的名字(定义的时候不加v-,使用vue指令的时候加上v-)
- 对象,里面包含三个钩子方法
(1)bind 只调用一次,指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置
(2)inserted 这个元素已经渲染到界面上之后执行
(3)update 当元素有更新的时候执行- 这三个方法的参数有哪些?
(1)el:指令所绑定的元素,可以用来直接操作 DOM 。
(2)binding:一个对象,包含以下属性:
(3)name:指令名,不包括 v- 前缀。
(4)value:指令的绑定值,例如:v-my-directive=“1 + 1” 中,绑定值为 2。
(5)oldValue:指令绑定的前一个值,仅在 update 和 componentUpdated钩子中可用。无论值是否改变都可用。
<div v-color="'#000'+'333'">你好</div>
Vue.directive('color', {
// 这个三个方法第一个参数都是el,原生的dom对象
// vue检测到指令绑定到界面元素的时候会执行这个方法
bind(el, bind) {
// 这些样式就相当于我们这个元素属性
el.style.color = bind.value;
},
// 当我们这个元素插入到dom树的时候,会调用这个方法
// 在执行这个方法的时候界面上的元素已经显示出来
inserted(el) {
},
// 当组件进行更新的时候会调用这个方法
update(el) {
}
})
(2)、私有定义:
- 实例里有个directives属性,这个属性是个对象
- 里面放的就是我们指令,这个对象键就是指令的名字,后面的对象就是指令的内容,和全局定义是一样的
- 简写直接写一个函数,函数名就是指令的名字,其他和全局定义是一样的。
var vm = new Vue({
el: '#app',
directives: {
color(el, bind) {
el.style.color = 'blue';
},
focus: {
inserted(el) {
el.focus();
},
bind(el) {
},
updated() {
}
}
}
})