vue.js_06_vue.js的自定义指令和自定义键盘修饰符

1.全局的自定义指令

实现：当页面刷新时，光标聚焦到搜索框中

　　　　　　　　　　　　<label>
                        搜索:
                        <input type="text" class="form-control" v-model="keywords" v-getfocus/>
                    </label>

<script>
            //参数1：指令的名字 在定义时 指令之前不需要加上 v- 的前缀，调用的时候需要加上 v-
            Vue.directive('getfocus', {
                //el表示被绑定的那个元素对象
                bind: function(el) { //没当指令绑定到元素上时，会立即执行这个bind函数，只执行一次
                    //el.focus()
                },
                inserted: function(el) { //表示元素插入到 DOM中的时候，会执行inserted函数，只执行一次
                    //只用当一个元素插入DOM之后，才能获取焦点
                    el.focus()

                },
                updated: function(el) { //当VNode跟新的收，会执行updated，可以多次触发

                }
            });

        </script>

2.私有自定义指令

实现：改变字体和颜色

<h1 v-color="'red'" v-fontsize="100">我是私有的自定义指令</h1>

<script>
            var vm = new Vue({
                el: '#app',
                data: {},
                methods: {
                directives: { //自定义私有指令
                    'color': {
                        bind: function(el, binding) {
                            el.style.color = binding.value

                        }
                    },
                    'fontsize': function(el, binding) {//function等同于把代码写到bind和update中去
                        el.style.fontSize =parseInt(binding.value) +'px'

                    }
                }
            });
        </script>

3.自定义键盘修饰符

Vue.js定义好了的

.enter　　.tab　　.delete (捕获 “删除” 和 “退格” 键)　　.esc　　.space　　.up　　.down　　.left　　.right 　　.ctrl　　.alt　　.shift

为定义的修饰符需要自己定义

　　　　　　　　　　　　 <label>
                        Name:
                        <input type="text" class="form-control" v-model="name" @keyup.113="add()"/>
                    </label>

//自定义键盘修饰符F2
Vue.config.keyCodes.f2 = 113;

ey	Code
backspace	8
tab	9
enter	13
shift	16
ctrl	17
alt	18
pause/break	19
caps lock	20
escape	27
page up	33
page down	34
end	35
home	36
left arrow	37
up arrow	38
right arrow	39
down arrow	40
insert	45
delete	46
0	48
1	49
2	50
3	51
4	52
5	53
6	54
7	55
8	56
9	57
a	65
b	66
c	67
d	68

Key	Code
e	69
f	70
g	71
h	72
i	73
j	74
k	75
l	76
m	77
n	78
o	79
p	80
q	81
r	82
s	83
t	84
u	85
v	86
w	87
x	88
y	89
z	90
left window key	91
right window key	92
select key	93
numpad 0	96
numpad 1	97
numpad 2	98
numpad 3	99
numpad 4	100
numpad 5	101
numpad 6	102
numpad 7	103

Key	Code
numpad 8	104
numpad 9	105
multiply	106
add	107
subtract	109
decimal point	110
divide	111
f1	112
f2	113
f3	114
f4	115
f5	116
f6	117
f7	118
f8	119
f9	120
f10	121
f11	122
f12	123
num lock	144
scroll lock	145
semi-colon	186
equal sign	187
comma	188
dash	189
period	190
forward slash	191
grave accent	192
open bracket	219
back slash	220
close braket	221
single quote	222