【前端框架学习】自定义全局指令让文本框获取焦点

当我们点击进一个页面是，自然是希望立即就能够输入，而不需要鼠标进行点击后再输入。

1.js方法

首先我们用传统的js方法来实现。

现在前端页面中画一个输入框：

<input type="text" name="username" value="username" id="user">

然后再js中捕获id，实现focus：

document.getElementById('user').focus();

这样就完成了一个最简单的获取焦点。

但是我们并不提倡这么做。

2.通过自定义指令实现获取焦点

        像v-model、@keyup都是指令，只不过是vue为我们内置的指令，vue尽管提供了这么多指令，还是有一些不满足我们实际的生产需要，这个时候就需要自定义指令。

        我们在这里使用 Vue.directive()，定义全局的指令，自定义一个  v-focus  指令。其中，参数1填写指令的名称。

        在定义的时候，指令的名称前面，不需要加v-前缀，但是，在调用的时候，必须在指令名称前加上v-前缀来进行调用。

注意： Vue中所有的指令， 在调用的时候，都以 v-开头，自定义指令也要遵从这个约定。

        参数2，是一个对象，这个对象身上有一些指令相关的函数，这些函数可以在特定的阶段执行相关的操作。

bind: function () { }	每当指令绑定到元素上的时候，会立即执行这个bind函数，只执行一次，此时并没有放到DOM中去
inserted: function () { }	inserted 表示元素 插入到DOM中的时候，会执行 inserted 函数，只执行一次
updated: function () { }	当VNode更新的时候，会执行 updated，可能会触发多次

        注意： 在每个函数中，第一个参数，永远是el, 表示被绑定了指令的那个元素，这个el参数，是一个原生的Js对象。

参考文档：自定义指令-钩子函数 — Vue.js

<input type="text" name="username" value="username" v-focus>

        Vue.derective('focus', {
            bind: function (el) {
                el.focus();
            }
        });

        当我们在页面中使用v-focus时，可以发现并没有效果。这是因为，在元素刚绑定了指令的时候，还没有插入到DOM中去，这时候，调用focus 方法没有作用，因为一个元素，只有插入DOM之后，才能获取焦点。

这个时候我们使用inserted才有用。

        Vue.derective('focus', {
            inserted: function (el) {
                el.focus();
            }
        });