自定义指令
分类：全局指令、局部指令
1. 自定义全局指令
使用全局方法Vue.directive(指令ID,定义对象)
2. 自定义局部指令
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>vue</title> <script src="https://unpkg.com/vue"></script> <script> window.onload = function(){ /** * 自定义全局指令 * 注：使用指令时必须在指名名称前加前缀v-，即v-指令名称 */ Vue.directive('hello',{ bind(){ //常用！！ alert('指令第一次绑定到元素上时调用，只调用一次，可执行初始化操作'); }, inserted(){ alert('被绑定元素插入到DOM中时调用'); }, update(){ alert('被绑定元素所在模板更新时调用'); }, componentUpdated(){ alert('被绑定元素所在模板完成一次更新周期时调用'); }, unbind(){ alert('指令与元素解绑时调用，只调用一次'); } }) //钩子函数的参数 Vue.directive('word',{ bind(el,binding){ el.style.color = 'red'; console.log(binding); console.log(binding.value); // 拿到指令所传的值 Jan console.log(binding.expression); // 拿到指令所绑定的名字 userName console.log(binding.arg); // 给指令传参数 console.log(binding.modifiers); // 给指令传参数 } }) //传入一个简单的函数，bind和update时调用 Vue.directive('nihao',function(){ alert('nihao'); }); var vm = new Vue({ el:'#app', data:{ msg:'Welcome to China', msg2:'Hello World !', userName:'Jane' }, methods:{ change(){ this.msg = "欢迎来到中国" } }, directives:{ //自定义局部指令 focus:{ //当被绑定元素插入到DOM中时获取焦点 inserted(el){ el.focus(); } } } }) } </script> </head> <body> <div id="app"> <h3 v-hello>{{msg}}</h3> <button @click="change">更新数据</button> <hr> <h3 v-word:yulingjia.hehe='userName'>{{msg2}}</h3> <hr> <h3 v-nihao>111222333444555666</h3> <hr> <input type="text" v-model="msg" v-focus> </div> </body> </html>
3. 练习 - 拖拽 div
拖动页面中的元素
onmouseover onmouseout
onmousedown onmousemove onmouseup
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>vue</title> <script src="https://unpkg.com/vue"></script> <script> window.onload = function(){ // 自定义全局指令 Vue.directive('drag',function(el){ el.onmousedown=function(e){ //获取鼠标点击处分别与div左边和上边的距离：鼠标位置 - div位置 //clientX clientY 鼠标点击时鼠标的坐标 //offsetLeft offsetTop 该DOM元素div 左边和上边的距离 //disX disY 鼠标点击的地方距离div左边和上边的距离 var disX=e.clientX-el.offsetLeft; var disY=e.clientY-el.offsetTop; console.log(disX,disY); //包含在onmousedown里面，表示点击后才移动，为防止鼠标移出div，使用document.onmousemove document.onmousemove=function(e){ //获取移动后div的位置：鼠标位置-disX/disY el.style.left=e.clientX - disX + 'px'; el.style.top=e.clientY - disY + 'px'; } //停止移动 document.onmouseup=function(e){ document.onmousemove=null; document.onmouseup=null; } } }) var vm = new Vue({ el:'#app', data:{ hello:"你好", word:"世界", } }) } </script> <style> #app div{ width: 100px; height: 100px; position: absolute; color:#fff; } #app .hello{ background-color: red; top:0; left:0; } #app .word{ background-color: blue; top:0; right: 0; } </style> </head> <body> <div id="app"> <div class="hello" v-drag>{{hello}}</div> <div class="word" v-drag>{{word}}</div> </div> </body> </html>
