前端开发学习 (四) 自定义按键修饰符

精选原创

默子昂1 2023-12-10 08:55:08 ©著作权

文章标签 学习 vue.js 前端 Data 删除数据 文章分类 Html/CSS 前端开发

©著作权归作者所有：来自51CTO博客作者默子昂1的原创作品，请联系作者获取转载授权，否则将追究法律责任

一、 v-on的按键修饰符

按键修饰符，通俗的来说就是监听键盘输入的事件，在Vue 中允许为 v-on 在监听键盘事件时添加按键修饰符

修饰符	用途
.enter	当在输入框按下回车时触发
.tab	当按下tab时触发
.delete	当按下删除键（通常是键盘上的Delete键）时触发事件
.esc	当按下Escape键时触发事件
.space	当按下空格键时触发事件
.up	当按下上方向键时触发事件
.down	当按下下方向键时触发事件
.left	当按下左方向键时触发事件
.right	当按下右方向键时触发事件
@keyup	任意键盘键位松开时触发

比如说，keyup指的是：键盘（任何键位）抬起时的监听事件 .enter指的是：按enter键的按键修饰符，我们可以尝试将两个事件进行结合

@keyup.enter 案例

@keyup.enter="addData"

表示按住enter键后，执行addData()方法。全称是v-on:key.enter="addData"

我们先获取到之前的一个案例代码，如下

<!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="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
    <style>
        .table {
            width: 800px;
            margin: 20px auto;
            border-collapse: collapse;
        }

        .table th {
            background: #0094ff;
            color: white;
            font-size: 16px;
            border: 1px solid black;
            padding: 5px;
        }

        .table tr td {
            text-align: center;
            font-size: 16px;
            padding: 5px;
            border: 1px solid black;
        }

        .form {
            width: 800px;
            margin: 20px auto;
        }

        .form button {
            margin-left: 10px;
        }
    </style>

</head>

<body>
<div id="app1">

    <div class="form">

        编号：
        <input type="text" v-model="formData.id"> 名称：
        <input type="text" v-model="formData.name">

        <button v-on:click="addData">添加</button>
    </div>

    <table class="table">
        <th>编号</th>
        <th>名称</th>
        <th>创建时间</th>
        <th>操作</th>
        <tr v-show="list.length == 0">
            <td colspan="4">列表无数据</td>
        </tr>
        <tr v-for="item in list">
            <td>{{item.id}}</td>
            <td>{{item.name}}</td>
            <td>{{item.ctime}}</td>


            <!--绑定delete事件，根据括号里的参数进行删除-->
            <td>
                <a href="#" v-on:click="delData(item.id)">删除</a>
            </td>

        </tr>
    </table>
</div>


<script>

    var vm = new Vue({
        el: '#app1',
        data: {
            list: [{ id: 1, name: '奔驰', ctime: new Date }, { id: 2, name: '大众', ctime: new Date }],
            formData: {
                id: 0,
                name: ""
            }
        },

        methods: {
            addData: function () {
                //将数据追加到list中
                var p = { id: this.formData.id, name: this.formData.name, ctime: new Date() };
                this.list.push(p);

                //清空页面上的文本框中的数据
                this.formData.id = 0;
                this.formData.name = '';
            },  //注意：方法之间用逗号隔开，这个逗号不要忘记了


            //添加删除数据函数
            delData: function (id) {
                //提醒用户是否要删除数据
                if (!confirm('是否要删除数据?')) {
                    //当用户点击的取消按钮的时候，应该阻断这个方法中的后面代码的继续执行
                    return;
                }

                //调用list.findIndex()方法根据传入的id获取到这个要删除数据的索引值
                var index = this.list.findIndex(function (item) {
                    return item.id == id
                });

                //调用方法：list.splice(待删除的索引, 删除的元素个数)
                this.list.splice(index, 1);
            }


        }
    });
</script>
</body>

</html>

前端开发学习 (四) 自定义按键修饰符_vue.js

之前我们如果想要添加信息，填完表后需要单击添加按钮，如果我们想要直接按回车就能完成添加，要做一些改变

<input type="text" v-model="formData.name" @keyup.enter="addData">

修改后代码

<!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="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
    <style>
        .table {
            width: 800px;
            margin: 20px auto;
            border-collapse: collapse;
        }

        .table th {
            background: #0094ff;
            color: white;
            font-size: 16px;
            border: 1px solid black;
            padding: 5px;
        }

        .table tr td {
            text-align: center;
            font-size: 16px;
            padding: 5px;
            border: 1px solid black;
        }

        .form {
            width: 800px;
            margin: 20px auto;
        }

        .form button {
            margin-left: 10px;
        }
    </style>

</head>

<body>
<div id="app1">

    <div class="form">

        编号：
        <input type="text" v-model="formData.id"> 名称：
        <input type="text" v-model="formData.name" @keyup.enter="addData">

        <button v-on:click="addData">添加</button>
    </div>

    <table class="table">
        <th>编号</th>
        <th>名称</th>
        <th>创建时间</th>
        <th>操作</th>
        <tr v-show="list.length == 0">
            <td colspan="4">列表无数据</td>
        </tr>
        <tr v-for="item in list">
            <td>{{item.id}}</td>
            <td>{{item.name}}</td>
            <td>{{item.ctime}}</td>


            <!--绑定delete事件，根据括号里的参数进行删除-->
            <td>
                <a href="#" v-on:click="delData(item.id)">删除</a>
            </td>

        </tr>
    </table>
</div>


<script>

    var vm = new Vue({
        el: '#app1',
        data: {
            list: [{ id: 1, name: '奔驰', ctime: new Date }, { id: 2, name: '大众', ctime: new Date }],
            formData: {
                id: 0,
                name: ""
            }
        },

        methods: {
            addData: function () {
                //将数据追加到list中
                var p = { id: this.formData.id, name: this.formData.name, ctime: new Date() };
                this.list.push(p);

                //清空页面上的文本框中的数据
                this.formData.id = 0;
                this.formData.name = '';
            },  //注意：方法之间用逗号隔开，这个逗号不要忘记了


            //添加删除数据函数
            delData: function (id) {
                //提醒用户是否要删除数据
                if (!confirm('是否要删除数据?')) {
                    //当用户点击的取消按钮的时候，应该阻断这个方法中的后面代码的继续执行
                    return;
                }

                //调用list.findIndex()方法根据传入的id获取到这个要删除数据的索引值
                var index = this.list.findIndex(function (item) {
                    return item.id == id
                });

                //调用方法：list.splice(待删除的索引, 删除的元素个数)
                this.list.splice(index, 1);
            }


        }
    });
</script>
</body>

</html>

二、自定义修饰符

如果我们直接在代码的<input>标签里写@keyup.f2="addData"，那么，按住「F2键」后，是没有效果的，因为「F2键」不是内置的按键修饰符（如果F2不能验证，你可以试一下F7）另外我们知道，每个按键都有一个键盘码，如下

1、键盘码

keyCode 8 = BackSpace BackSpace
keyCode 9 = Tab Tab
keyCode 12 = Clear
keyCode 13 = Enter
keyCode 16 = Shift_L
keyCode 17 = Control_L
keyCode 18 = Alt_L
keyCode 19 = Pause
keyCode 20 = Caps_Lock
keyCode 27 = Escape Escape
keyCode 32 = space
keyCode 33 = Prior
keyCode 34 = Next
keyCode 35 = End
keyCode 36 = Home
keyCode 37 = Left
keyCode 38 = Up
keyCode 39 = Right
keyCode 40 = Down
keyCode 41 = Select
keyCode 42 = Print
keyCode 43 = Execute
keyCode 45 = Insert
keyCode 46 = Delete
keyCode 47 = Help
keyCode 48 = 0 equal braceright
keyCode 49 = 1 exclam onesuperior
keyCode 50 = 2 quotedbl twosuperior
keyCode 51 = 3 section threesuperior
keyCode 52 = 4 dollar
keyCode 53 = 5 percent
keyCode 54 = 6 ampersand
keyCode 55 = 7 slash braceleft
keyCode 56 = 8 parenleft bracketleft
keyCode 57 = 9 parenright bracketright
keyCode 65 = a A
keyCode 66 = b B
keyCode 67 = c C
keyCode 68 = d D
keyCode 69 = e E EuroSign
keyCode 70 = f F
keyCode 71 = g G
keyCode 72 = h H
keyCode 73 = i I
keyCode 74 = j J
keyCode 75 = k K
keyCode 76 = l L
keyCode 77 = m M mu
keyCode 78 = n N
keyCode 79 = o O
keyCode 80 = p P
keyCode 81 = q Q at
keyCode 82 = r R
keyCode 83 = s S
keyCode 84 = t T
keyCode 85 = u U
keyCode 86 = v V
keyCode 87 = w W
keyCode 88 = x X
keyCode 89 = y Y
keyCode 90 = z Z
keyCode 96 = KP_0 KP_0
keyCode 97 = KP_1 KP_1
keyCode 98 = KP_2 KP_2
keyCode 99 = KP_3 KP_3
keyCode 100 = KP_4 KP_4
keyCode 101 = KP_5 KP_5
keyCode 102 = KP_6 KP_6
keyCode 103 = KP_7 KP_7
keyCode 104 = KP_8 KP_8
keyCode 105 = KP_9 KP_9
keyCode 106 = KP_Multiply KP_Multiply
keyCode 107 = KP_Add KP_Add
keyCode 108 = KP_Separator KP_Separator
keyCode 109 = KP_Subtract KP_Subtract
keyCode 110 = KP_Decimal KP_Decimal
keyCode 111 = KP_Divide KP_Divide
keyCode 112 = F1
keyCode 113 = F2
keyCode 114 = F3
keyCode 115 = F4
keyCode 116 = F5
keyCode 117 = F6
keyCode 118 = F7
keyCode 119 = F8
keyCode 120 = F9
keyCode 121 = F10
keyCode 122 = F11
keyCode 123 = F12
keyCode 124 = F13
keyCode 125 = F14
keyCode 126 = F15
keyCode 127 = F16
keyCode 128 = F17
keyCode 129 = F18
keyCode 130 = F19
keyCode 131 = F20
keyCode 132 = F21
keyCode 133 = F22
keyCode 134 = F23
keyCode 135 = F24
keyCode 136 = Num_Lock
keyCode 137 = Scroll_Lock
keyCode 187 = acute grave
keyCode 188 = comma semicolon
keyCode 189 = minus underscore
keyCode 190 = period colon
keyCode 192 = numbersign apostrophe
keyCode 210 = plusminus hyphen macron
keyCode 211 =
keyCode 212 = copyright registered
keyCode 213 = guillemotleft guillemotright
keyCode 214 = masculine ordfeminine
keyCode 215 = ae AE
keyCode 216 = cent yen
keyCode 217 = questiondown exclamdown
keyCode 218 = onequarter onehalf threequarters
keyCode 220 = less greater bar
keyCode 221 = plus asterisk asciitilde
keyCode 227 = multiply division
keyCode 228 = acircumflex Acircumflex
keyCode 229 = ecircumflex Ecircumflex
keyCode 230 = icircumflex Icircumflex
keyCode 231 = ocircumflex Ocircumflex
keyCode 232 = ucircumflex Ucircumflex
keyCode 233 = ntilde Ntilde
keyCode 234 = yacute Yacute
keyCode 235 = oslash Ooblique
keyCode 236 = aring Aring
keyCode 237 = ccedilla Ccedilla
keyCode 238 = thorn THORN
keyCode 239 = eth ETH
keyCode 240 = diaeresis cedilla currency
keyCode 241 = agrave Agrave atilde Atilde
keyCode 242 = egrave Egrave
keyCode 243 = igrave Igrave
keyCode 244 = ograve Ograve otilde Otilde
keyCode 245 = ugrave Ugrave
keyCode 246 = adiaeresis Adiaeresis
keyCode 247 = ediaeresis Ediaeresis
keyCode 248 = idiaeresis Idiaeresis
keyCode 249 = odiaeresis Odiaeresis
keyCode 250 = udiaeresis Udiaeresis
keyCode 251 = ssharp question backslash
keyCode 252 = asciicircum degree
keyCode 253 = 3 sterling
keyCode 254 = Mode_switch

通过查阅，我们知道了「F2键」的键盘码为113，那代码可以这样写：（按住F2键后，执行 addData 方法

<input type="text" v-model="formData.name" @keyup.113="addData">

2、自定义全局按键修饰符

虽然键盘码很全，但是不好记呀。于是，接下来，我们给键盘码定义别名

<input type="text" v-model="formData.name" @keyup.f2="addData">

<script>
    //自定义全局按键修饰符
    Vue.config.keyCodes.f2 = 113;   添加

    var vm = new Vue({

全量代码

<!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="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
    <style>
        .table {
            width: 800px;
            margin: 20px auto;
            border-collapse: collapse;
        }

        .table th {
            background: #0094ff;
            color: white;
            font-size: 16px;
            border: 1px solid black;
            padding: 5px;
        }

        .table tr td {
            text-align: center;
            font-size: 16px;
            padding: 5px;
            border: 1px solid black;
        }

        .form {
            width: 800px;
            margin: 20px auto;
        }

        .form button {
            margin-left: 10px;
        }
    </style>

</head>

<body>
<div id="app1">

    <div class="form">

        编号：
        <input type="text" v-model="formData.id"> 名称：
        <input type="text" v-model="formData.name" @keyup.f2="addData">

        <button v-on:click="addData">添加</button>
    </div>

    <table class="table">
        <th>编号</th>
        <th>名称</th>
        <th>创建时间</th>
        <th>操作</th>
        <tr v-show="list.length == 0">
            <td colspan="4">列表无数据</td>
        </tr>
        <tr v-for="item in list">
            <td>{{item.id}}</td>
            <td>{{item.name}}</td>
            <td>{{item.ctime}}</td>


            <!--绑定delete事件，根据括号里的参数进行删除-->
            <td>
                <a href="#" v-on:click="delData(item.id)">删除</a>
            </td>

        </tr>
    </table>
</div>


<script>
    //自定义全局按键修饰符
    Vue.config.keyCodes.f2 = 113;

    var vm = new Vue({
        el: '#app1',
        data: {
            list: [{ id: 1, name: '奔驰', ctime: new Date }, { id: 2, name: '大众', ctime: new Date }],
            formData: {
                id: 0,
                name: ""
            }
        },

        methods: {
            addData: function () {
                //将数据追加到list中
                var p = { id: this.formData.id, name: this.formData.name, ctime: new Date() };
                this.list.push(p);

                //清空页面上的文本框中的数据
                this.formData.id = 0;
                this.formData.name = '';
            },  //注意：方法之间用逗号隔开，这个逗号不要忘记了


            //添加删除数据函数
            delData: function (id) {
                //提醒用户是否要删除数据
                if (!confirm('是否要删除数据?')) {
                    //当用户点击的取消按钮的时候，应该阻断这个方法中的后面代码的继续执行
                    return;
                }

                //调用list.findIndex()方法根据传入的id获取到这个要删除数据的索引值
                var index = this.list.findIndex(function (item) {
                    return item.id == id
                });

                //调用方法：list.splice(待删除的索引, 删除的元素个数)
                this.list.splice(index, 1);
            }


        }
    });
</script>
</body>

</html>

这样我们在添加信息的时候就能通过按键f2来添加数据了

三、自定义全局指令

Vue.directive()

1、让指定文本框自动获取焦点

//把下面这段扔到<script> 区域内  new vue的上面
    Vue.directive('focus', {
        bind: function (el) {
        },
        inserted: function (el) { 
            el.focus()
           
        },
        updated: function (el) {  

        }
    })

说明

//自定义全局指令 v-focus：让文本框自动获取焦点
Vue.directive   //创建全局指令


'focus'       //指令的名称, 在定义时不需要添加v-，但是在调用时需要加v-  也就是v-focus

bind: function (el)  
     //在函数中第一个参数一定是el, 他表示被绑定了指令的元素
     // 每当指令绑定到元素上的时候，会立即执行这个 bind 函数，【只执行一次】
     // 在元素 刚绑定了指令的时候，还没有 插入到 DOM中去，这时候，调用 focus 方法没有作用
     //  因为，一个元素，只有插入DOM之后，才能获取焦点
     // el.focus()


inserted: function (el) {  
           // inserted 表示元素 插入到DOM中的时候，会执行 inserted 函数【触发1次】

el.focus()     // 和JS行为有关的操作，最好在 inserted 中去执行，放置 JS行为不生效


updated: function (el) {  // 当VNode更新的时候，会执行 updated， 【可能会触发多次】

上方的代码中，如果我们把el.focus()这行代码写在bind方法里，是没有效果的（但不会报错）。没有效果是因为，在执行到bind方法的时候，元素还没有插入到dom中去

由此可以看看出：bind、inserted、updated这三个钩子函数的执行时机不同，且执行的次数有区别

<!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="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
</head>

<body>

<div id="app1">
    搜索框：
    <input type="text" id="search" v-model="name" >
    <input type="text" id="search" v-model="name" v-focus>

</div>

<script>

    Vue.directive('focus', {
        bind: function (el) {
        },
        inserted: function (el) {
            el.focus()
        },
        updated: function (el) {
        }
    })

    new Vue({
        el: '#app1',
        data: {
            name: 'smyhvae'
        }
    })
</script>
</body>

</html>

前端开发学习 (四) 自定义按键修饰符_学习_02

通过访问来看，当页面刷新时默认会去聚焦我们配置了全局指令的位置

2、设置DOM元素的color样式

<!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="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
</head>

<body>

<div id="app1">

        搜索框1：
        <input type="text" id="search" v-model="name" v-color="'green'">



</div>

<script>

    Vue.directive('color', {
        // 样式，只要通过指令绑定给了元素，不管这个元素有没有被插入到页面中去，这个元素肯定有了一个内联的样式
        // 将来元素肯定会显示到页面中，这时候，浏览器的渲染引擎必然会解析样式，应用给这个元素
        // 意思是说，我们可以把样式的代码写到bind中去（即使这个时候，dom元素还没有被创建）
        bind: function (el, binding) { // 每当指令绑定到元素上的时候，会立即执行这个 bind 函数，【只执行一次】

            console.log(binding.name); //打印结果：color
            console.log(binding.value); //打印结果：green
            console.log(binding.expression);  //'green'

            el.style.color = binding.value// 通过bining拿到v-color中传递过来的值

        },
        inserted: function (el) {  // inserted 表示元素 插入到DOM中的时候，会执行 inserted 函数【触发1次】
            // 和JS行为有关的操作，最好在 inserted 中去执行，防止 JS行为不生效
            //el.focus()
        },
        updated: function (el) {  // 当VNode更新的时候，会执行 updated， 【可能会触发多次】
        }
    })

    new Vue({
        el: '#app1',
        data: {
            name: 'smyhvae'
        }
    })
</script>
</body>

</html>

前端开发学习 (四) 自定义按键修饰符_前端_03

3、自定义全局指令的简写形式

在很多时候，你可能想在 bind 和 update 时触发相同行为，而不关心其它的钩子。比如上面的代码中，我们可以写成简写形式：

Vue.directive('color', function (el, binding) { 
               //注意，这个function等同于把代码写到了 bind 和 update 中去
            el.style.color = binding.value
        })

四、自定义私有指令

在某一个 vue 对象内部自定义的指令称之为私有指令。这种指令只有在当前vue对象的el指定的监管区域有用

1、设置文字的font-weight属性

<!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="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
</head>

<body>

<div id="app1">

    <span v-fontweight="600">今天又是美好的一天</span>



</div>

<script>
    

    new Vue({
        el: '#app1',
        data: {
            name: 'smyhvae'
        },
        //自定义私有指令
        directives: {
            'fontweight': {
                bind: function (el, binding) {
                    el.style.fontWeight = binding.value;
                }
            }
        }
    })
</script>
</body>

</html>

前端开发学习 (四) 自定义按键修饰符_前端_04

使用局部指令，修改了文本的字体宽度

2、自定义私有指令的简写形式

在很多时候，你可能想在 bind 和 update 时触发相同行为，而不关心其它的钩子。比如上面的代码中，我们可以写成简写形式

//自定义私有指令（简写形式）
            directives: {
                'fontweight': function (el, binding) { //注意，这个function等同于把代码写到了 bind 和 update 中去
                    el.style.fontWeight = binding.value;
                }
            }

上一篇：Python 框架学习 Django篇 (十) Redis 缓存

下一篇：Python 框架学习 Django篇 (七) ORM关联

提问和评论都可以，用心的回复会被更多人看到评论

发布评论

相关文章

官方博客	全部文章	热门标签	班级博客
了解我们	网站地图	意见反馈

鸿蒙开发者社区	51CTO学堂
51CTO	软考资讯

前端开发学习 (四) 自定义按键修饰符

前端开发学习 (四) 自定义按键修饰符

一、 v-on的按键修饰符

@keyup.enter 案例

二、自定义修饰符

1、键盘码

2、自定义全局按键修饰符

三、自定义全局指令

1、让指定文本框自动获取焦点

2、设置DOM元素的color样式

3、 自定义全局指令的简写形式

四、自定义私有指令

1、 设置文字的font-weight属性

2、自定义私有指令的简写形式

51CTO博客

3、自定义全局指令的简写形式

1、设置文字的font-weight属性