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

Posted elva3zora

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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>

浏览器效果:
技术图片

以上是关于Vue2.0 第四季第3节 实例事件的主要内容,如果未能解决你的问题,请参考以下文章

Vue2.0 第四季第2节 实例方法

带你入门Vue2.0及案例开发 开发数字产品电商平台+源码

VUE2.0实现购物车和地址选配功能学习第三节

第四季-专题16-触摸屏驱动程序设计

VUE2.0实现购物车和地址选配功能学习第七节

vue2.0学习笔记之组件