一、filter过滤器
1、过滤器用在插值表达式跟v-bind中
过滤器分为两种
- 1、全局过滤器
- 2、私有过滤器
全局过滤器:
<body>
<div id="app">
<!-- 过滤器用在插值表达式跟v-bind中 -->
<div>{{msg | setObj('发发发')}}</div>
</div>
</body>
<script>
Vue.filter('setObj',function(data,format){
console.log(data);
console.log(format);
//可以用replace替换
return data.replace('朋友','**')
})
</script>
私有过滤器:
<body>
<div id="app">
<!-- 过滤器用在插值表达式跟v-bind中 -->
<div>{{msg | setObj('发发发')}}</div>
</div>
<!-- <div id="app1"> -->
<!-- 过滤器用在插值表达式跟v-bind中 -->
<!-- <div>{{msg | setObj('发发发') | setNum(888)}}</div> -->
<!-- </div> -->
</body>
<script>
let vm = new Vue({
el:'#app',
data:{
msg:'朋友你好',
},
methods:{
},
filters:{
setObj(data,format){
console.log(data);
// return data.replace('朋友','**')
return format.replace('发发发','六六六')
}
}
})
</script>
练习:实现一个日期的格式化
<body>
<td>{{item.carTime | setTime('YYYY/MM/DD/hh/mm/ss')}}</td>
</body>
<script>
Vue.filter('setTime', function (data, format) {
let y = data.getFullYear()
let m = (data.getMonth() + 1).toString().padStart(2, '0')
let d = data.getDate().toString().padStart(2, '0')
let h = data.getHours().toString().padStart(2, '0')
let m1 = data.getMinutes().toString().padStart(2, '0')
let s = data.getSeconds().toString().padStart(2, '0')
console.log(y, m, d, h, m1, s);
return format.replace('YYYY', y).replace('MM', m).replace('DD', d).replace('hh', h).replace('mm', m1).replace('ss', s)
})
</script>
二、键盘修饰符
键盘修饰符只用于表单控件(input)
1、监听按键事件
- 1、监听所有按键:v-on:keyup(简写:@keyup);
2、监听指定按键:v-on:keyup.按键码(简写:@keyup.按键码)
<input type="text" @keyUp="keyUp">
<input type="text" @keyUp.13="keyUp">
<input type="text" @keyUp.enter="keyUp">
2、使用按键别名
vue提供的按键别名
● .enter
● .tab
● .delete (捕获“删除”和“退格”键)
● .esc
● .space
● .up
● .down
● .left
● .right
三、自定义指令
1、全局定义
Vue.directive()
-
第一个参数:指令名
-
第二个参数:对象(三个函数)
参数:
1、指令的名字(定义的时候不加v-,使用vue指令的时候加上v-)
2、对象,里面包含三个钩子方法- bind:只调用一次,指令第一次绑定到元素时调用。在这里可以进行一次行的初始化设置(虚拟DOM) - inserted: 这个元素已经渲染到界面上之后执行 - update:当元素有更新的时候执行
3、这三个方法的参数有哪些
-
el:指令所绑定的元素,可以用来直接操作DOM
-
binding:一个对象,包含以下属性:
-
name:指令名,不报括v-前缀。
-
value:指令的绑定值
-
oldValue:指令绑定的前一个值,仅在update和componentUpdated钩子中可用。无论值是否改变都可用。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../vue-2.4.0.js"></script>
</head>
<body>
<div id="app">
<div v-color="color">{{msg}}</div>
<div v-color="'blue'">{{msg}}</div>
<input type="text" v-color v-model="value">
</div>
</body>
<script>
Vue.directive("color",{
// 这三个方法的第一个参数都是el,原生的DOM对象
// bind只调用一次,指令第一次绑定到元素时调用。在这里可以进行一次行的初始化设置
// el:当前的DOM元素
// bind(el,binding){
// console.log(el);
// console.log(binding);
// el.style.color='red'
// el.style.color = binding.value
// },
// inserted这个元素已经渲染到界面上之后执行
inserted(el,binding){
console.log(el);
console.log(binding);
el.style.color='red'
// el.style.color = binding.value
},
// update当元素有更新的时候执行
// update(el,binding){
// console.log(el);
// // console.log(binding);
// // el.style.color = 'red'
// el.style.color = binding.value
// }
})
let vm = new Vue({
el:'#app',
data:{
msg:'张三李四王五~~~',
color:'red',
value:''
},
methods:{
},
})
</script>
</html>
2、私有定义
- ● 实例里有个directives属性,这个属性是个对象
- ●里面放的就是我们指令,这个对象键就是指令的名字,后面的对象就是指令的内容,和全局定义是一样的
- ●简写直接写一个函数,函数名就是指令的名字,其他和全局定义是一样的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../vue-2.4.0.js"></script>
</head>
<body>
<div id="app">
<div v-color="color">{{msg}}</div>
<input type="text" v-model="value">
</div>
</body>
<script>
let vm = new Vue({
el: '#app',
data: {
color: 'red',
msg: '啦啦啦啦啦~~~',
value:''
},
methods: {
},
directives: {
// color(el,binding){
// el.style.color = "blue";
// console.log(el);
// console.log(binding);
// el.style.color = binding.value
// }
color: {
// bind 只调用一次,指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置(虚拟dom)
// bind(el,binding){
// el.style.color = 'blue'
// },
inserted(el, binding) {
// inserted 这个元素已经渲染到界面上之后执行
// el.style.color = "blue"
el.style.color = binding.value
},
// update 当元素有更新的时候执行
update(el,binding){
el.style.color = 'blue'
}
}
}
})
</script>
</html>
es6两个字符串的方法:
padStart(显示的位数,位数不足时补充的内容) 在之前补值
padStart(显示的位数,位数不足时补充的内容) 在之后补值
时间:12.27