自定义按键修饰符
需求就是在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 可能会触发多次
}
})
官方文档里面的介绍