VUe鍵盤修飾符及自定義指令獲取焦點

時間  2020-05-25 標籤 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在監聽鍵盤事件時添加關鍵css
 

修飾符:   <input v-on:click.13=submit">html
 

　　記住全部的keycode比較困難,因此Vue爲最經常使用的按鍵提供了別名vue
 

　　　　.enter　　　　　　回車node
 

　　　　.tab　　　　　　製表符express
 

　　　　.delte　　　　　　刪除或退格api
 

　　　　.esc　　　　　　退出ide
 

　　　　.up 　　　　　　向上函數
 

 
 

 
 
 

　　自定義鍵值修飾符:
 

　　
 

　　能夠經過全局 config.keyCodes對象自定義鍵值修飾符別名:ui
 

　　　　語法Vue.config.keyCodes.f1=112;spa
 

　　　　後期就用@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; } } });
 


                




                

            

        

    










    

        联系我们
        沪ICP备13005482号-10