二十九、实例事件

柔光的暖阳◎ 2022-05-14 15:24 224阅读 0赞

#                                 实例事件 #

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <script type="text/javascript" src="../assets/js/vue.js"></script>
        <script type="text/javascript" src="../assets/js/jquery-3.1.1.min.js"></script>
        <title>Event Examples Demo</title>
    </head>
        <body>
        <h1>Event Examples Demo</h1>
        <hr>
        <div id="app">
            {
       {num}}
            <p><button @click="add">加1</button></p>
        </div>
    
    
        <p><button onclick="reduce()">reduce</button></p>
        <p><button onclick="reduceOnce()">只减一次</button></p>
        <p><button onclick="off()">关闭reduce</button></p>
        <script type="text/javascript">
            var app=new Vue({
                el:'#app',
                data:{
                    num:1
                },methods:{
                    add:function(){
                        this.num++;
                    }
                }
            })
    
    
            //$on 在构造器外部添加事件（相当于为构造器添加了一个事件）
            //reduce：调用时的事件名称
            app.$on('reduce',function(){
                console.log('执行了reduce()');
                this.num--;
            });
            //外部调用内部事件
            //按钮在作用域外部，可以利用$emit来执行构造器内部的方法
            function reduce(){
                app.$emit('reduce');
            }
    
    
            //$once执行一次的事件
            app.$once('reduceOnce',function(){
                console.log('只执行一次的方法');
                this.num--;
            });
            function reduceOnce(){
                app.$emit('reduceOnce');
            }
    
    
            //关闭事件
            function off(){
                app.$off('reduce');
            }
        </script>
    </body>
    </html>