vue 基礎入門筆記 08:鍵盤修飾符、自定義指令

September發表於2019-08-15
Vue筆記
  1. 鍵盤修飾符
    • 鍵盤迴車
  2. 自定義指令
    • focus 案例
<!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"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
        integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>

<body>
    <div id="app">
        <!-- 鍵盤修飾符 -->
        <input @keyup.f2='show' v-model='name' type="text" name="" id="input" class="form-control" value=""
            required="required" pattern="" title="">
        <!-- 自定義指令  獲取焦點-->
        <input type="text" v-focus v-model='name' name="" id="input" class="form-control" value="" required="required"
            pattern="" title="">

    </div>
    <script>
        // 指令定義函式提供了幾個鉤子函式（可選）：

        // bind: 只呼叫一次，指令第一次繫結到元素時呼叫，用這個鉤子函式可以定義一個在繫結時執行一次的初始化動作。

        // inserted: 被繫結元素插入父節點時呼叫（父節點存在即可呼叫，不必存在於 document 中）。

        // update: 被繫結元素所在的模板更新時呼叫，而不論繫結值是否變化。透過比較更新前後的繫結值，可以忽略不必要的模板更新（詳細的鉤子函式引數見下）。

        // componentUpdated: 被繫結元素所在模板完成一次更新週期時呼叫。

        // unbind: 只呼叫一次， 指令與元素解綁時呼叫。

        // 鉤子函式的引數 (包括 el，binding，vnode，oldVnode) 。

         //arg1 指令名
        //arg2 是一個物件，有一些指令相關的函式，這些函式在一些特定的階段，執行相關操作
        Vue.directive('focus', {
            // 當繫結元素插入到 DOM 中。
            inserted: function (el) {
                // 聚焦元素
                el.focus()
            }
        })
        var vm = new Vue({
            el: '#app',
            data: {
                name: ''
            },
            methods: {
                show() {
                    alert("hello world")
                }
            },
            //區域性指令
            directives: {
                focus: {
                    // 指令的定義---
                }
            }
        });
        Vue.config.devtools = true
        // .enter => // enter鍵
        // .tab => // tab鍵
        // .delete (捕獲“刪除”和“退格”按鍵) => // 刪除鍵
        // .esc => // 取消鍵
        // .space => // 空格鍵
        // .up => // 上
        // .down => // 下
        // .left => // 左
        // .right => // 右
        // 自定義鍵盤修復符
        Vue.config.keyCodes.f2 = 13
    </script>
</body>

</html>
本作品採用《CC 協議》，轉載必須註明作者和本文連結
日照香爐生紫煙

相關文章