前端开发学习 (四) 自定义按键修饰符
  wAzzyqwRgjCe 2023年12月10日 17 0


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

 

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

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

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

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

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

 

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

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

//自定义私有指令（简写形式）
            directives: {
                'fontweight': function (el, binding) { //注意，这个function等同于把代码写到了 bind 和 update 中去
                    el.style.fontWeight = binding.value;
                }
            }
【版权声明】本文内容来自摩杜云社区用户原创、第三方投稿、转载，内容版权归原作者所有。本网站的目的在于传递更多信息，不拥有版权，亦不承担相应法律责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱： cloudbbs@moduyun.com
  1. 分享：
最后一次编辑于 2023年12月10日 0

暂无评论

推荐阅读
  2ZWaIcRK1Mag   2023年12月23日   18   0   0 前端好用npmNode.jsNode.jsnpm前端好用
  ejdQbmcNduLw   2023年12月23日   49   0   0 Javaservletxmljava前端servletxml前端
  G5G9kTkvHDi8   2023年12月23日   48   0   0 iosiosfluttervscode前端CodeCodeflutter前端vscode
  ZqrBBAeTAPGf   2023年12月23日   15   0   0 学习一对一sedTimesed一对一Time学习
  Eab8PqVrV6ZI   2023年12月23日   20   0   0 插槽css前端javascriptJavaScriptCSS数据共享数据共享插槽前端
  m2FwJnmZK1ge   2023年12月23日   40   0   0 重启前端高效率工作效率javascriptJavaScript高效率工作效率重启前端
  u6lSrlpjxquL   2023年12月23日   96   0   0 SQLSQLLandsat前端javascriptJavaScript数据库数据库Landsat前端
  Eab8PqVrV6ZI   2023年12月23日   74   0   0 自定义属性开发语言前端javascriptTestJavaScript自定义属性开发语言前端Test
  px8Y25gMnWbQ   2023年12月23日   13   0   0 ListciDataDatauni-appciuni-appList
  px8Y25gMnWbQ   2023年12月23日   16   0   0 javascript创建项目创建项目JavaScript前端uni-appuni-app前端
  Eab8PqVrV6ZI   2023年12月23日   66   0   0 vue.js上传图片前端javascript事件处理事件处理JavaScriptvue.js前端上传图片
  E929ZvlRxyUs   2023年12月23日   18   0   0 前端url前端URL
wAzzyqwRgjCe
wAzzyqwRgjCe
作者其他文章 更多
前端开发学习 (二) 事件修饰符、系统命令

2023-12-13

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

2023-12-10

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

2023-12-10

Python 框架学习 Django篇 (六) 数据表关联

2023-12-10

常用脚本语法记录

2023-12-10

devops学习(五) Jenkins 简单完成持续部署

2023-12-10

linux 组件报错笔记

2023-12-10

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

2023-12-07

Python 框架学习 Django篇 (八) 代码优化、数据库冗余处理

2023-12-02

Python 框架学习 Django篇 (九) 产品发布、服务部署

2023-11-15

最新推荐 更多
Vue项目中有封装过axios吗？主要是封装哪方面的？

2024-05-17

浅谈Vue.js与原生开发

2024-05-17

vue要做权限管理该怎么做？如果控制到按钮级别的权限怎么做？

2024-05-17

Vue模板语法、属性绑定、条件渲染的学习

2024-05-17

vue3编译优化之“静态提升”

2024-05-17

VUE-局部使用

2024-05-17

你是怎么处理vue项目中的错误的？

2024-05-17

实现抖音 “视频无限滑动“效果

2024-05-17

说说webpack proxy工作原理？为什么能解决跨域?

2024-05-17

我为什么还要造一个前端轮子？

2024-05-17

一款摸鱼神器！帮助你利用上班时间背单词！

2024-05-17

next-route

2024-05-17

深入探索JavaScript中的structuredClone：现代深拷贝的解密指南

2024-05-17

ES 2024 新特性

2024-05-17

记使用pdf.js过程遇到的坑

2024-05-17

JavaScript中执行上下文和执行栈是什么？

2024-05-17

如何使用 JS 判断用户是否处于活跃状态

2024-05-17

使用 JS 实现在浏览器控制台打印图片 console.image()

2024-05-17

说说JavaScript中的事件模型

2024-05-17

thymeleaf

2024-05-17

常用标签
数据数据数据数据javalinuxlinuxpythonCentOSredisJava区块链技术python区块链信息系统字符串MySQL资讯项目管理mysql教程MySQL