zoukankan      html  css  js  c++  java
  • Vue2.0 【第四季】第3节 实例事件

    Vue2.0 【第四季】第3节 实例事件


    第3节 实例事件

    实例事件就是在构造器外部写一个调用构造器内部的方法。这样写的好处是可以通过这种写法在构造器外部调用构造器内部的数据。

    我们还是写一个点击按钮,持续加1的例子。

    一、$on 在构造器外部添加事件

    app.$on('reduce',function(){
        console.log('执行了reduce()');
        this.num--;
    });
    

    $on接收两个参数,第一个参数是调用时的事件名称,第二个参数是一个匿名方法。

    如果按钮在作用域外部,可以利用$emit来执行。

    //外部调用内部事件
    function reduce(){
        app.$emit('reduce');
    }
    

    全部代码:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>example03</title>
        <script type="text/javascript" src="../assets/js/vue.js"></script>
    </head>
        <body>
            <h1>example03</h1>
            <hr>
            <div id="app">
                {{num}}
                <p><button @click="add">add</button></p>
            </div>
            <p><button onclick="reduce()">reduce</button></p>
    
            <script type="text/javascript">
                var app = new Vue({
                    el:'#app',
                    data:{
                        num:1
                    },
                    methods:{
                        add:function(){
                            this.num++;
                        }
                    }
                });
    
                app.$on("reduce",function(){
                    console.log("执行了reduce方法");
                    this.num--;
                })
    
                function reduce(){
                    app.$emit('reduce');
                }
            </script>
        </body>
    </html>
    

    浏览器效果:

    二、$once执行一次的事件

    app.$once('reduceOnce',function(){
        console.log('只执行一次的方法');
        this.num--;
    
    });
    

    全部代码:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>example03</title>
        <script type="text/javascript" src="../assets/js/vue.js"></script>
    </head>
        <body>
            <h1>example03</h1>
            <hr>
            <div id="app">
                {{num}}
                <p><button @click="add">add</button></p>
            </div>
            <p><button onclick="reduce()">reduce</button></p>
            <p><button onclick="reduceOnce()">reduceOnce</button></p>
    
            <script type="text/javascript">
                var app = new Vue({
                    el:'#app',
                    data:{
                        num:1
                    },
                    methods:{
                        add:function(){
                            this.num++;
                        }
                    }
                });
    
                app.$on("reduce",function(){
                    console.log("执行了reduce方法");
                    this.num--;
                })
    
                app.$once('reduceOnce',function(){
                    console.log('只执行一次的方法');
                    this.num--;
    
                });
    
                function reduce(){
                    app.$emit('reduce');
                }
    
                function reduceOnce(){
                    app.$emit('reduceOnce');
                }
            </script>
        </body>
    </html>
    

    浏览器效果:

    三、$off关闭事件

    ···
    //关闭事件
    function off(){
    app.$off('reduce');
    }
    ···

    全部代码:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>example03</title>
        <script type="text/javascript" src="../assets/js/vue.js"></script>
    </head>
        <body>
            <h1>example03</h1>
            <hr>
            <div id="app">
                {{num}}
                <p><button @click="add">add</button></p>
            </div>
            <p><button onclick="reduce()">reduce</button></p>
            <p><button onclick="reduceOnce()">reduceOnce</button></p>
            <p><button onclick="off()">off</button></p>
    
            <script type="text/javascript">
                var app = new Vue({
                    el:'#app',
                    data:{
                        num:1
                    },
                    methods:{
                        add:function(){
                            this.num++;
                        }
                    }
                });
    
                app.$on("reduce",function(){
                    console.log("执行了reduce方法");
                    this.num--;
                })
    
                app.$once('reduceOnce',function(){
                    console.log('只执行一次的方法');
                    this.num--;
    
                });
    
                function reduce(){
                    app.$emit('reduce');
                }
    
                function reduceOnce(){
                    app.$emit('reduceOnce');
                }
    
                //关闭事件
                function off(){
                    app.$off('reduce');
                }
            </script>
        </body>
    </html>
    

    浏览器效果:

    Keep moving on!
  • 相关阅读:
    .NET Windows编程系列课程(视频课程讲师:邵志东)
    ADO.NET 2.0 系列课程(视频课程讲师:徐长龙)
    [导入]SaaS软件即服务系列课程(7):Overview of the first Microsoft SaaS Sample Application. LitwareHR.zip(9.21 MB)
    ASP.NET 2.0入门与提高系列课程(视频课程讲师:徐栋)
    使用.NET Remoting 建立分布式应用程序(视频课程讲师:任旻)
    ASP.NET AJAX深入浅出系列课程(视频课程讲师:赵劼)
    IIS7开发系列课程(视频课程讲师:韩锐)
    ASP.NET MVC框架开发系列课程(视频课程讲师:赵劼)
    IIS支持APK文件下载的方法
    structs配置文件代码
  • 原文地址:https://www.cnblogs.com/Elva3zora/p/12510155.html
Copyright © 2011-2022 走看看