目錄

• padStart：補位
• 按鍵修飾符
  • Vue提供的按鍵修飾符
  • 自定義按鍵修飾符
• 自定義指令
  • 自定義指令的使用
  • 鉤子函數
  • 鉤子函數參數
  • 使用鉤子函數的bingding參數
  • 私有自定義指令
  • 鉤子函數的簡寫

padStart：補位

這個padStart方法在時間處理的時候可以補位，例如1:20可以把小時補位為01:20

使用也很簡單

"1".padStart(2,'0')

前面必須是字符串才可以調用padStart方法，第一個參數是補全的位數，第二個是補位的字符，可以是0可以是任意字符。

按鍵修飾符

Vue提供的按鍵修飾符

按鍵修飾符是監聽鍵盤事件的

這個要回到筆記九的列表練習裏講，如下圖，我輸入了內容，點擊添加按鈕就可以添加數據了是吧。現在我想自定義按鈕修飾符，就是我敲回車就可以添加內容，不需要按鈕就可以。

其實很簡單，代碼如下修改即可

name:<input type="text" class="form-control" v-model="name" @keyup.enter="add">
 

就加了個這行代碼@keyup.enter="add"，enter是敲回車，Vue還提供了以下按鍵修飾符：

• .enter
• .tab
• .delete (捕獲“刪除”和“退格”鍵)
• .esc
• .space
• .up
• .down
• .left
• .right

自定義按鍵修飾符

上面是Vue提供的，那我們想自己定義怎麽辦？比如，我想按F2添加內容，這裏可以去網上搜一下按鍵碼，enter對應的是13，F2對應的是113，這個自己去網上搜

<!-- 自定義按鍵碼 -->
Vue.config.keyCodes.F2=113
name:<input type="text" class="form-control" v-model="name" @keyup.F2="add">
 

自定義指令

我現在想在查詢框裏聚焦鼠標，普通的操作DOM的js方法如下

查詢:<input type="text" class="form-control" v-model="keywords" id='search'>
document.getElementById('search').focus()

但是Vue是不推薦操作DOM的，所以上面的方法不使用，現在就需要自定義指令

自定義指令的使用

使用很簡單，v-名稱即可

查詢:<input type="text" class="form-control" v-model="keywords" v-focus>

我寫了一個v-focus，所以需要自定義一個focus的指令

 // 自定義全局的指令
        Vue.directive('focus',{
            // 第一個參數一定是el，el就是被綁定的js對象

            // 當指令綁定到元素上的時候，執行bind函數，執行一次
            bind:function(el){
                
            },
            // 當指令插入到DOM中的時候，執行inserted函數，執行一次
            inserted:function(el){
                el.focus()
            },
            // 當組件更新的時候，執行updated函數，可能會執行多次
            updated:function(el){

            }
        })

使用Vue.directive進行自定義，第一個參數是指令名，第二個是方法，介紹了3個鉤子函數

鉤子函數

bind，inserted，updated這些函數就稱之為鉤子函數

鉤子函數參數

• 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 鉤子中可用。

這個鉤子函數的參數是我在Vue的官網復制的??

使用鉤子函數的bingding參數

上面寫了一個自定義指令focus，現在新寫一個自定義指令，看代碼

查詢:<input type="text" class="form-control" v-model="keywords" v-focus v-color="'blue'">

<scripts>
   // 顏色自定義指令
   Vue.directive('color',{
   // 當指令綁定到元素上的時候，執行bind函數，執行一次
            bind:function(el,binding){
                el.style.color=binding.value
            }
        })
</scripts>

我使用v-color="‘blue‘"，傳了一個blue進去，這個就是banding.value，賦值給了el，效果圖如下

私有自定義指令

私有的自定義指令和私有的過濾器是一樣的，如下

        // 這個vm就是MVVM中的VM，ViewModel
        var vm=new Vue({
         el: '#app',
        //  這個data就是MVVM中的M，Model
         data: {
         },
         methods: {
         },
            
         directives:{
             "color":{
                 bind:function(el,binding){
                     el.style.color=binding.value
                 }
             }
         }  

        })

鉤子函數的簡寫

僅僅針對於bind和update這兩個鉤子函數適用，可以簡寫，其他都不行

// 私有不簡寫
 directives:{
             "color":{
                 bind:function(el,binding){
                     el.style.color=binding.value
                 }
             }
         } 
// 私有簡寫，省略默認就是bind和update
 directives:{
             "color":function(el,binding){
                 el.style.color=binding.value    
             }
         } 

防盜鏈接：本博客由蜀雲泉發表

Vue學習筆記十一：按鍵修飾符和自定義指令(鉤子函數)