实例事件 · 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> ~~~