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
}
}
防盜鏈接：本博客由蜀雲泉發表