vue自定義指令是個非常有意思的存在，是乙個非常便利的功能。
今天突然想做一下拖拽div的功能，本來想直接寫到.vue檔案中然後想到其實拖拽是針對某個div，於是就想到自定義指令。
vue
template中
新建drag.js檔案這是pc端的拖拽方案
import vue from 'vue'
vue.directive('drag',;
document.onmouseup = (e) => ;};}
})
新建dragmove.js檔案這是移動端的拖拽方案
import vue from 'vue'
vue.directive('dragmove',else
disx = touch.clientx - el.offsetleft;//滑鼠位置x減去元素距離左邊距離（滑鼠到元素左邊的距離）
disy = touch.clienty - el.offsettop;//滑鼠位置y減去距離頂部距離（滑鼠到元素頂部的高度）
}el.ontouchmove = (e)=>else
//用滑鼠的位置減去滑鼠相對元素的位置，得到元素的位置
let left = touch.clientx - disx;
let top = touch.clienty - disy;
//移動當前元素
el.style.left = left + 'px';
el.style.top = top + 'px';
e.preventdefault();//阻止頁面的滑動預設事件
};el.ontouchend = (e) => ;
}})
vue中的指令 自定義指令
之前我們已經了解過了內建指令，這些內建指令可以滿足我們學大部分的需求，但是在某些特殊情況下我們要對dom進行操作，這個時候我們就需要用到自定義智力了。自定義指令只有在註冊之後才能使用，兩種註冊方式 1.全域性註冊，這種定義方式可以在全域性進行使用 第一次引數是指令id，第二個引數是乙個定義物件或函式...
vue中自定義指令
鉤子函式 mounted 鉤子函式 會自動觸發的函式 生命週期 乙個例項從建立到銷毀的整個過程 vue中對元素進行識別 ref 相當於元素的id，可以使用ref為元素設定乙個唯一的標識 編號 type text v model newcar.id ref iidd this.ref s th is ...
vue中自定義指令
vue中的自定義指令分為全域性指令和私有指令 1.全域性指令 直接在vue身上繫結directive 其中directive有三個屬性 注意 自定義指令，在定義時不需要加v 字首，但是在繫結時，必須加上v 字首 doctype html en utf 8 viewport content width...