二十九、例項事件
阿新 • • 發佈：2018-12-02
例項事件
<!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>