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!
  • 相关阅读:
    《梦幻西游》打响反盗号战役:为2亿玩家提供360安全武器 狼人:
    瑞星发表官方声明:记者王学武系恶意诽谤 狼人:
    中美联合挫败Conficker蠕虫大攻击 狼人:
    安全机构建议奥巴马政府谨慎使用开源软件 狼人:
    大量计算机遭“灰鸽子”病毒攻击 狼人:
    警惕IE7新漏洞导致的木马病毒暴增 狼人:
    IE7漏洞被瞄准 新型攻击将爆发 狼人:
    Windows 7成为Pwn2own黑客挑战赛目标 狼人:
    黑客入侵唱片业协会网站 为“海盗湾”助威 狼人:
    “猫癣”“犇牛”木马病毒肆虐 专家提醒补漏洞 狼人:
  • 原文地址:https://www.cnblogs.com/Elva3zora/p/12510155.html
Copyright © 2011-2022 走看看