vue學習(十七) 使用自定義指令 使文本框得到鼠標焦點

需求：當咱們進入某個頁面，頁面中的第一個input會自動得到焦點 光標閃爍，表明可輸入

<div id="app">
　　//v-focus 是自定義的
　<input type="text" class="form-control" v-focus/> 
</div>

//script
<script>
　　//自定定義指令  v-focus
　　//使用 Vue.directive()定義全局指令 
　　//其中 參數1 ： 指令的名稱，注意，在定義的時候，指令的名稱前面，不須要加 v- 前綴
　　//可是 在調用的時候，必須在指令名稱前 加上 v- 前綴來進行調用
　　//參數2 ：是一個對象，這個對象身上有一些指令相關的函數，這些函數能夠在特定的階段，執行相關的操做 　　
　　Vue.directive('focus',{
　　　　bind: function(el){//每當指令綁定到元素上的時候，會當即執行這個bind函數，只執行一次 
　　　　　　//注意 在每一個函數中，第一個參數是el，表示被綁定了指令的那個元素，這個el是一個原生的JS對象，因此el有一些js的方法
　　　　　　//在元素 剛綁定了指令的時候，尚未插入到DOM中去，這時候調用focus方法沒有做用，由於一個元素只有插入DOM以後才能獲取焦點
　　　　　　el.focus()//這個方法不合適 雖然不報錯 可是沒效果，須要插入到DOM中
　　　　},
　　　　inserted: function(el){//元素插入到DOM中的時候，會執行inserted函數，觸發一次
　　　　　　
　　　　　　el.focus()
　　　　},
　　　　updated: function(){//當組件或VNode更新的時候會執行updated，可能會觸發屢次

　　　　}
　　})

　　//自定義一個私有的過濾器(局部)
　　var vm = new Vue({
　　　　el:'app',
　　　　data:{
　　　　　　msg:''
　　　　}，
　　　　method:{},
　　　　filters:{//定義私有過濾器 過濾器有兩個條件 過濾器名稱和處理函數
　　　　　　
　　　　}
　　})
</script>