vue学习（二） vue生命周期 vue自定义指令和过滤器
来源：互联网 发布：交通大学网络大学 编辑：程序博客网 时间：2024/05/13 18:57
生命周期钩子函数
vue的生命周期图示
vue的几个钩子函数
直接代码展示：
<div id="box"> {{msg}} </div> <script> var vm = new Vue({ el : "#box", data : { msg : "welcome vue", }, // 在实例开始初始化时同步调用。此时数据观测、事件和 watcher 都尚未初始化。 init : function (){ alert("实例初始化") }, //在实例创建之后同步调用。 //此时实例已经结束解析选项，这意味着已建立：数据绑定，计算属性，方法，watcher/事件回调。 //但是还没有开始 DOM 编译，$el 还不存在。 created : function (){ alert("创建vue对象了") }, //在编译开始前调用。 beforeCompile : function (){ alert("编译前...."); }, //在编译结束后调用。此时所有的指令已生效，因而数据的变化将触发 DOM 更新。但是不担保 $el 已插入文档。 compiled : function (){ alert("编译完成..."); }, //在编译结束和 $el 第一次插入文档之后调用，如在第一次 attached 钩子之后调用。 //注意必须是由 Vue 插入（如 vm.$appendTo() 等方法或指令更新）才触发 ready 钩子。 ready : function (){ alert("插入到文档中..."); }, //在开始销毁实例时调用。此时实例仍然有功能。 beforeDestroy : function (){ alert("销毁前...."); }, //在实例被销毁之后调用。此时所有的绑定和实例的指令已经解绑，所有的子实例也已经被销毁。 //如果有离开过渡，destroyed 钩子在过渡完成之后调用。 destroyed : function (){ alert("销毁了..."); } }); document.onclick = function (){ vm.$destroy(); } </script>结果显示是：
alert("实例初始化") —> alert("创建vue对象了") —> alert("编译前....") —>alert("编译完成...") —>alert("插入到文档中...") 判断用户是否点击了文档 是：alert("销毁前....")—>alert("销毁了...")计算属性的使用（computed）
<div id="box1"> <p>a => {{a}}</p> <br> <p>b => {{b}}</p> <br> </div> <script> var vm = new Vue({ el : "#box1", data : { a: 1, }, computed : { b : function (){ return this.a+1; }, c : function (){ return 20; } } }); document.onclick = function (){ vm.a=100; } </script>效果：
增加get set
<div id="box1"> <p>a => {{a}}</p> <br> <p>b => {{b}}</p> <br> </div> <script> var vm = new Vue({ el : "#box1", data : { a: 1, }, computed : { b : { get : function (){ return this.a+1; }, set : function (val){ this.a=val; } } } }); document.onclick = function (){ vm.b=10; } </script>PS：computed里面可以放置一些业务逻辑代码，一定记得return
vue实例的简单方法
vm.$el -> 就是元素
vm.$data -> 就是data
vm.$mount -> 手动挂在vue程序
vm.$options -> 获取自定义属性
vm.$destroy -> 销毁对象
vm.$log(); -> 查看现在数据的状态
#
<div id="box1"> <p>a => {{a}}</p> <br> </div> <script> var vm = new Vue({ el : "#box1", data : { a: 1, } }); document.onclick = function (){ // 通过$el来获取到对应的元素 vm.$el.style.background="red"; } console.log(vm.$data.a); // 通过$data来获取相对应的数据里面的某个值 console.log(vm.a); // 可以直接通过 对象.数据 来获取也ok console.log(vm.$data.a===vm.a); // true 这两种方式获取的数据是一样的 </script>$mount
<div id="box1"> <p>a => {{a}}</p> <br> </div> <script> // 之前是通过 el：；的形式来挂载vue程序，现在通过$mount的形式来实现挂载， var vm = new Vue({ // el : "#box1", //这里手动挂载vue程序 data : { a: 1, } }).$mount("#box1"); </script> <div id="box1"> <p>属性a => {{a}}</p> <br> <p>自定义属性aa => {{vm.$options.aa}}</p> <br> <p>自定义属性bb => {{vm.$options.bb}}</p> <br> <p>自定义属cc => {{vm.$options.cc}}</p> <br> </div> <script> // var vm = new Vue({ el : "#box1", data : { a: 1, }, show : function (){ alert("This is options made by myself.") }, aa : 123, bb : 'abc', cc : true, }); //获取自定义属性 console.log(vm.$options.aa) console.log(vm.$options.bb) console.log(vm.$options.cc) vm.$options.show(); document.onclick = function (){ alert(vm) // 销毁对象 vm.$destroy(); alert(vm) } document.ondbclick = function (){ console.log(vm); } </script>$log 获取当前的数据状态
<div id="box1"> <p>属性a => {{a}}</p> <br> <button @click="show()">clickMe</button> </div> <script> // var vm = new Vue({ el : "#box1", data : { a: 1, b:2, c:3 }, methods: { show : function (){ this.a=100 }, }, aa : 123, bb : 'abc', cc : true, }); document.onclick = function (){ console.log(vm.$log()); } </script>
循环补充
<div id="box1"> <input type="button" value="add" @click='add()' /> <ul> <li v-for="val in arr">{{val}}</li> </ul> </div> <script> // 此时点击btn 控制台会报错 数据重复的问题 var vm = new Vue({ el : "#box1", data : { arr: ['apple','orange','pear'], }, methods : { add : function (){ this.arr.push('banana'); } } }); </script>
调试：加上 track-by
track-by='索引' 提高循环性能 track-by='$index/uid' <div id="box1"> <input type="button" value="add" @click='add()' /> <ul> <li v-for="val in arr" track-by='$index'>{{val}}</li> </ul> </div> <script> // 此时点击btn 控制台会报错 数据重复的问题 // 加上 track-by 避免了之前的问题 var vm = new Vue({ el : "#box1", data : { arr: ['apple','orange','pear'], }, methods : { add : function (){ this.arr.push('banana'); } } }); </script>自定义过滤器
格式：
当有多个参数的情况下，用空格隔开就好 Vue.filter(filterName ,function(input){ // fn }); 调用： {{msg | filterName ‘c1’ ‘c2’}} <div id="box1"> {{aa}} <br> {{sum | addZero}} <br> {{date| toDate}} <br> {{msg | filterHtml}} </div> <script> Vue.filter('addZero',function (val){ return val<10?'0'+val:val; }) // Vue 自定义过滤器方式2 带有多个参数的 // Vue.filter(filterName,fn) Vue.filter('addZero',function (val,c1,c2){ if (c1 || c2) alert(c1+'----'+c2) return val<10?'0'+val:val; }) //日期格式 Vue.filter('toDate',function (val){ var oDate = new Date(val); return oDate.getFullYear()+'/'+(oDate.getMonth()+1)+'/'+oDate.getDate()+' '+ oDate.getHours()+':'+oDate.getMinutes()+':'+oDate.getSeconds() }) //过滤html Vue.filter('filterHtml',function (val){ return val.replace(/<[^<]+>/g,''); }) var vm = new Vue({ el : "#box1", data : { arr: ['apple','orange','pear','banana','age'], sum: 20, date : Date.now(), msg : '<strong>welcome</strong>' }, methods : { add : function (){ alert(111) } } }); </script>自定义指令
自定义属性指令
Vue.directive('name',function (){ fn})在调用自定义属性指令的情况下，要加上 ‘v-’<div v-directName></div><div v-directName="canshu"></div>democode
<div id="box1"> <p v-read>{{data}}</p> <p v-blue="'green'">{{data}}</p> <p v-blue="green">{{data}}</p> <p v-blue="color">{{data}}</p> // 参数不止一个的情况下 <p v-read="{bgColor:'blue',fontColor:'#fff'}">{{data}}</p> </div> <script> // 参数传递，参数个数是零个的时候————直接把指令写上去 // 参数传递，参数个数是一个的时候————v-blue=" '参数' " 参数可以是字符串，也可以是vue里的数据 // 注意区分 参数是多个的情况，看下一个demo Vue.directive('read',function (){ this.el.style.background="red"; }) Vue.directive('blue',function (c1){ this.el.style.background=c1; }) // 传参 的问题？？？ // 当参数不止一个的时候，把参数以json的形式写进去，然后在方法中进行操作调用 Vue.directive('read',function (c1){ this.el.style.background=c1.bgColor; this.el.style.color=c1.fontColor; console.log(c1) }) var vm = new Vue({ el : "#box1", data : { data : 'new data', color: '#eee', green: 'pink' }, methods : { // } });自定义指令还有另外一种方式，通过在fn里面定义 bind unbind
<div id="box1"> <p v-read>{{data}}</p> </div> <script> Vue.directive('read',{ bind: function () { this.el.style.background="red"; }, unbind:function(){ // } }) var vm = new Vue({ el : "#box1", data : { data : "new data" }, methods : { } }); </script>自定义元素指令
（用处不是太大）Vue.elementDirective('zns-red',{ bind:function(){ this.el.style.background='red'; }});PS： 自定义元素指令要用bind来书写，尝试过用普通指令的形式书写，不能有效
<div id="box1"> <ele-red>qqq</ele-red> </div> <script> Vue.elementDirective('ele-red',{ bind : function (){ this.el.style.background="red"; } }) var vm = new Vue({ el : "#box1", data : { data : "new data" }, methods : { // } }); </script>自定义指令完成拖拽实现
<div id="box1" > <div class="ele1" v-drag></div> </div> <script> // 自定义元素指令要用bind来书写，尝试过用普通指令的形式书写，不能有效 Vue.directive('drag',{ bind : function (){ var oDiv = this.el; oDiv.onmousedown = function (ev){ /*var e = ev || window.event; var disX = ev.clientX-obj.offsetLeft; var disY = ev.clientY-obj.offsetTop; document.onmousemove = function (){ var x = ev.clientX-disX; var y = ev.clientY-disY; obj.style.left=x+'px'; obj.style.top=y+'px'; }*/ var disX=ev.clientX-oDiv.offsetLeft; var disY=ev.clientY-oDiv.offsetTop; document.onmousemove=function(ev){ var l=ev.clientX-disX; var t=ev.clientY-disY; oDiv.style.left=l+'px'; oDiv.style.top=t+'px'; }; document.onmouseup = function (){ document.onmousemove = null; document.onmousedown = null; } } } }) var vm = new Vue({ el : "#box1", data : { data : "new data" }, methods : { // } }); </script>自定义键盘信息
@keydown.up@keydown.enter@keydown.a/b/c....自定义键盘信息: Vue.directive('on').keyCodes.ctrl=17; Vue.directive('on').keyCodes.myenter=13;之前的做法：
<div id="box1" > <input type="text" @keydown.c='show'><br> <input type="text" @keydown.a='show'><br> <input type="text" @keydown.b='show'><br> <input type="text" @keydown.65='show'><br> <input type="text" @keydown='code'> </div> <script> // keyCode 可以接一个字母，也可以接一个数字（对应的键码来进行相关操作） var vm = new Vue({ el : "#box1", data : { data : "new data" }, methods : { show : function (){ alert(1111); }, code: function (ev){ alert(ev.keyCode);// 打印键码 } } }); </script>使用自定义指令信息
<div id="box1" > <input type="text" @keydown.a='show'><br> <input type="text" @keydown.ctrl='show'><br> <input type="text" @keydown.enter1='show'><br> <input type="text" @keydown='code'> </div> <script> // keyCode 可以接一个字母，也可以接一个数字（对应的键码来进行相关操作） // 65 => a // 自定义键盘信息 //Vue.directive('on').keyCodes.a=65; // a Vue.directive('on').keyCodes.ctrl=17; //点击Ctrl健， Vue.directive('on').keyCodes.enter1=13; //enter var vm = new Vue({ el : "#box1", data : { data : "new data" }, methods : { show : function (){ alert(1111); }, code: function (ev){ alert(ev.keyCode);// 打印键码 } } }); </script>监听数据变化
vm.$el/$mount/$options/....vm.$watch(name,fnCb); //浅度vm.$watch(name,fnCb,{deep:true}); //深度监视浅度监听：
<div id="box1" > {{data}} </div> <script> var vm = new Vue({ el : "#box1", data : { data : "new data" }, methods : { show : function (){ alert(1111); } } }); document.onclick = function (){ vm.data = 'add new data' } vm.$watch('data',function (){ alert('data had changed.') }) </script>深度监听：
<div id="box1" > {{js}} <br> {{js | json}} </div> <script> var vm = new Vue({ el : "#box1", data : { js : { name:'Johnny', age:20 } }, methods : { show : function (){ alert(1111); } } }); document.onclick = function (){ vm.js.age = 25; } /* vm.$watch('js',function (){ alert('data had changed.') }) */ // 并没有什么效果，因为需要深度监听 // 把以上代码替换 vm.$watch('js',function (){ alert('data had changed.') },{deep:true}) </script> 0 0
- vue学习（二） vue生命周期 vue自定义指令和过滤器
- vue学习（一） vue指令和过滤器
- Vue学习(二)自定义指令
- vue 过滤器和自定义指令、组件
- vue生命周期及自定义指令
- Vue过滤器和自定义过滤器
- vue学习二 vue 的生命周期
- Vue2 自定义全局指令Vue.directive和指令的生命周期
- vue自定义指令-vue-reclick
- Vue学习笔记（2）vue指令
- Vue生命周期_Vue指令
- Vue自定义过滤器
- Vue自定义过滤器
- Vue---自定义过滤器
- Vue自定义过滤器
- Vue之自定义过滤器
- vue自定义过滤器
- vue 2.0 自定义过滤器
- 到你是你玩互联网还是互联网玩了你
- POJ 3331 The Idiot of the Year Contest! 可能会
- 【重修Java】《Java编程思想》读书笔记——final关键字
- virsh命令虚拟机生命周期管理以及获取虚拟机ip
- 开发exprese 经验
- vue学习（二） vue生命周期 vue自定义指令和过滤器
- python复习笔记[9] —— 异常处理
- npm基础知识
- 多语言系统的数据库设计
- 解决 Windows instance 时间不同步问题
- HTML5中的data-*属性
- weex官方demo weex-hackernews代码解读(1)
- Ubuntu 中sendmail 的安装、配置与发送邮件的具体实现
- swich 123
