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; } } });