国瑞个人博客
首页 > 前端 > vue程序化的事件监听器

vue程序化的事件监听器

vue程序化的事件监听器

 2019年03月07日 作者: 国瑞个人博客 683次浏览

官方名字真是苦涩难懂,这个东西就是事件监听,监听一个事件,当事件触发时候就可以进行回调函数操作,逼格根本不高,贴点网上代码感受下:

1
2
3
4
5
6
7
const timer = setInterval(() =>{                    
    // 某些定时器操作                
}, 500);            
// 通过$once来监听定时器,在beforeDestroy钩子可以被清除。
this.$once('hook:beforeDestroy', () => {            
    clearInterval(timer);                                    
})

其实我想问beforeDestroy前面的hook干嘛的?似乎百度小伙伴都没疑问?就我好奇吗?难道是原生的生命周期监听就要这么搞?不懂,有知道的给我留言解释下

监听到生命周期函数beforeDestroy,也就是在组件销毁之前,回调函数就可以去清除上面定时器,$once、$on、$off的使用,这里送上官网的地址教程,在程序化的事件侦听器那里

再来个稍微复杂点的代码去感受下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
<!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>程序化的事件监听器</title>
  </head>
  <body>
    <div id="app">
      <div v-if="isShow">嘻嘻嘻</div>
      <button @click="des">销毁</button>
      <button @click="show">点击</button>
      <div id="toast"></div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.7/dist/vue.js"></script>
    <script>
      var Toast = Vue.extend({
        template: '<div> <button @click="show">打印</button> </div>',
        created() {
          this.$on('print', () => {
            console.log('打印好东西,哈哈哈');
          });
        },
        methods: {
          show() {
            this.$emit('print');
          }
        }
      });
      var toast = new Toast();
      var vm = new Vue({
        el: '#app',
        data: function() {
          return {
            isShow: true
          };
        },
        created() {
          this.$on('show', () => {
            console.log('嘻嘻嘻');
          });
          this.$once('hook:beforeDestroy', () => {
            toast.$destroy();
          });
        },
        methods: {
          show() {
            this.$emit('show');
            this.isShow = this.isShow ? false : true;
            if (!toast.$el) {
              toast.$mount('#toast');
            }
          },
          des() {
            vm.$destroy();
          }
        },
        destroyed() {
          console.log('实例已经销毁了');
        }
      });
    </script>
  </body>
</html>

最后再来认识下vue中的生命周期单词

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
beforeCreate: function(){
        console.log(this);
        showData('创建vue实例前',this);
    },
    created: function(){
        showData('创建vue实例后',this);
    },
    beforeMount:function(){
        showData('挂载到dom前',this);
    },
    mounted: function(){
        showData('挂载到dom后',this);
    },
    beforeUpdate:function(){
        showData('数据变化更新前',this);
    },
    updated:function(){
        showData('数据变化更新后',this);
    },
    beforeDestroy:function(){
        vm.test ="3333";
        showData('vue实例销毁前',this);
    },
    destroyed:function(){
        showData('vue实例销毁后',this);
    }

本文转载自:

百度已收录

点击快速分享:

以上就是国瑞前端个人博客带来的是《vue程序化的事件监听器》,感谢您的观看!

如果没有特殊的说明,本文即为国瑞前端博客原创(www.huanggr.cn),欢迎读者转载并保留本站版权!https://www.huanggr.cn/1336.html

「专业前端博客,如果觉得我的文章对您有用,请帮助本站成长」

赞( 1 ) 打赏

谢谢你请我吃鸡腿*^_^*

支付宝
微信
1

谢谢你请我吃鸡腿*^_^*

支付宝
微信
标签:

上一篇:

下一篇:

相关文章:

共有 0 条评论

博客简介

国瑞个人博客: https://www.huanggr.cn/,我们关注Web前端开发技术,web前端开发,移动前端开发,前端资讯,同时分享前端资源和工具等,期待你的参与,了解更多..

博主独立研发主题:

本站唯一QQ群

加入国瑞个人博客QQ群

本群为学习探讨群,主要和前端相关,欢迎广大前端(抱有学习目的均可)爱好者加入!广告请勿添加!

升级版本

web前端开发博客,基于vue脚手架制作的前端博客正在制作中,尽情期待,目前示例的代码位于此处

最新版本(尽请期待)-web前端开发博客

精彩评论

本站主要提供服务

二年web前端开发博客,本站专注提供web资源下载,技术问题解答,经验分享,也提供新手的web技术指导,二年前端个人博客,期待你的加入!

站点统计

  • 文章总数: 269 篇
  • 草稿数目: 50 篇
  • 分类数目: 26 个
  • 页面总数: 16 个
  • 评论总数: 216 条
  • 链接总数: 10 个
  • 标签总数: 104 个
  • 建站时间: 803 天
  • 注册用户: 659 人
  • 访问总量: 8780605 次
  • 最近更新: 2019年7月15日
-->