VUe键盘修饰符及自定义指令获取焦点

时间 2020-05-25

标签 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在监听键盘事件时添加关键css

修饰符: <input v-on:click.13=submit">html

　　记住全部的keycode比较困难,因此Vue为最经常使用的按键提供了别名vue

　　　　.enter　　　　　　回车node

　　　　.tab　　　　　　制表符express

　　　　.delte　　　　　　删除或退格api

　　　　.esc　　　　　　退出ide

　　　　.up 　　　　　　向上函数

　　自定义键值修饰符:

　　能够经过全局 config.keyCodes对象自定义键值修饰符别名:ui

　　　　语法Vue.config.keyCodes.f1=112;spa

　　　　后期就用@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; } } });

VUe键盘修饰符及自定义指令获取焦点

首先须要在keyup事件以后. 修饰符 来绑定事件

前提记住, 若是这个按钮 没有click事件,键盘事件是没有用的

键值修饰符

自定义键值修饰符:

自定义全局指令---获取焦点

钩子函数 --也叫回调函数

还能够给元素设置样式

钩子函数参数

自定义私有指令

首先须要在keyup事件以后. 修饰符来绑定事件

前提记住, 若是这个按钮没有click事件,键盘事件是没有用的

　　自定义键值修饰符:

　　自定义私有指令