Vue之自定义键盘修饰符、自定义指令

1、键盘修饰符

　　@keyup.enter="方法（）"

　　//上方是通过enter键进行操作

Vue内定义了一些按键别名：

• 1. .enter
  2. .tab
  3. .delete
  4. .esc
  5. .space
  6. .up
  7. .down
  8. .right
  9. .left

自定义按键别名：

　　Vue.config.keyCode.按键名 = 键码

1、 Vue.config.keyCodes.f2 = 113;

　　

2、自定义指令

分两种：全局定义和私有定义

1、全局定义指令

　　

 1         // 指令的名字
 2         // 指令的配置  bind 指令更和dom绑定的时候   inserted 插入到页面之后  update 更新的时候
 3         Vue.directive("focus", {
 4             // el绑定的dom
 5             // binding 指令的进本信息
 6             bind(el, binding) {
 7                 console.log(11);
 8             },
 9             inserted(el, binding) {
10                 console.log(222);
11                 // dom渲染之后才执行
12                 el.focus();
13             },
14             update(el, binding) {
15                 console.log(33);
16             }
17         })

 

2、私有定义指令

　　binding指令的基本信息：　

• arg:传给指令的参数　例如：  red 和blue 是参数
  
  v-bg-Color:red:blue.bgcolor="index"
• def:三个阶段
• expression：字符串形式的指令表达式    例如：index
• modifiers:　指令的修饰符    .bgcolor=true
• name:指令名  (不带v-)
• rawName:指令完整名 （带v-）
• value :指令的绑定值　　   感觉就是Index！！！　　　

 1             // 定义私有指令
 2             // key是过滤器的名字
 3             // value是处理函数
 4             directives: {
 5                 bgColor: {
 6                     bind(el, binding) {
 7 
 8                         let colors = binding.arg.split(":");
 9                         if (binding.modifiers.color) {
10                             el.style.color = binding.value % 2 ? colors[0] : colors[1]
11                         } else if (binding.modifiers.bgcolor) {
12                             el.style.backgroundColor = binding.value % 2 ? colors[0] : colors[1]
13                         }
14                     },
15                     inserted() {
16 
17                     },
18                     update() {
19 
20                     }
21                 }
22             }