1）Vue.directive('自定義指令的名字',{
? ? ? ? ? ? inserted:function(el){? /*這個元素插入父元素的時候執(zhí)行的操作*/
? ? ? ? ? ? ? ? el.focus();
? ? ? ? ? ? }
})
2）
directives:{
? ? ? ? ? ? ? ? ? 'focus':{
? ? ? ? ? ? ? ? ? ? ? ? inserted:function(el){? /*這個元素插入父元素的時候執(zhí)行*/
? ? ? ? ? ? ? ? ? ? ? ? ? ? el.focus();
? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? }
鉤子函數(shù)
bind: 只調(diào)用一次，指令第一次綁定到元素時調(diào)用，用這個鉤子函數(shù)可以定義一個在綁定時執(zhí)行一次的初始化動作。
inserted: 被綁定元素插入父節(jié)點時調(diào)用。(bind與該生命周期鉤子函數(shù)作用十分類似)
update: 被綁定元素所在的模板更新時調(diào)用，而不論綁定值是否變化。通過比較更新前后的綁定值，可以忽略不必要的模板更新。
componentUpdated: 被綁定元素所在模板完成一次更新周期時調(diào)用。
簡寫形式
1）
Vue.directive('bgcolor',function(el,binding){
? ? ? ? ? ? el.style.background=binding.value;
})
2）directives:{
? ? ? ? ? ? ? /*簡寫 表示bind 和update的時候都會執(zhí)行*/
? ? ? ? ? ? ? ? ? ? 'color':function(el,binding){?
? ? ? ? ? ? ? ? ? ? ? ? el.style.color=binding.value;
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? }
例如下面將用自定義redirective實現(xiàn)拖拽：
<div id="out">
????<h1>拖拽</h1>
????<p class="a"></p>//能拖拽的標簽，我沒有寫它的樣式
????<p class="a"></p>
????<p class="a"></p>
</div>
</body>
<script>
// 這定義的是全局的自定義指令
// Vue.directive('move',function(a){
????????// a.onmousedown = function(e){
????????// var x = e.clientX;
????????// ? var y = e.clientY;
????????// document.onmousemove = function(){
????????????????????// }
????????????????// document.onmouseup = function(){
????????????????????// }
? ? ? ? ? ? ? ?// }
// })
var vm = new Vue({
????????????el:'#out',
????????????????data:{
},
methods:{
},
//direvtives:('自定義的名字'，function（e）{函數(shù)里面的參數(shù)指是dom元素本身
})
????????directives:('move',function(e){//局部? ? ?
????????????????????a.onmousedown = function(e){
????????????????????var x = e.clientX;
????????????????????? var y = e.clientY;
????????????????????????document.onmousemove = function(){
????????????????????????}
????????????????????document.onmouseup = function(){
????????????????????????????}
????????????????}
????????????})
})
