鍵盤修飾符以及自定義鍵盤修飾符
1.x中自定義鍵盤修飾符【瞭解即可】
Vue.directive('on').keyCodes.f2 = 113;
2.x中自定義鍵盤修飾符
- 通過
Vue.config.keyCodes.名稱 = 按鍵值來自定義案件修飾符的別名：
Vue.config.keyCodes.f2 = 113;
- 使用自定義的按鍵修飾符：
<input type="text" v-model="name" @keyup.f2="add">
自定義指令
- 自定義全局和局部的 自定義指令：
// 自定義全局指令 v-focus，爲綁定的元素自動獲取焦點：
Vue.directive('focus', {
inserted: function (el) { // inserted 表示被綁定元素插入父節點時調用
el.focus();
}
});
// 自定義局部指令 v-color 和 v-font-weight，爲綁定的元素設置指定的字體顏色 和 字體粗細：
directives: {
color: { // 爲元素設置指定的字體顏色
bind(el, binding) {
el.style.color = binding.value;
}
},
'font-weight': function (el, binding2) { // 自定義指令的簡寫形式，等同於定義了 bind 和 update 兩個鉤子函數
el.style.fontWeight = binding2.value;
}
}
- 自定義指令的使用方式：
<input type="text" v-model="searchName" v-focus v-color="'red'" v-font-weight="900">
Vue 1.x 中 自定義元素指令【已廢棄,瞭解即可】
Vue.elementDirective('red-color', {
bind: function () {
this.el.style.color = 'red';
}
});
使用方式：
<red-color>1232</red-color>