Vue过滤器和键盘修饰符

最新推荐文章于 2024-02-02 11:17:40 发布

土豆and地瓜

最新推荐文章于 2024-02-02 11:17:40 发布

阅读量94

点赞数 1

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/llj1028/article/details/128462243

版权

一、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

土豆and地瓜

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue过滤器和键盘修饰符

第一个参数：指令名第二个参数：对象（三个函数）1、指令的名字（定义的时候不加v-,使用vue指令的时候加上v-）2、对象，里面包含三个钩子方法- bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次行的初始化设置（虚拟DOM）- inserted：这个元素已经渲染到界面上之后执行- update：当元素有更新的时候执行3、这三个方法的参数有哪些el：指令所绑定的元素，可以用来直接操作DOMbinding：一个对象，包含以下属性：name：指令名，不报括v-前缀。
复制链接

扫一扫