input框聚焦和失去焦点以及vue的自定义指令（以input框聚焦为例）

<input type="text"  id="username">

聚焦：

document.getElementById('username').focus()

失去焦点：

document.getElementById('username').blur(); 

vue自定义事件：指令名称不需要加 v- 前缀，默认是自动加上前缀的，使用指令的时候一定要加上前缀
情形1:全局自定义指令

<input type="text" v-focus>
</div>
<script>
    Vue.directive("focus",{
        inserted:function(el){
            console.log(el)  //el为事件对象，这里为input框
            el.focus()
        }
    })
    var app = new Vue({
        el: '#app',
        data:{
        }
    })
</script>

情形2:组件内自定义指令

 <div id="app">
     <input type="text" v-focus>
 </div>
 <script>
     var app = new Vue({
         el: '#app',
         data:{
             
         },
         directives:{
             // （指令名称不需要加 v- 前缀，默认是自动加上前缀的，使用指令的时候一定要加上前缀）
             focus:{
                 inserted:function(el){
                     el.focus()
                 }
             }
         }
     })
 </script>