一、 v-on的按键修饰符
按键修饰符，通俗的来说就是监听键盘输入的事件， 在Vue 中允许为 v-on 在监听键盘事件时添加按键修饰符
| 修饰符 | 用途 |
| .enter | 当在输入框按下回车时触发 |
| .tab | 当按下tab时触发 |
| .delete | 当按下删除键（通常是键盘上的Delete键）时触发事件 |
| .esc | 当按下Escape键时触发事件 |
| .space | 当按下空格键时触发事件 |
| .up | 当按下上方向键时触发事件 |
| .down | 当按下下方向键时触发事件 |
| .left | 当按下左方向键时触发事件 |
| .right | 当按下右方向键时触发事件 |
| @keyup | 任意键盘键位松开时触发 |
比如说，
keyup指的是：键盘（任何键位）抬起时的监听事件.enter指的是：按enter键的按键修饰符，我们可以尝试将两个事件进行结合
@keyup.enter 案例
@keyup.enter="addData"
表示按住enter键后，执行addData()方法。全称是v-on:key.enter="addData"我们先获取到之前的一个案例代码，如下
<!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="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<style>
.table {
width: 800px;
margin: 20px auto;
border-collapse: collapse;
}
.table th {
background: #0094ff;
color: white;
font-size: 16px;
border: 1px solid black;
padding: 5px;
}
.table tr td {
text-align: center;
font-size: 16px;
padding: 5px;
border: 1px solid black;
}
.form {
width: 800px;
margin: 20px auto;
}
.form button {
margin-left: 10px;
}
</style>
</head>
<body>
<div id="app1">
<div class="form">
编号：
<input type="text" v-model="formData.id"> 名称：
<input type="text" v-model="formData.name">
<button v-on:click="addData">添加</button>
</div>
<table class="table">
<th>编号</th>
<th>名称</th>
<th>创建时间</th>
<th>操作</th>
<tr v-show="list.length == 0">
<td colspan="4">列表无数据</td>
</tr>
<tr v-for="item in list">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.ctime}}</td>
<!--绑定delete事件，根据括号里的参数进行删除-->
<td>
<a href="#" v-on:click="delData(item.id)">删除</a>
</td>
</tr>
</table>
</div>
<script>
var vm = new Vue({
el: '#app1',
data: {
list: [{ id: 1, name: '奔驰', ctime: new Date }, { id: 2, name: '大众', ctime: new Date }],
formData: {
id: 0,
name: ""
}
},
methods: {
addData: function () {
//将数据追加到list中
var p = { id: this.formData.id, name: this.formData.name, ctime: new Date() };
this.list.push(p);
//清空页面上的文本框中的数据
this.formData.id = 0;
this.formData.name = '';
}, //注意：方法之间用逗号隔开，这个逗号不要忘记了
//添加删除数据函数
delData: function (id) {
//提醒用户是否要删除数据
if (!confirm('是否要删除数据?')) {
//当用户点击的取消按钮的时候，应该阻断这个方法中的后面代码的继续执行
return;
}
//调用list.findIndex()方法根据传入的id获取到这个要删除数据的索引值
var index = this.list.findIndex(function (item) {
return item.id == id
});
//调用方法：list.splice(待删除的索引, 删除的元素个数)
this.list.splice(index, 1);
}
}
});
</script>
</body>
</html> 
之前我们如果想要添加信息，填完表后需要单击添加按钮，如果我们想要直接按回车就能完成添加，要做一些改变
<input type="text" v-model="formData.name" @keyup.enter="addData">修改后代码
<!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="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<style>
.table {
width: 800px;
margin: 20px auto;
border-collapse: collapse;
}
.table th {
background: #0094ff;
color: white;
font-size: 16px;
border: 1px solid black;
padding: 5px;
}
.table tr td {
text-align: center;
font-size: 16px;
padding: 5px;
border: 1px solid black;
}
.form {
width: 800px;
margin: 20px auto;
}
.form button {
margin-left: 10px;
}
</style>
</head>
<body>
<div id="app1">
<div class="form">
编号：
<input type="text" v-model="formData.id"> 名称：
<input type="text" v-model="formData.name" @keyup.enter="addData">
<button v-on:click="addData">添加</button>
</div>
<table class="table">
<th>编号</th>
<th>名称</th>
<th>创建时间</th>
<th>操作</th>
<tr v-show="list.length == 0">
<td colspan="4">列表无数据</td>
</tr>
<tr v-for="item in list">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.ctime}}</td>
<!--绑定delete事件，根据括号里的参数进行删除-->
<td>
<a href="#" v-on:click="delData(item.id)">删除</a>
</td>
</tr>
</table>
</div>
<script>
var vm = new Vue({
el: '#app1',
data: {
list: [{ id: 1, name: '奔驰', ctime: new Date }, { id: 2, name: '大众', ctime: new Date }],
formData: {
id: 0,
name: ""
}
},
methods: {
addData: function () {
//将数据追加到list中
var p = { id: this.formData.id, name: this.formData.name, ctime: new Date() };
this.list.push(p);
//清空页面上的文本框中的数据
this.formData.id = 0;
this.formData.name = '';
}, //注意：方法之间用逗号隔开，这个逗号不要忘记了
//添加删除数据函数
delData: function (id) {
//提醒用户是否要删除数据
if (!confirm('是否要删除数据?')) {
//当用户点击的取消按钮的时候，应该阻断这个方法中的后面代码的继续执行
return;
}
//调用list.findIndex()方法根据传入的id获取到这个要删除数据的索引值
var index = this.list.findIndex(function (item) {
return item.id == id
});
//调用方法：list.splice(待删除的索引, 删除的元素个数)
this.list.splice(index, 1);
}
}
});
</script>
</body>
</html>二、自定义修饰符
如果我们直接在代码的
<input>标签里写@keyup.f2="addData"，那么，按住「F2键」后，是没有效果的，因为「F2键」不是内置的按键修饰符（如果F2不能验证，你可以试一下F7） 另外我们知道，每个按键都有一个键盘码，如下
1、键盘码
keyCode 8 = BackSpace BackSpace
keyCode 9 = Tab Tab
keyCode 12 = Clear
keyCode 13 = Enter
keyCode 16 = Shift_L
keyCode 17 = Control_L
keyCode 18 = Alt_L
keyCode 19 = Pause
keyCode 20 = Caps_Lock
keyCode 27 = Escape Escape
keyCode 32 = space
keyCode 33 = Prior
keyCode 34 = Next
keyCode 35 = End
keyCode 36 = Home
keyCode 37 = Left
keyCode 38 = Up
keyCode 39 = Right
keyCode 40 = Down
keyCode 41 = Select
keyCode 42 = Print
keyCode 43 = Execute
keyCode 45 = Insert
keyCode 46 = Delete
keyCode 47 = Help
keyCode 48 = 0 equal braceright
keyCode 49 = 1 exclam onesuperior
keyCode 50 = 2 quotedbl twosuperior
keyCode 51 = 3 section threesuperior
keyCode 52 = 4 dollar
keyCode 53 = 5 percent
keyCode 54 = 6 ampersand
keyCode 55 = 7 slash braceleft
keyCode 56 = 8 parenleft bracketleft
keyCode 57 = 9 parenright bracketright
keyCode 65 = a A
keyCode 66 = b B
keyCode 67 = c C
keyCode 68 = d D
keyCode 69 = e E EuroSign
keyCode 70 = f F
keyCode 71 = g G
keyCode 72 = h H
keyCode 73 = i I
keyCode 74 = j J
keyCode 75 = k K
keyCode 76 = l L
keyCode 77 = m M mu
keyCode 78 = n N
keyCode 79 = o O
keyCode 80 = p P
keyCode 81 = q Q at
keyCode 82 = r R
keyCode 83 = s S
keyCode 84 = t T
keyCode 85 = u U
keyCode 86 = v V
keyCode 87 = w W
keyCode 88 = x X
keyCode 89 = y Y
keyCode 90 = z Z
keyCode 96 = KP_0 KP_0
keyCode 97 = KP_1 KP_1
keyCode 98 = KP_2 KP_2
keyCode 99 = KP_3 KP_3
keyCode 100 = KP_4 KP_4
keyCode 101 = KP_5 KP_5
keyCode 102 = KP_6 KP_6
keyCode 103 = KP_7 KP_7
keyCode 104 = KP_8 KP_8
keyCode 105 = KP_9 KP_9
keyCode 106 = KP_Multiply KP_Multiply
keyCode 107 = KP_Add KP_Add
keyCode 108 = KP_Separator KP_Separator
keyCode 109 = KP_Subtract KP_Subtract
keyCode 110 = KP_Decimal KP_Decimal
keyCode 111 = KP_Divide KP_Divide
keyCode 112 = F1
keyCode 113 = F2
keyCode 114 = F3
keyCode 115 = F4
keyCode 116 = F5
keyCode 117 = F6
keyCode 118 = F7
keyCode 119 = F8
keyCode 120 = F9
keyCode 121 = F10
keyCode 122 = F11
keyCode 123 = F12
keyCode 124 = F13
keyCode 125 = F14
keyCode 126 = F15
keyCode 127 = F16
keyCode 128 = F17
keyCode 129 = F18
keyCode 130 = F19
keyCode 131 = F20
keyCode 132 = F21
keyCode 133 = F22
keyCode 134 = F23
keyCode 135 = F24
keyCode 136 = Num_Lock
keyCode 137 = Scroll_Lock
keyCode 187 = acute grave
keyCode 188 = comma semicolon
keyCode 189 = minus underscore
keyCode 190 = period colon
keyCode 192 = numbersign apostrophe
keyCode 210 = plusminus hyphen macron
keyCode 211 =
keyCode 212 = copyright registered
keyCode 213 = guillemotleft guillemotright
keyCode 214 = masculine ordfeminine
keyCode 215 = ae AE
keyCode 216 = cent yen
keyCode 217 = questiondown exclamdown
keyCode 218 = onequarter onehalf threequarters
keyCode 220 = less greater bar
keyCode 221 = plus asterisk asciitilde
keyCode 227 = multiply division
keyCode 228 = acircumflex Acircumflex
keyCode 229 = ecircumflex Ecircumflex
keyCode 230 = icircumflex Icircumflex
keyCode 231 = ocircumflex Ocircumflex
keyCode 232 = ucircumflex Ucircumflex
keyCode 233 = ntilde Ntilde
keyCode 234 = yacute Yacute
keyCode 235 = oslash Ooblique
keyCode 236 = aring Aring
keyCode 237 = ccedilla Ccedilla
keyCode 238 = thorn THORN
keyCode 239 = eth ETH
keyCode 240 = diaeresis cedilla currency
keyCode 241 = agrave Agrave atilde Atilde
keyCode 242 = egrave Egrave
keyCode 243 = igrave Igrave
keyCode 244 = ograve Ograve otilde Otilde
keyCode 245 = ugrave Ugrave
keyCode 246 = adiaeresis Adiaeresis
keyCode 247 = ediaeresis Ediaeresis
keyCode 248 = idiaeresis Idiaeresis
keyCode 249 = odiaeresis Odiaeresis
keyCode 250 = udiaeresis Udiaeresis
keyCode 251 = ssharp question backslash
keyCode 252 = asciicircum degree
keyCode 253 = 3 sterling
keyCode 254 = Mode_switch通过查阅，我们知道了「F2键」的键盘码为
113，那代码可以这样写：（按住F2键后，执行 addData 方法
<input type="text" v-model="formData.name" @keyup.113="addData">2、自定义全局按键修饰符
虽然键盘码很全，但是不好记呀。于是，接下来，我们给键盘码定义别名
<input type="text" v-model="formData.name" @keyup.f2="addData">
<script>
//自定义全局按键修饰符
Vue.config.keyCodes.f2 = 113; 添加
var vm = new Vue({全量代码
<!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="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<style>
.table {
width: 800px;
margin: 20px auto;
border-collapse: collapse;
}
.table th {
background: #0094ff;
color: white;
font-size: 16px;
border: 1px solid black;
padding: 5px;
}
.table tr td {
text-align: center;
font-size: 16px;
padding: 5px;
border: 1px solid black;
}
.form {
width: 800px;
margin: 20px auto;
}
.form button {
margin-left: 10px;
}
</style>
</head>
<body>
<div id="app1">
<div class="form">
编号：
<input type="text" v-model="formData.id"> 名称：
<input type="text" v-model="formData.name" @keyup.f2="addData">
<button v-on:click="addData">添加</button>
</div>
<table class="table">
<th>编号</th>
<th>名称</th>
<th>创建时间</th>
<th>操作</th>
<tr v-show="list.length == 0">
<td colspan="4">列表无数据</td>
</tr>
<tr v-for="item in list">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.ctime}}</td>
<!--绑定delete事件，根据括号里的参数进行删除-->
<td>
<a href="#" v-on:click="delData(item.id)">删除</a>
</td>
</tr>
</table>
</div>
<script>
//自定义全局按键修饰符
Vue.config.keyCodes.f2 = 113;
var vm = new Vue({
el: '#app1',
data: {
list: [{ id: 1, name: '奔驰', ctime: new Date }, { id: 2, name: '大众', ctime: new Date }],
formData: {
id: 0,
name: ""
}
},
methods: {
addData: function () {
//将数据追加到list中
var p = { id: this.formData.id, name: this.formData.name, ctime: new Date() };
this.list.push(p);
//清空页面上的文本框中的数据
this.formData.id = 0;
this.formData.name = '';
}, //注意：方法之间用逗号隔开，这个逗号不要忘记了
//添加删除数据函数
delData: function (id) {
//提醒用户是否要删除数据
if (!confirm('是否要删除数据?')) {
//当用户点击的取消按钮的时候，应该阻断这个方法中的后面代码的继续执行
return;
}
//调用list.findIndex()方法根据传入的id获取到这个要删除数据的索引值
var index = this.list.findIndex(function (item) {
return item.id == id
});
//调用方法：list.splice(待删除的索引, 删除的元素个数)
this.list.splice(index, 1);
}
}
});
</script>
</body>
</html>这样我们在添加信息的时候就能通过按键f2来添加数据了
三、自定义全局指令
Vue.directive()1、让指定文本框自动获取焦点
//把下面这段扔到<script> 区域内 new vue的上面
Vue.directive('focus', {
bind: function (el) {
},
inserted: function (el) {
el.focus()
},
updated: function (el) {
}
})说明
//自定义全局指令 v-focus：让文本框自动获取焦点
Vue.directive //创建全局指令
'focus' //指令的名称, 在定义时不需要添加v-，但是在调用时需要加v- 也就是v-focus
bind: function (el)
//在函数中第一个参数一定是el, 他表示被绑定了指令的元素
// 每当指令绑定到元素上的时候，会立即执行这个 bind 函数，【只执行一次】
// 在元素 刚绑定了指令的时候，还没有 插入到 DOM中去，这时候，调用 focus 方法没有作用
// 因为，一个元素，只有插入DOM之后，才能获取焦点
// el.focus()
inserted: function (el) {
// inserted 表示元素 插入到DOM中的时候，会执行 inserted 函数【触发1次】
el.focus() // 和JS行为有关的操作，最好在 inserted 中去执行，放置 JS行为不生效
updated: function (el) { // 当VNode更新的时候，会执行 updated， 【可能会触发多次】
上方的代码中，如果我们把
el.focus()这行代码写在bind方法里，是没有效果的（但不会报错）。没有效果是因为，在执行到bind方法的时候，元素还没有插入到dom中去由此可以看看出：
bind、inserted、updated这三个钩子函数的执行时机不同，且执行的次数有区别
<!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="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
</head>
<body>
<div id="app1">
搜索框：
<input type="text" id="search" v-model="name" >
<input type="text" id="search" v-model="name" v-focus>
</div>
<script>
Vue.directive('focus', {
bind: function (el) {
},
inserted: function (el) {
el.focus()
},
updated: function (el) {
}
})
new Vue({
el: '#app1',
data: {
name: 'smyhvae'
}
})
</script>
</body>
</html>
通过访问来看，当页面刷新时默认会去聚焦我们配置了全局指令的位置
2、设置DOM元素的color样式
<!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="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
</head>
<body>
<div id="app1">
搜索框1：
<input type="text" id="search" v-model="name" v-color="'green'">
</div>
<script>
Vue.directive('color', {
// 样式，只要通过指令绑定给了元素，不管这个元素有没有被插入到页面中去，这个元素肯定有了一个内联的样式
// 将来元素肯定会显示到页面中，这时候，浏览器的渲染引擎必然会解析样式，应用给这个元素
// 意思是说，我们可以把样式的代码写到bind中去（即使这个时候，dom元素还没有被创建）
bind: function (el, binding) { // 每当指令绑定到元素上的时候，会立即执行这个 bind 函数，【只执行一次】
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中的时候，会执行 inserted 函数【触发1次】
// 和JS行为有关的操作，最好在 inserted 中去执行，防止 JS行为不生效
//el.focus()
},
updated: function (el) { // 当VNode更新的时候，会执行 updated， 【可能会触发多次】
}
})
new Vue({
el: '#app1',
data: {
name: 'smyhvae'
}
})
</script>
</body>
</html>
3、 自定义全局指令的简写形式
在很多时候，你可能想在 bind 和 update 时触发相同行为，而不关心其它的钩子。比如上面的代码中，我们可以写成简写形式：
Vue.directive('color', function (el, binding) {
//注意，这个function等同于把代码写到了 bind 和 update 中去
el.style.color = binding.value
})四、自定义私有指令
在某一个 vue 对象内部自定义的指令称之为私有指令。这种指令只有在当前vue对象的el指定的监管区域有用
1、 设置文字的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="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
</head>
<body>
<div id="app1">
<span v-fontweight="600">今天又是美好的一天</span>
</div>
<script>
new Vue({
el: '#app1',
data: {
name: 'smyhvae'
},
//自定义私有指令
directives: {
'fontweight': {
bind: function (el, binding) {
el.style.fontWeight = binding.value;
}
}
}
})
</script>
</body>
</html>
使用局部指令，修改了文本的字体宽度
2、自定义私有指令的简写形式
在很多时候，你可能想在 bind 和 update 时触发相同行为，而不关心其它的钩子。比如上面的代码中，我们可以写成简写形式
//自定义私有指令（简写形式）
directives: {
'fontweight': function (el, binding) { //注意，这个function等同于把代码写到了 bind 和 update 中去
el.style.fontWeight = binding.value;
}
}
![合并两个有序链表[简单]](https://img-blog.csdnimg.cn/direct/c0753a9444ad47d1a1f9af1ce85ab8f7.png)
![深入理解强化学习——马尔可夫决策过程：蒙特卡洛方法-[基础知识]](https://img-blog.csdnimg.cn/direct/310f4651515642c7b292381b818fa2c0.png)