前端框架Vue学习07——自定义按键修饰符、自定义全局指令

自定义按键修饰符

需求就是在name输入框这里点击enter或者其他自定义键盘时，触发添加方法。

<label>
       Name:
       <input type="text" class="form-control" v-model="name" @keyup.enter="add">
</label>

监听这个输入框 的enter 键，点击enter键即可触发add方法。官方文档对这一块说的很明了

键盘上每一个键盘都有对应的码值，所以只要知道键盘码值，就可以随意设置，例如f2的码值是113，定义全局按键修饰符

Vue.config.keyCodes.f2 = 113

然后这里改为f2即可，@keyup.f2=“add”。

自定义全局指令

需求是让文本框获取焦点，vue没有设置获取焦点的指令，所以需要我们自己定义v-focus。约定俗成的Vue中所有指令，在调用的时候都以 v- 开头。
使用Vue.directive() 定义全局指令 v-focus，/其中:参数1：指令的名称，注意在定义的时候，指令的名称不需要加 v- 前缀。但是，在调用的时候，必须在指令名称前加上 v- 前缀来进行调用，参数2：是一个对象，该对象身上，有一些指令相关的函数，这些函数可以在特定的阶段，执行相关的操作

        Vue.directive('focus',{
            bind:function(el){ //每当指令绑定到元素上的时候，会立即执行这个bind 函数，只执行一次
            //在每个函数中 第一个参数 永远是 el 表示被绑定了指令的元素，这个 el 参数是一个原生的JS对象
            //在元素刚绑定了指令的时候，还未插入到DOM中去，这时调用focus 方法没有作用，因为 一个元素 只有插入dom 之后，才能获取焦点
            el.focus()
            },
            //和js行为有关的操作，最好放在这里，防止js 行为不生效
            inserted:function(el){//inserted表示元素插入到DOM的时候，会执行inserted 函数只执行一次
                el.focus()
            },
            updated:function(){//当VNode更新的时候，会执行updated 可能会触发多次

            }
        })

官方文档里面的介绍