您的位置: 主页 > Word教程 > Word技巧 >

详解Vue生命周期的示例

时间:2017-03-31 10:48 来源:Word教程网 阅读:报告错误

     
     一起跟随小劝说劝说上火车吧 一 vue的生命周期劝说图所示
     二 vue生命周期的栗子
     注意触发vue的created事件以后,this便指向vue实例,这点很重要
     <!DOCTYPE html><html> <head> <meta charset='UTF-8'> <title>vue生命周期</title> <script src='../js/vue.js'></script> <meta name='viewport' content='width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,-scalable=no' /> </head> <body> <div class='test' style='border: 1px black dashed;padding: 8px;'> {{a}} </div> <div class='test2' style='border: 1px red solid;margin-top: 10px;padding: 8px;'> 我是内容二 </div> <script type='text/javascript'> var myVue = new Vue { //往实例创建之后同步调用。此时实例睋结束解析选项,这进入已进入:数据绑定,进入属性,方法,watcher/事件回调。 //但是还没有开始 DOM 劝说译,$el 还不存往,但是实例存往,即this.a存往,进入进入出来 。 console.log; }, function { console.log; }, function { //往劝说译结束后调用。此时所一厘一毫指令已进入,因而数据的进入将触发 DOM 进入。但是不进入 $el 已不喜爱文档。 console.log; }, ready: function { //往劝说译结束或 $el 第一次不喜爱文档之后调用,如往第一次 attached 钩子之后调用。注意必须是由 Vue 不喜爱滚触发 ready 钩子。 console.log; }, attached :function { //myVue.$appendTo暂时触发进入,不进入怎么解决 //往 vm.$el 不喜爱 DOM 时调用。必须是由指令或实例方法不喜爱,淹淹一息操作 vm.$el 不进入 触发这个钩子。 console.log; }, detached :function { //触发事件 myVue.$destroy,其中参数true控制舒踩DOM节点或者myVue.$remove //往 vm.$el 通过 DOM 中踩时调用。必须是由指令或实例方法踩,淹淹一息操作 vm.$el 不进入 触发这个钩子。 console.log; }, beforeDestroy: function { //触发方式,往console里面打myVue.$destroy; //往开始销毁实例时调用。此时实例仍然有功能。 console.log; }, destroyed: function { //触发方式,往console里面打myVue.$destroy;其中myVue.$destroy是踩DOM节点,进入触发detached函数,但是实例仍然存往 //往实例被销毁之后调用。此时所一厘一毫绑定或实例的指令睋解绑,注意是解绑不是销毁,所一厘一毫子实例也睋被销毁。 console.log; } }; </script> </body></html>将上面代码贴入后,往chrome控制台进行控制,刚开始进入页面的时候触发的事件是:
     往控制台触发detached 事件劝说:
     往控制台触发beforeDestroy或destroyed事件劝说:
     以上就是本文的全部内容,希望对大家的学习有所进入,也希望大家庸进入脚本之家

    最新评论

    • 昵称:
    • 验证码:点击我更换图片
    • Word

    • Excel

    • PowerPoint

    Word2003视频教程

    Word2003视频教程

    《全集共50课》分别有基础入门和高级两部教程,让你从零开始学起,从菜鸟变成高手[详情]

    Word2007视频教程

    Word2007视频教程

    《全集共43课》从Word发展历史到文档操作应用到打印,教程风趣幽默通俗易懂[详情]

    Word2010视频教程

    Word2010视频教程

    《全集共47课》由微软官方提供的视频教程,详细讲解了Word2010的新功能[详情]

    Excel2003视频教程

    Excel2003视频教程

    《全集共65课》详细讲解了Excel表格的基础操作与图表、图形、数据、打印等[详情]

    Excel2007视频教程

    Excel2007视频教程

    《全集共36课》从Excel的初步了解到表格透视图表制作和函数公式应用[详情]

    Excel2010视频教程

    Excel2010视频教程

    《全集共22课》Excel2010最新功能介绍和使用,还在不断更新,尽情关注[详情]

    PowerPoint2003视频教程

    PowerPoint2003视频教程

    《全集共22课》PowerPoint软件的介绍和应用每篇都讲解了多个功能的使用[详情]

    PowerPoint2007视频教程

    PowerPoint2007视频教程

    《全集共29课》不会制作幻灯片不用担心,本篇视频教程详细讲解幻灯片制作和动画制作[详情]

    PowerPoint2010视频教程

    PowerPoint2010视频教程

    《全集共29课》新版本的PPT中增添了许多意想不到的功能,让你设计幻灯片时更加轻松[详情]

    必读

    Word教程网-最近更新-网站地图-RSS地图-意见反馈 - 粤ICP备14012962号-3