v-on的按鍵修飾符
Vue 內置的按鍵修飾符
通俗一點講期丰，指的是：監(jiān)聽鍵盤輸入的事件钓葫。Vue 允許為 v-on 在監(jiān)聽鍵盤事件時添加按鍵修飾符小染。如下：
Vue內置的按鍵修飾符：
.enter
.tab
.delete (捕獲 “刪除” 和 “退格” 鍵)
.esc
.space
.up
.down
.left
.right
1.0.8+版本：支持單字母的按鍵別名坑夯。
比如說喂窟，keyup指的是：鍵盤（任何鍵位）抬起時的監(jiān)聽事件庐椒。.enter指的是：按enter鍵的按鍵修飾符椒舵。我們把這兩個結合起來看看。
@keyup.enter舉例：按enter鍵后的監(jiān)聽事件
@keyup.enter="addData"表示：按住enter鍵后约谈，執(zhí)行addData()方法笔宿。全稱是v-on:key.enter="addData"。
我們還是拿01-04這篇文章中的列表功能來舉例棱诱。之前是點擊“添加”按鈕后泼橘，列表中會添加一個item。現在要求：在輸入框中按enter鍵后迈勋，也能添加一個item炬灭。
核心代碼如下：
<input type="text" v-model="formData.name" @keyup.enter="addData">
注意，如果寫成@keyup="addData"靡菇，效果卻是：只要鍵盤的任何鍵位打了字（還沒來得及按enter鍵）重归，就會執(zhí)行addData()方法，這種效果顯然不是我們想要的厦凤。所以要加上修飾符.enter鼻吮，表示只針對enter鍵。
自定義的按鍵修飾符
如果我們直接在代碼的<input>標簽里寫@keyup.f2="addData"较鼓，那么椎木，按住「F2鍵」后，是沒有效果的博烂，因為「F2鍵」不是內置的按鍵修飾符（如果F2不能驗證香椎，你可以試一下F7）。
我們知道禽篱，每個按鍵都有一個鍵盤碼畜伐。參考鏈接：
通過查閱，我們知道了「F2鍵」的鍵盤碼為113谆级，那代碼可以這樣寫：（按住F2鍵后烤礁，執(zhí)行 addData 方法）
<input type="text" v-model="formData.name" @keyup.113="addData">
雖然鍵盤碼很全讼积，但是不好記呀。于是脚仔，接下來勤众，我們給鍵盤碼定義別名。
自定義全局按鍵修飾符：
//自定義全局按鍵修飾符
Vue.config.keyCodes.f2 = 113;
上方代碼的書寫位置鲤脏，與自定義全局過濾器的位置们颜，是并列的。
然后猎醇，我們就可以使用鍵盤碼的別名了窥突。
自定義全局指令
自定義全局指令的舉例1
舉例1：讓指定文本框自動獲取焦點
如果我們想實現這個例子，原生js的寫法是：
//原生js寫法：網頁一打開硫嘶，就讓指定的輸入框自動獲取焦點
document.getElementById('search').focus()
代碼的位置：
但我們不建議這樣做阻问。我們可以通過Vue中的自定義指令來實現這個例子。步驟如下沦疾。
（1）使用Vue.directive()自定義全局指令：
//自定義全局指令 v-focus：讓文本框自動獲取焦點
//參數1：指令的名稱称近。注意，在定義的時候哮塞，指令的名稱前面刨秆，不需要加 v- 前綴；但是：在`調用`的時候忆畅，必須在指令名稱前 加上 v- 前綴
//參數2：是一個對象衡未，這個對象身上，有一些指令相關的函數家凯，這些函數可以在特定的階段缓醋，執(zhí)行相關的操作
Vue.directive('focus', {
//在每個函數中，第一個參數绊诲，永遠是 el 改衩，表示 被綁定了指令的那個元素，這個 el 參數驯镊，是一個原生的JS對象（DOM對象）
bind: function (el) { // 每當指令綁定到元素上的時候，會立即執(zhí)行這個 bind 函數竭鞍，【只執(zhí)行一次】
// 在元素 剛綁定了指令的時候板惑，還沒有 插入到 DOM中去，這時候偎快，調用 focus 方法沒有作用
// 因為冯乘，一個元素，只有插入DOM之后晒夹，才能獲取焦點
// el.focus()
},
inserted: function (el) { // inserted 表示元素 插入到DOM中的時候裆馒，會執(zhí)行 inserted 函數【觸發(fā)1次】
el.focus()
// 和JS行為有關的操作姊氓，最好在 inserted 中去執(zhí)行，放置 JS行為不生效
},
updated: function (el) { // 當VNode更新的時候喷好，會執(zhí)行 updated翔横， 【可能會觸發(fā)多次】
}
})
上方的代碼中，如果我們把el.focus()這行代碼寫在bind方法里梗搅，是沒有效果的（但不會報錯）禾唁。沒有效果是因為，在執(zhí)行到bind方法的時候无切，元素還沒有插入到dom中去荡短。
由此可以看看出：bind、inserted哆键、updated這三個鉤子函數的執(zhí)行時機不同掘托，且執(zhí)行的次數有區(qū)別。
（2）在指定的文本框上加``：
<input type="text" id="search" v-model="keywords" v-focus>
完整版代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="vue2.5.16.js"></script>
</head>
<body>
<div id="app">
搜索框：
<input type="text" id="search" v-model="name" v-focus>
</div>
<script>
//自定義全局指令 v-focus籍嘹，讓文本框自動獲取焦點
//參數1：指令的名稱闪盔。注意，在定義的時候噩峦，指令的名稱前面锭沟，不需要加 v- 前綴；但是：在`調用`的時候识补，必須在指令名稱前 加上 v- 前綴
//參數2：是一個對象族淮，這個對象身上，有一些指令相關的函數凭涂，這些函數可以在特定的階段祝辣，執(zhí)行相關的操作
Vue.directive('focus', {
//在每個函數中，第一個參數切油，永遠是 el 蝙斜，表示 被綁定了指令的那個元素，這個 el 參數澎胡，是一個原生的JS對象（DOM對象）
bind: function (el) { // 每當指令綁定到元素上的時候孕荠，會立即執(zhí)行這個 bind 函數，【只執(zhí)行一次】
// 在元素 剛綁定了指令的時候攻谁，還沒有 插入到 DOM中去稚伍，這時候，調用 focus 方法沒有作用
// 因為戚宦，一個元素个曙，只有插入DOM之后，才能獲取焦點
// el.focus()
},
inserted: function (el) { // inserted 表示元素 插入到DOM中的時候受楼，會執(zhí)行 inserted 函數【觸發(fā)1次】
el.focus()
// 和JS行為有關的操作垦搬，最好在 inserted 中去執(zhí)行呼寸，防止 JS行為不生效
},
updated: function (el) { // 當VNode更新的時候，會執(zhí)行 updated猴贰， 【可能會觸發(fā)多次】
}
})
new Vue({
el: '#app',
data: {
name: 'smyhvae'
}
})
</script>
</body>
</html>
自定義全局指令：使用鉤子函數的第二個binding參數拿到傳遞的值
舉例2：設置DOM元素的color樣式
參考舉例1中的寫法对雪，我們可能會這樣給DOM元素設置樣式：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="vue2.5.16.js"></script>
</head>
<body>
<div id="app">
搜索框：
<input type="text" id="search" v-model="name" v-color>
</div>
<script>
//自定義全局指令 v-color：設置DOM元素的color屬性
Vue.directive('color', {
bind: function (el) { // 每當指令綁定到元素上的時候，會立即執(zhí)行這個 bind 函數糟趾，【只執(zhí)行一次】
el.style.color = 'red';
},
inserted: function (el) { // inserted 表示元素 插入到DOM中的時候慌植，會執(zhí)行 inserted 函數【觸發(fā)1次】
// 和JS行為有關的操作，最好在 inserted 中去執(zhí)行义郑，防止 JS行為不生效
//el.focus()
},
updated: function (el) { // 當VNode更新的時候蝶柿，會執(zhí)行 updated， 【可能會觸發(fā)多次】
}
})
new Vue({
el: '#app',
data: {
name: ''
}
})
</script>
</body>
</html>
如上方代碼所示非驮，我們自定義了一個指令v-color交汤，然后在input標簽中用上了這個指令，就給元素設置了color屬性劫笙。但是這個代碼有個弊端是：color的屬性值在定義指令的時候芙扎，被寫死了。如何完善呢填大？我們可以在DOM元素中傳參戒洼。一起來看看。
代碼如下：【薦】
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="vue2.5.16.js"></script>
</head>
<body>
<div id="app">
搜索框1：
<input type="text" id="search" v-model="name" v-color="'green'">
</div>
<script>
//自定義全局指令 v-color：設置DOM元素的color屬性
Vue.directive('color', {
// 樣式允华，只要通過指令綁定給了元素圈浇，不管這個元素有沒有被插入到頁面中去，這個元素肯定有了一個內聯的樣式
// 將來元素肯定會顯示到頁面中靴寂，這時候磷蜀，瀏覽器的渲染引擎必然會解析樣式，應用給這個元素
// 意思是說百炬，我們可以把樣式的代碼寫到bind中去（即使這個時候褐隆，dom元素還沒有被創(chuàng)建）
bind: function (el, binding) { // 每當指令綁定到元素上的時候，會立即執(zhí)行這個 bind 函數剖踊，【只執(zhí)行一次】
console.log(binding.name); //打印結果：color
console.log(binding.value); //打印結果：green
console.log(binding.expression); //'green'
el.style.color = binding.value// 通過bining拿到v-color中傳遞過來的值
},
inserted: function (el) { // inserted 表示元素 插入到DOM中的時候庶弃，會執(zhí)行 inserted 函數【觸發(fā)1次】
// 和JS行為有關的操作，最好在 inserted 中去執(zhí)行德澈，防止 JS行為不生效
//el.focus()
},
updated: function (el) { // 當VNode更新的時候虫埂，會執(zhí)行 updated， 【可能會觸發(fā)多次】
}
})
new Vue({
el: '#app',
data: {
name: 'smyhvae'
}
})
</script>
</body>
</html>
上方代碼中,bind方法里傳遞的第二個參數binding圃验，可以拿到DOM元素中v-color里填的值。注意缝呕，v-color="'green'"澳窑，這里面寫的是字符串常量斧散；如果去掉單引號，就成了變量摊聋，不是我們想要的鸡捐。
自定義全局指令的簡寫形式：
在很多時候，你可能想在 bind 和 update 時觸發(fā)相同行為麻裁，而不關心其它的鉤子箍镜。比如上面的代碼中，我們可以寫成簡寫形式：
Vue.directive('color', function (el, binding) { //注意煎源，這個function等同于把代碼寫到了 bind 和 update 中去
el.style.color = binding.value
})
自定義私有指令
自定義私有指令：在某一個 vue 對象內部自定義的指令稱之為私有指令色迂。這種指令只有在當前vue對象的el指定的監(jiān)管區(qū)域有用。
代碼舉例：（設置文字的font-weight屬性）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="vue2.5.16.js"></script>
</head>
<body>
<div id="app">
<span v-fontweight="600">生命壹號</span>
</div>
<script>
new Vue({
el: '#app',
data: {
name: 'smyhvae'
},
//自定義私有指令
directives: {
'fontweight': {
bind: function (el, binding) {
el.style.fontWeight = binding.value;
}
}
}
})
</script>
</body>
</html>
注意手销， el.style.fontWeight設置屬性值歇僧，至少要600，否則看不到加粗的效果锋拖。
自定義私有指令的簡寫形式：
在很多時候诈悍，你可能想在 bind 和 update 時觸發(fā)相同行為，而不關心其它的鉤子兽埃。比如上面的代碼中侥钳，我們可以寫成簡寫形式：
//自定義私有指令（簡寫形式）
directives: {
'fontweight': function (el, binding) { //注意，這個function等同于把代碼寫到了 bind 和 update 中去
el.style.fontWeight = binding.value;
}
}
