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

本文介绍: 如果我们直接在代码的标签里写，那么，按住「F2键」后，是没有效果的，因为「F2键」不是内置的按键修饰符（如果F2不能验证，你可以试一下F7）另外我们知道，每个按键都有一个键盘码，如下在某一个 vue 对象内部自定义的指令称之为私有指令。这种指令只有在当前 vue 对象的el 指定的监管区域有用。

一、 v–on的按键 修饰符

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

修饰符	用途
.e n t e r	当在输入框按下回车时触发
.tab	当按下 tab时触发
.delete	当按下删除键（通常是键盘上的De let e键）时触发事件
.esc	当按下Es cap e键时触发事件
.space	当按下空格键时触发事件
.up	当按下上方向键时触发事件
.down	当按下下方向键时触发事件
.left	当按下左方向键时触发事件
.right	当按下右方向键时触发事件
@key up	任意键盘键位松开时触发

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

@key up.enter 案例

@keyup.enter="addData"

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

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

<!DOCTYPE html&gt;
<html lang="en"&gt;

<head&gt;
    <meta charset="UTF-8"&gt;
    <meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    <meta http-equiv="X-UA-Compatible" content="ie=edge"&gt;
    <title&gt;Document</title&gt;
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"&gt;</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>

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

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

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

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>

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>

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

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

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

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

原文地址:https://blog.csdn.net/qq_42883074/art icle/details/134777464

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。