自定義指令
自定義指令基本就是用來操作DOM的,雖然官方推薦數(shù)據(jù)驅(qū)動視圖,有時候還是需要自定義指令來操作DOM,指令可復(fù)用.
自定義指令郎楼，可以全局和局部注冊裸影，
1. 全局自定義指令
全局自定義指令需要使用 全局 API
Vue.directive( id, [definition] )definition 可以是 函數(shù)和 json對象
自定義指令有5個鉤子函數(shù)
Vue.directive('hello',{
bind(el,binding){
alert('只調(diào)用一次,指令第一次綁定到元素時調(diào)用，可執(zhí)行初始化操作')
},
inserted(){
alert('被綁定元素插入DOM時調(diào)用')
},
update(){
alert('被綁定元素所在模板更新時調(diào)用')
},
componentUpdated(){
alert('被綁定元素所在模板更新完成后調(diào)用')
},
unbind(){
alert('只調(diào)用一次指令與元素解綁時調(diào)用')
}
})
鉤子函數(shù)參數(shù)
- el：指令所綁定的元素随闽，可以用來直接操作 DOM 质况。
- binding：一個對象包含以下屬性
- name：指令名斧账，不包括 v- 前綴
- rawName：指令名 包含 v-
- value：指令綁定值 比如v-hello='name' 綁定值就是vue data對象里 的name值
- expression：指令綁定值的字符串形式
- arg：傳給指令的參數(shù) v-hello:aaa='name' aaa就是參數(shù) aaa是自己定義的
- modifiers：一個包含修飾符的對象例如：v-my-directive.foo.bar 中，修飾符對象為 { foo: true, bar: true }
注意： val 指令綁定值 只能是 vue實例下 data對象的數(shù)據(jù) arg 參數(shù)是自己隨便定義的
自定義指令語法簡寫
以上自定義指令語法 有些繁瑣 vue.directive() 允許你傳入一個函數(shù) 相當(dāng)于 bind 和 update
// 注冊 (指令函數(shù))
Vue.directive('my-directive', function () {
// 這里將會被 `bind` 和 `update` 調(diào)用
})
實例
- 使用自定義指令做一個輸入框自定聚焦
<div id="app">
<input v-focus type="" name="" id="" value="" />
</div>
Vue.directive('focus',{
//被綁定元素插入DOM時觸發(fā)
inserted:function(el){
el.focus()
}
})
new Vue({
el:'#app',
})
- 使用自定義指令做元素拖拽
<div id="app">
<div class="box bgred lt0" v-drag></div>
<div class="box bgblue rt0" v-drag></div>
</div>
Vue.directive('drag',function(el){
el.onmousedown=function(e){
var w = e.clientX - el.offsetLeft
var h = e.clientY - el.offsetTop
document.onmousemove=function(e){
var x = e.clientX-w;
var y = e.clientY-h;
el.style.left=x+"px"
el.style.top=y+'px'
};
document.onmouseup=function(){
document.onmousemove=null;
document.onmouseup =null
}
}
})
var vm = new Vue({
el:'#app',
})
