vue 实例事件_html-js-css

概述好处是在构造器外部增加一个构造器内部事件有三个实例事件方法： - $on() // 点击一次执行一次 - $once() // 只执行一次 - $off() // 关闭事件方法外部方法通过 $emit 方法调用代码示例如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport"

好处是在构造器外部增加一个构造器内部事件

有三个实例事件方法：

- $on() // 点击一次执行一次

- $once() // 只执行一次

- $off() // 关闭事件方法

外部方法通过 $emit 方法调用

代码示例如下：

<!DOCTYPE HTML> <HTML lang="en">
<head> <Meta charset="UTF-8"> <Meta name="vIEwport" content="wIDth=device-wIDth,initial-scale=1.0"> <Meta http-equiv="X-UA-Compatible" content="IE=edge"> <Title>example-3</Title> <script src="../assets/Js/vue.Js"></script> <script src="../assets/Js/jquery-3.1.0.min.Js"></script> </head>
<body> <h1>example-3</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> var app = new Vue({ el: ‘#app‘, data() { return { num: 1 } }, methods: { add() { 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>

总结

以上是内存溢出为你收集整理的vue 实例事件全部内容，希望文章能够帮你解决vue 实例事件所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/web/1065738.html