时间:2021-05-26
本文实例讲述了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程序设计有所帮助。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
本文介绍了vue计算属性的使用和vue实例的方法示例,分享给大家,具体如下:计算属性在模板中表达式非常便利,但是它们实际上只用于简单的操作。模板是为了描述视图的
一vue的生命周期如下图所示(很清晰)二vue生命周期的栗子注意触发vue的created事件以后,this便指向vue实例,这点很重要vue生命周期{{a}}
本文实例讲述了vue基础之事件简写、事件对象、冒泡、默认行为、键盘事件。分享给大家供大家参考,具体如下:v-on:click/mouseover......简写
Vue框架的入口就是Vue实例,其实就是框架中的viewmodel,它包含页面中的业务处理逻辑、数据模型等,它的生命周期中有多个事件钩子,让我们在控制整个Vue
本文实例为大家分享了vue实现页面切换滑动的具体代码,供大家参考,具体内容如下试着用Vue做了个页面切换时滑动的效果,如下示例,源码这里使用了Vue的trans