Vue2.0 的漫长学习ing-4-3-优快云博客

本文介绍了Vue中实例事件的使用方法，包括如何通过$on在构造器外部添加事件、$once执行仅一次的事件以及$off关闭事件等核心功能。

实例事件

　　实例事件就是在构造器外部写一个调用构造器内部的方法。

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

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

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

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

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

二、$once执行一次的事件

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

三、$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">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>实例事件</title>
    <script type="text/javascript" src="../assets/js/vue.js"></script>
</head>
<body>
    <h1>实例事件</h1>
    <hr>

    <div id="app"> 
        {{num}}
        <p> <button @click="add">add</button> </p>
    </div>
        <p> <button onclick="reduce()"> reduce</button> </p>
        <p> <button onclick="once()">once</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(){
            this.num--;
        });
        function reduce(){
            app.$emit("reduce");
        }
        app.$once("add",function(){
            this.num++;
        });
        function once(){
            app.$emit("add");
        };
        function off(){
            app.$off("reduce");
        };

    </script>
</body>
</html>