說明
今天介紹vue自定義指令。vue
指令功能是提供給用戶操作dome
的,雖然很多時候,我們可以通過選擇器是操作dome
,但是當dome
狀態改變是,我們很難捕獲,所以vue不建議用戶直接操作dome
,而是使用指令的形式。
vue
內置了很多指令,v-model,v-if,v-show,v-text,v-html
等。某些時候這些指令不能滿足我們,我們可以通過自定義指令來實現我們想要的指令。
指令註冊
指令可以全局註冊和局部註冊,全局註冊可以在整個項目使用,局部註冊,只能在當前.vue
頁面使用。下面介紹一下注冊方式:
<!doctype html>
<html lang="en">
<head>
<title>vue指令測試</title>
</head>
<body>
<div id="app"></div>
</body>
<!-- 開發環境版本,包含了有幫助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
//這是全局引入
//Vue.directive('指令名稱','指令對象');
var app = new Vue({
el: '#app',
data: {
message: 'test!'
},
//這裏局部引入
directives:{
'指令名稱':'指令配置'
}
})
</script>
</html>
直接將指令掛載到vue對象上面,責爲全局引入,放到組件裏面的
directives
對象上,則爲局部引入。
指令各生命週期的鉤子
Vue.directive('lang', { //五個註冊指令的鉤子函數
bind: function() { //只調用一次,指令被綁定
console.log('1 - bind');
},
inserted: function() { //當被綁定的元素插入到 DOM 中時……
console.log('2 - inserted');
},
update: function() { //所在組件的 VNode 更新時調用,此時數據不一定更新
console.log('3 - update');
},
componentUpdated: function() { //指令所在組件的 VNode 及其子 VNode 全部更新後調用
console.log('4 - componentUpdated');
},
unbind: function() { //只調用一次,指令與元素解綁時調用
console.log('5 - bind');
}
})
可以看到,指令一開始會調用
bind
,在指令被綁定到dome
時,會調用inserted
,在有節點更新時,會調用update
,節點更新完畢時,會調用componentUpdated
,解除綁定時unbind被調用。下面我們實現一個指令,來具體講解。
指令實現,一個數字驗證輸入的指令
很多時候,輸入框內只能輸入正整數,比如說年齡,手機號等,如果自己實現校驗則比較麻煩,我們可以通過指令,操作輸入框,將用戶輸入的非數字字符給去掉。下面先引入自定義指令numCheck
<!doctype html>
<html lang="en">
<head>
<title>vue指令測試</title>
</head>
<body>
<div id="app">
<input type="text" v-model="age" placeholder="請輸入年齡" v-num-check="changeAge">
<button onclick='unbind()'>解綁</button>
</div>
</body>
<!-- 開發環境版本,包含了有幫助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var vm;
function unbind(){
vm.$destroy();
}
//這是全局引入
//Vue.directive('指令名稱','指令對象');
//指令參數說明
let args = {
el:'指令所綁定的元素,可以用來直接操作 DOM ',
binding:{
name:'指令名,不包括 v- 前綴。',
value:'指令的綁定值,例如:v-my-directive="1 + 1" 中,綁定值爲 2。',
oldValue:'指令綁定的前一個值,僅在 update 和 componentUpdated 鉤子中可用。無論值是否改變都可用。',
expression:"字符串形式的指令表達式。例如 v-my-directive='1 + 1' 中,表達式爲 '1 + 1'",
arg:"傳給指令的參數,可選。例如 v-my-directive:foo 中,參數爲 'foo'",
modifiers:"一個包含修飾符的對象。例如:v-my-directive.foo.bar 中,修飾符對象爲 { foo: true, bar: true }。",
},
vnode:"Vue 編譯生成的虛擬節點。",
oldVnode:"上一個虛擬節點"
}
var numCheckObj = {
bind: function(el,binding) { //被綁定
console.log('1 - bind');
binding.value(el.value.replace(/[^0-9.]/g, ''))
},
inserted: function() { //綁定到節點
console.log('2 - inserted');
},
update: function(el) { //組件更新
console.log('before value ' + el.value)
console.log('3 - update');
},
componentUpdated: function(el, binding, vnode) { //組件更新完成
console.log('4 - componentUpdated');
//替換掉非數字
binding.value(el.value.replace(/[^0-9.]/g, ''))
},
unbind: function() { //解綁
console.log('5 - bind');
}
}
vm = new Vue({
el: '#app',
data: {
age:-10,
message: 'Hello Vue!'
},
methods:{
//這裏需要改變data裏面的值,所以要添加一個回調
changeAge(val){
this.age = val;
}
},
//這裏局部引入
directives:{
'num-check':numCheckObj
}
})
</script>
</html>
可以看到,我們給指令
num-check
傳遞了一個方法,來修改我們的age
,當指令發現不符合規則是,會改變這個值,讓用戶看上去,這個框只能輸入數字。當我們改變輸入框的值,和銷燬實例是,可以看看控制檯打印。
運行效果:
自定義指令使用比較簡單,就講到這裏,所有的源碼,都可以在git:https://github.com/jackzhujie/vue-study.git上下載得到,想看更多文章,可以關注我的個人公衆號: