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;

                }

            }

        });