#### 1. 自定义一个全局指令 1. 使用 Vue.directive('指令名', {对象}) 定义全局的指令 v-focus 2. 其中：参数1：指令的名称，注意，在定义的时候，指令的名称前面，不需要加v-前缀 3. 但是：在调用的时候，必须在指令前加上v-前缀进行调用 4. 参数2：是一个对象，在这个对象身上，有一些指令相关的函数，这些函数可以在特定的阶段，执行相关的操作 #### 2. 自定义一个v-focus焦点属性 ``` Vue.directive('focus', { /* 每当指令绑定到元素上的时候，会立即执行这个bind函数，只执行一次 */ // 注意：在每个函数中，第一个参数，永远是el,表示被绑定了指令的那个元素，这个el参数，是一个原生的JS对象 // 在元素 刚绑定的时候，还没有插入到DOM中去，这时候调用focus方法，没有作用 bind: function(el){ // el.focus() }, /* inserted 表示元素插入到DOM中的时候，会执行inserted函数【触发一次】 */ // 和JS行为有关的操作，最好在inserted中去执行，防止JS行为不生效 inserted: function(el){ el.focus() }, /* 当VNode更新的时候，会执行updated，可能会触发多次 */ updated: function(){ } }); ``` #### 3. 原生JS自动获取焦点 ``` document.getElementById("input").focus(); ```