VUe键盘修饰符及自定义指令获取焦点
首先需要在keyup事件之后. 修饰符 来绑定事件
<body> <div class="box"> <!-- 这里的 @keyup.enter="enterkeyup" enter是修饰符=回车 你也可以使用13 键盘码--> <input v-on:click="enterkeyup" @keyup.13="enterkeyup" type="button" value="回车上传"> </div> <script> var vm=new Vue({ el:'.box', data:{}, methods:{ enterkeyup:function(){ alert('接收到了'); } } }); </script> </body>
前提记住, 如果这个按钮 没有click事件,键盘事件是没有用的
键值修饰符
在监听键盘事件时,我们经常需要检测常见键值,Vue 允许为V-on在监听键盘事件时添加关键
修饰符: <input v-on:click.13=submit">
记住所有的keycode比较困难,所以Vue为最常用的按键提供了别名
.enter 回车
.tab 制表符
.delte 删除或退格
.esc 退出
.up 向上
自定义键值修饰符:
可以通过全局 config.keyCodes对象自定义键值修饰符别名:
语法Vue.config.keyCodes.f1=112;
后期就用@keyup.f1就可以了
自定义全局指令---获取焦点
Vue中所有的命令，在调用的时候，都以v-开头的，v-focus Vue是没有定义的 需要自己定义命令
使用Vue-directive()定义全局的指令，注意directive 不带s 私有的才有s
其中参数1：指令的名称，注意 在定义的时候，指令名称前面不需要加v-前缀，在调用的时候，必须在指令前缀上加上v-
参数2：是一个对象，这个对象身上有一些指令相关的函数，这些函数可以在特定的阶段执行相关的操作。
在参数2对象中还有 回调函数，其中回调函数也有参数
钩子函数 --也叫回调函数
一个指令定义对象可以提供如下几个钩子函数 (均为可选)：
-
bind：只调用一次，指令第一次绑定到元素时调用。会立即执行。它没有真正的放到DOM中去，还在内存中。 -
inserted：被绑定元素插入DOM中 (仅保证父节点存在，但不一定已被插入文档中)。 -
update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。 -
componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。 -
unbind：只调用一次，指令与元素解绑时调用。
<script>
//自定义指令 focus获取焦点
Vue.directive('focus',{
bind:function(el){ //每当指令绑定到元素上的时候，会立即执行这bind函数，只执行一次
//注意：在每个函数中，第一个参数，永远是el 表示被绑定了指令的那个元素，这个el参数是一个原生js对象
//在元素刚绑定了指令的时候，还没有插入到DOM中去，这时候，调用focus方法没有用
//因为，一个元素，只有插入DOM之后，才能获取焦点
el.focus();
},
inserted:function(el){ //inserted 表示元素 插入到DOM中的时候，会被执行inserted函数 只执行一次
el.focus();
},
updated() { //当Vnode更新的时候会执行updated，可能会触发多次
},
});
var vm=new Vue({
el:'.box',
data:{
},
methods: {
},
});
</script>
还可以给元素设置样式
inserted:function(el){ //inserted 表示元素 插入到DOM中的时候，会被执行inserted函数 只执行一次
el.focus(); //这里面可以写jsDOm的操作 获取焦点
el.style.color='red';
},
说明：自己理解
需要操作DOM行为的 都在inserted中去执行
操作样式之类的都在bind中去执行
接下来我们来看一下钩子函数的参数 (即 el、binding、vnode 和 oldVnode)。
钩子函数参数
指令钩子函数会被传入以下参数：
el：指令所绑定的元素，可以用来直接操作 DOM 。binding：一个对象，包含以下属性：name：指令名，不包括v-前缀。value：指令的绑定值，例如：v-my-directive="1 + 1"中，绑定值为2。oldValue：指令绑定的前一个值，仅在update和componentUpdated钩子中可用。无论值是否改变都可用。expression：字符串形式的指令表达式。例如v-my-directive="1 + 1"中，表达式为"1 + 1"。arg：传给指令的参数，可选。例如v-my-directive:foo中，参数为"foo"。modifiers：一个包含修饰符的对象。例如：v-my-directive.foo.bar中，修饰符对象为{ foo: true, bar: true }。
vnode：Vue 编译生成的虚拟节点。移步 VNode API 来了解更多详情。oldVnode：上一个虚拟节点，仅在update和componentUpdated钩子中可用。
除了 el 之外，其它参数都应该是只读的，切勿进行修改。如果需要在钩子之间共享数据，建议通过元素的 dataset 来进行。
//自定义指令
Vue.directive('color',{
bind:function(el,binding){
el.style.color='red';
console.log(binding.name); //返回color 获取当前自定义指令的名称
console.log(binding.value); //返回green 获取当前自定义指令 付给的值
console.log(binding.expression); // 返回 'green' 字符串形式返回
// 如果根据用户给定的参数设置颜色
el.style.color=binding.value; //绿色了
}
});
自定义私有指令
<div class="box"> <input type="text" v-fontweiht="'green'" v-on:keyup.f1="add" name="" id=""> </div> <script> Vue.config.keyCodes.f1=112; var vm=new Vue({ el:'.box', data:{}, methods:{ add(){ alert('接收到了'); } }, //定义私有指令跟全局写法是一样的 directives:{ 'fontweiht':function(el,binding){ el.style.color=binding.value; } } });
