Vue2.0 [the fourth quarter] Section 3 instance event

Section 3 instance event

Examples of the event is to write a method call inside the constructor outside of the constructor. The benefits of this data is written in the internal structure of an external call to the constructor by such an approach.

We still write a click of a button, the example 1 continues to increase.

A, $ on add event outside the constructor

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

$ On receiving two parameters, the first parameter is the event name when calling the second argument is an anonymous method.

If the button is outside the scope, you can use $ emit performed.

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

All Code:

<!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>

Browser effect:

Two, $ once executed once the event

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

});

All Code:

<!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>

Browser effect:

Three, $ off off event

???
// Close event
function OFF () {
App $ OFF ( 'the reduce');.
}
?????

All Code:

<!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>

Browser effect: