實例事件 · web前端

實例事件就是在構造器外部寫一個調用構造器內部的方法。這樣寫的好處是可以通過這種寫法在構造器外部調用構造器內部的數據。我們還是寫一個點擊按鈕，持續加1的例子一、$on 在構造器外部添加事件 ~~~ app.$on('reduce',function(){ console.log('執行了reduce()'); this.num--; }); ~~~ $on接收兩個參數，第一個參數是調用時的事件名稱，第二個參數是一個匿名方法。如果按鈕在作用域外部，可以利用$emit來執行。 ~~~ <body> <div id="app"> {{num}} </div> <button onclick='reduce()'>onclick</button> </body> <script type="text/javascript"> var app = new Vue({ el: '#app', data: { num: 1, }, }); app.$on('reduce', function () { console.log('執行了reduce()'); this.num--; }); function reduce() { app.$emit('reduce'); } </script> ~~~ 二、$once執行一次的事件 ~~~ app.$once('reduceOnce',function(){ console.log('只執行一次的方法'); this.num--; }); ~~~ ~~~ <body> <div id="app"> {{num}} </div> <button onclick='reduceOnce()'>onclick</button> </body> <script type="text/javascript"> var app = new Vue({ el: '#app', data: { num: 1, }, }); app.$once('reduce', function () { console.log('只執行一次的方法'); this.num--; }); function reduceOnce() { app.$emit('reduce'); } </script> ~~~ 三、$off關閉事件 ~~~ //關閉事件 function off(){ app.$off('reduce'); } ~~~ 他可以關閉事件,讓他們點擊沒有用 ~~~ <body> <div id="app"> {{num}} </div> <button onclick='reduce()'>onclick</button> <button onclick='off()'>off</button> </body> <script type="text/javascript"> var app = new Vue({ el: '#app', data: { num: 1, }, }); app.$on('reduce', function () { console.log('執行了reduce()'); this.num--; }); function reduce() { app.$emit('reduce'); } //關閉事件 function off() { app.$off('reduce'); } </script> ~~~