<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<title>Title
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js">
<div id="app">
<p><input type="text" v-model="msg" @keyup.f2="alert">
<p><input type="text" v-focus v-color>
//自定义按键修饰符：f2是自定义的名称，113是键盘上自定义的键盘码的码值
Vue.config.keyCodes.f2=113;
//自定义指令：使用Vue.directive()定义全局指令
//1.参数1：指令的名称
// 在定义的时候，指令的名称前面，不需要加 v- 前缀
// 在调用的时候，必须在指令名称前加上 v- 前缀来进行调用
//2.参数2：对象，这个对象上，有一些指令的相关函数，这些函数可以在特定的阶段执行相关的操作
Vue.directive('focus',{
bind:function(el){//每当指令绑定到元素上的时候，会立即执行这个bind函数，只执行一次
//注意：在每个函数中，第一个参数，永远是el，表示被绑定了指令的那个元素，这个el参数，是一个原生的js对象
//在元素刚绑定了指令的时候，还没有插入到DOM中去，这时候调用focus方法没有作用
//因为，一个元素，只有插入DOM之后，才能获取焦点
//el.focus();
},
inserted:function (el) {//inserted表示元素插入到DOM中会执行inserted函数，只执行一次
el.focus();
},
updated:function(){//当组件更新的时候，会执行updated，可能会触发多次
}
});
Vue.directive('color',{
//样式只要通过指令绑定给了元素，不管这个元素有没有插入到页面中去，这个元素肯定有了一个内联的样式
bind:function(el){
el.style.color='red'
}
})
let vm=new Vue({
el:'#app',
data:{
msg:'我是想绑定键盘事件的input'
},
methods:{
alert(){
alert("触发了");
}
}
})
</html>
