vue基础day02
1、Vue.filter过滤器
**概念：**
Vue.js 允许你自定义过滤器，可被用作一些常见的文本格式化。过滤器可以用在两个地方： mustache插值和v-bind表达式。过滤器应该被添加在JavaScript表达式的尾部，由“管道”符指示。
**作用：**
在我们页面显示值之前加一层过滤，展示我们过滤后的值
**注意事项：**
过滤器可以用在两个地方：双花括号插值和 v-bind 表达式
**使用语法：**
{{变量 | 过滤器名}}
{{变量 | 过滤器 | 另一个过滤器}} 可以同时使用多个过滤器，后面过滤器的data就是前面 表达式传过来的值
全局过滤器：通过Vue提供的filter方法定义：Vue.filter()
私有过滤器：filters这个是实例化Vue的一个参数，和data,methods平级的，里面放的就是我们这个实例的私有过滤器。
代码实例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./vue-2.4.0.js"></script>
<body>
<!-- 过滤器的使用语法
{{变量 | 过滤器名}}
{{变量 | 过滤器 | 另一个过滤器}} 可以同时使用多个过滤器，
后面过滤器的data就是前面表达式传过来的值
-->
<div id ="app">
{{num1|add1(123)}}
{{num1|add1(3576)}}
{{num1|add1(123)}}
<h3>
{{data3|demo1()}}
</h3>
</div>
<div id="app1">
{{num2|add1(123)}}
<h3>
{{data4|demo1()}}
</h3>
</div>
<script>
// 全局过滤器
Vue.filter("add1",function(data,format){
// // data:被过滤的数据
console.log(data);
// // format是过滤器被调用时传递参数
console.log(format);
// // 返回的内容
return data+format;
})
//创建Vue实例,得到 ViewModel
const vm = new Vue({
el: '#app',
data: {
num1:6,
date1:new Date(),
data3:5
},
methods: {},
// 私有过滤器不能在其他实例中使用
filters:{
demo1(data,format){
return 555
}
}
});
const vm1 = new Vue({
el: '#app1',
data: {
num2:8,
date1:new Date(),
data4:888
},
methods: {}
});
</script>
</body>
</html>
2、键盘修饰符
1.监听所有按键：v-on:keyup
2.监听指定按键：v-on:keyup.按键码
注意：每个键盘按键都会对应一个键盘码，可以参照这个网站按键码对应网址。
3.使用按键别名
vue提供的按键别名：.enter .tab .delete (捕获“删除”和“退格”键) .esc .space .up .down .left .right
例：绑定监听enter按键；v-on:keyup.enter
4. 自定义按键别名
Vue.config.keyCodes.c= 67
代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./vue-2.4.0.js"></script>
<body>
<div id ="app">
<!-- 1.监听所有按键：v-on:keyup -->
<input type="text" @keyup="keyup1">
<!-- 2. 监听指定按键：v-on:keyup.按键码 -->
<input type="text" @keyup.65="keyup1">
<input type="text" @keyup.66="keyup1">
<input type="text" @keyup.67="keyup1">
<!-- 3.使用按键别名 vue提供的按键别名 -->
<!-- vue提供的按键别名
.enter
.tab
.delete (捕获“删除”和“退格”键)
.esc
.space
.up
.down
.left
.right -->
<input type="text" @keyup.enter='keyup1'>
<input type="text" @keyup.tab='keyup1'>
<input type="text" @keyup.delete='keyup1'>
<input type="text" @keyup.esc='keyup1'>
<input type="text" @keyup.up='keyup1'>
</div>
<script>
//4. 自定义按键别名,方便查找和维护
Vue.config.keyCodes.c=67;
//创建Vue实例,得到 ViewModel
const vm = new Vue({
el: '#app',
data: {},
methods: {
keyup1(){
console.log("键盘已抬起");
}
}
});
</script>
</body>
</html>
3.自定义指令
**全局定义**
1. 指令的名字（定义的时候不加v-,使用vue指令的时候加上v-）
2. 对象，里面包含三个钩子方法
bind 只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置
inserted 这个元素已经渲染到界面上之后执行
update 当元素有更新的时候执行
3. 这三个方法的参数有哪些
el：指令所绑定的元素，可以用来直接操作 DOM 。
binding：一个对象，包含以下属性：
name：指令名，不包括 v- 前缀。
value：指令的绑定值，例如：v-my-directive="1 + 1" 中，绑定值为 2
oldValue：指令绑定的前一个值，仅在 update 和 componentUpdated钩子中可用。无论值是否改变都可用。
**私有定义**
。实例里有个directives属性，这个属性是个对象
。里面放的就是我们指令，这个对象键就是指令的名字，后面的对象就是指令的内容，和全局定义是一样的
。简写直接写一个函数，函数名就是指令的名字，其他和全局定义是一样的。
代码示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./vue-2.4.0.js"></script>
<body>
<div id ="app">
<h3 v-color="color2">今天是个好日子</h3>
<h5 v-app2color="color2">这是自定义的app2指令</h5>
</div>
<div id="app2">
<h3 v-color="color2">今天是个好日子</h3>
<h5 v-app2color="color2">这是自定义的app2指令</h5>
</div>
<script>
// 全局定义
// 使用这个方法进行全局定义：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钩子中可用。无论值是否改变都可用。
Vue.directive("color",{
bind(el,bind){
// console.log(el);//<h3 v-color="color2">今天是个好日子</h3>
// console.log(bind);//<h3 v-color="color2">今天是个好日子</h3>
el.style.color=bind.value;
},
inserted(el) {
el.style.fontSize = "50px";
},
update(el) {
// console.log(el);
},
})
//创建Vue实例,得到 ViewModel
const vm = new Vue({
el: '#app',
data: {
color1:"red",
color2:"blue"
},
methods: {}
});
const vm2 = new Vue({
el: '#app2',
data: {
color2:"yellow",
},
methods: {},
// 私有定义：注意位置与data,mothods平级
// 简写直接写一个函数，函数名就是指令的名字，其他和全局定义是一样的
directives: {
app2color(el, bind) {
console.log(el);
el.style.color = bind.value;
},
},
});
</script>
</body>
</html>
4.padStart()和.padEnd()
.padStart(2,0)：是两位数，不够两位数在前边补0
这个是字符串提供的方法，所以我们先要保证调用的地方是个字符串
这个方法里两个参数 -
显示的位数
位数不足时在前面补充的内容
.padEnd(3，0)：是三位数，不够后面补0
和上面用法一样，这个是在后面补一个值
5.时间格式化
代码示例
dateFormat(fmt) {
// fmt ="YYYY-MM-DD hh:mm:ss"
let date = new Date();
let Y = date.getFullYear();
let M = date.getMonth() + 1 > 10? date.getMonth() + 1: "0" + (date.getMonth() + 1);
// padStart(2,0)
// 这个是字符串提供的方法，所以我们先要保证调用的地方是个字符串
// 这个方法里两个参数 -
// 显示的位数
// 位数不足时在前面补充的内容
let D = date.getDate().toString().padStart(2, 0);
let h = date.getHours().toString().padStart(2, 0);
// let m = date.getMinutes().toString().padEnd(2, 0);
let m = date.getMinutes().toString().padStart(2, 0);
let s = date.getSeconds().toString().padStart(2, 0);
// return `${Y}/${M}/${D} ${h}:${m}:${s}`;
// "2021-06-22 hh:mm:ss"
return fmt
.replace("YYYY", Y)//.replace(参数一：要被替换的字符串，参数二：替换之后的字符串)
.replace("MM", M)
.replace("DD", D)
.replace("hh", h)
.replace("mm", m)
.replace("ss", s);
},
//调用：
dateFormat("YYYY年MM月DD日 hh时mm分ss秒")
221
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
