Vue2.0 [quatrième trimestre] L'article 3 de l'événement d'instance

Section 3 événement instance

Des exemples de l'événement est d'écrire un appel de méthode dans le constructeur à l'extérieur du constructeur. Les avantages de ces données est écrit dans la structure interne d'un appel extérieur au constructeur par une telle approche.

Nous écrivons encore un clic sur un bouton, l'exemple 1 continue d'augmenter.

A $ sur événement ajouter en dehors du constructeur

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

$ Sur réception de deux paramètres, le premier paramètre est le nom de l'événement lorsque vous appelez le second argument est une méthode anonyme.

Si le bouton est hors de portée, vous pouvez utiliser $ emit effectué.

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

Tout le 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>

effet du navigateur:

Deux, une fois exécuté $ une fois l'événement

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

});

Tout le 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>

effet du navigateur:

Trois, $ hors de l'événement

???
// Fermer événement
fonction OFF () {
App $ OFF ( 'Réduc') ;.
}
?????

Tout le 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>

effet du navigateur: