Vue 实例事件简单示例
2019-10-28 18:07
531 查看
本文实例讲述了Vue 实例事件。分享给大家供大家参考,具体如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue 实例事件</title> <script type="text/javascript" src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script> </head> <body> <h1>Vue 实例事件</h1> <hr> <div id="app"> <p> {{num}} </p> <p><button @click="add">add</button></p> </div> <p><button οnclick="reduce()">reduce</button></p> <p><button οnclick="reduceonce()">reduceonce</button></p> <p><button οnclick="off()">关闭事件</button></p> </body> </html> <script> var app = new Vue({ el:'#app', data:{ num:1 }, methods:{ add:function(){ this.num++ } }, }) //在构造器 on 一直调用 once只能调用一次 app.$on('reduce',function(){ this.num--; console.log('执行了reduce方法') }) app.$once('reduceonce',function(){ this.num--; console.log('执行了reduceonce方法') }) function reduce(){ //emit 触发当前实例上的事件 app.$emit('reduce'); } function reduceonce(){ app.$emit('reduceonce'); } // $off 关闭事件 function off(){ app.$off('reduce'); console.log('关闭了reduce') } </script>
运行结果:
感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。
希望本文所述对大家vue.js程序设计有所帮助。
您可能感兴趣的文章:
相关文章推荐
- Jquery Ajax学习实例7 Ajax所有过程事件分析示例
- vue+iview+mqtt(mqttws31.js) 简单实例
- vue简单事件命令
- 【Vue】处理边界情况:访问根实例、父级组件实例、子组件实例或子元素,依赖注入、程序化事件侦听器、循环引用、内联模板、X-Template、控制更新:强制更新、 v-once 创建低开销静态组件
- VUE写一个简单的表格实例
- Vue加载json文件的方法简单示例
- vue生命周期与钩子函数简单示例
- SVG.Js事件示例,简单绑定拖动操作
- Vue实例的一些简单方法
- vue实现鼠标移入移出事件代码实例
- 简单vue综合实例小扩展
- js鼠标滑轮滚动事件绑定的简单实例(兼容主流浏览器)
- Java swing(awt):事件监听机制的实现原理+简单示例
- vue使用$emit时,父组件无法监听到子组件的事件实例
- vue实现简单表格组件实例详解
- vue.js的一个简单实例
- JavaScript鼠标事件,点击鼠标右键,弹出div的简单实例
- Vue组件大全包括(UI组件,开发框架,服务端,辅助工具,应用实例,Demo示例)
- JavaScript之实现一个简单的Vue示例
- Jquery Ajax学习实例7 Ajax所有过程事件分析示例