vue.js之过滤器，自定义指令，自定义键盘信息以及监听数据变化
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue.js之过滤器，自定义指令，自定义键盘信息以及监听数据变化相关的知识，希望对你有一定的参考价值。
一、监听数据变化
1、监听数据变化有两种，深度和浅度，形式如下：
vm.$watch(name,fnCb); //浅度
vm.$watch(name,fnCb,{deep:true}); //深度监视
2、实例用法
2.1-1浅度监听：当点击页面，弹出发生变化了，a的值变为1，b的值变为101
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>浅度监听1</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <style> </style> <script src="vue.js"></script> <script> window.onload=function(){ var vm=new Vue({ el:\'#box\', data:{ a:111, b:2 } }); vm.$watch(\'a\',function(){ alert(\'发生变化了\'); this.b=this.a+100; }); document.onclick=function(){ vm.a=1; }; }; </script> </head> <body> <div id="box"> {{a}} <br> {{b}} </div> </body> </html>
2.1-2浅度监听：点击页面之后，弹出“发生变化了”，页面变为
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>浅度监听2</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <style> </style> <script src="vue.js"></script> <script> window.onload=function(){ var vm=new Vue({ el:\'#box\', data:{ json:{name:\'strive\',age:16}, b:2 } }); vm.$watch(\'json\',function(){ alert(\'发生变化了\'); }); document.onclick=function(){ vm.json.name=\'aaa\'; }; }; </script> </head> <body> <div id="box"> {{json | json}} <br> {{b}} </div> </body> </html>
2.2深度监听：可以监视对象
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>深度监听</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <style> </style> <script src="vue.js"></script> <script> window.onload=function(){ var vm=new Vue({ el:\'#box\', data:{ json:{name:\'strive\',age:16}, b:2 } }); vm.$watch(\'json\',function(){ alert(\'发生变化了\'); },{deep:true}); document.onclick=function(){ vm.json.name=\'aaa\'; }; }; </script> </head> <body> <div id="box"> {{json | json}} <br> {{b}} </div> </body> </html>
运行结果：
二、自定义指令
vue中自带的指令往往有时候满足不了我们实际的需求，例如当小于9时显示为09，当大于9时显示为原本的数。所以我们这个时候就需要自己定义一些指令
1、基本语法
自定义指令: 属性: Vue.directive(指令名称,function(参数){ this.el -> 原生DOM元素 }); <div v-red="参数"></div> 指令名称: v-red -> red * 注意: 必须以 v-开头
2、基本用法
2.1 v-red -> red
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>自定义指令</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <style> </style> <script src="vue.js"></script> <script> Vue.directive(\'red\',function(){ //和下面的v-red相对应 this.el.style.background=\'red\'; }); window.onload=function(){ var vm=new Vue({ el:\'#box\', data:{ msg:\'welcome\' } }); }; </script> </head> <body> <div id="box"> <span v-red> asdfasd </span> </div> </body> </html>
运行结果：
2.2、自定义指令参数为变量的用法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>自定义指令参数用法</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <style> </style> <script src="vue.js"></script> <script> Vue.directive(\'red\',function(color){ //将下面的a的值传给color this.el.style.background=color; }); window.onload=function(){ var vm=new Vue({ el:\'#box\', data:{ a:\'blue\' } }); }; </script> </head> <body> <div id="box"> <span v-red="a"> //是上面的变量a asdfasd </span> </div> </body> </html>
运行结果：
2.3参数为值的用法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>参数为值的用法</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <style> </style> <script src="vue.js"></script> <script> Vue.directive(\'red\',function(color){ this.el.style.background=color; }); window.onload=function(){ var vm=new Vue({ el:\'#box\' }); }; </script> </head> <body> <div id="box"> <span v-red="\'blue\'"> //这里的blue就是普通的值 asdfasd </span> </div> </body> </html>
运行结果：
2.4自定义指令就是默认绑定的bind
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>自定义指令</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <style> </style> <script src="vue.js"></script> <script> Vue.directive(\'red\',{ bind:function(){ this.el.style.background=\'red\'; } }); window.onload=function(){ var vm=new Vue({ el:\'#box\' }); }; </script> </head> <body> <div id="box"> <span v-red> asdfasd </span> </div> </body> </html>
运行结果：
2.5自定指令进行拖拽小实例：可以进行拖拽
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>自定义指令--拖拽小实例</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <style> </style> <script src="vue.js"></script> <script> Vue.directive(\'drag\',function(){ var oDiv=this.el; oDiv.onmousedown=function(ev){ var disX=ev.clientX-oDiv.offsetLeft; var disY=ev.clientY-oDiv.offsetTop; document.onmousemove=function(ev){ var l=ev.clientX-Vue.js（16）之 指令的基本语法vue.js实现内部自定义指令和全局自定义指令------directive