$on  在构造器外部添加事件。
$on接收两个参数,第一个参数是调用时的事件名称,第二个参数是一个匿名方法。
如果按钮在作用域外部,可以利用$emit来执行。
html
 <div id="app">
<span>{{message}}</span>
<button @click="add()">+1</button>
</div>
<p><button onclick="reduce()">减少</button></p>
<p><button onclick="reduceOnce()">执行一次减少</button></p>
<p><button onclick="off()">关闭</button></p>
js
var vm = new Vue({
el:"#app",
data:{
message:1
},
methods:{
add:function(){
this.message++
}
}
})
// 实例事件
vm.$on('reduce',function(){
this.message--
})
//只使用一次的实例方法
vm.$once('reduceOnce',function(){
this.message--;
})
// 关闭事件
function off(){
vm.$off('reduce');
} // 外部调用内部事件
function reduce(){
vm.$emit('reduce')
}
function reduceOnce(){
vm.$emit('reduceOnce');
}

随机推荐

  1. jsp无法访问

    一直无法访问jsp: 由于Spring boot使用的内嵌的tomcat,而内嵌的tamcat是不支持jsp页面的,所有需要导入额外的包才能解决. <!-- 解决jsp无法访问 --> & ...

  2. c# ListBox控件

    ListBox控件可以一次呈现多个项,并且语序对控件中的选项进行选择操作,ListBox类公开Items属性,它是一个集合,类型为ListBox.ObjectCollection,是ListBox的一 ...

  3. android textview字体加粗 Android studio最新水平居中和垂直居中

    android textview字体加粗 Android studio最新水平居中和垂直居中 Android中字体加粗在xml文件中使用android:textStyle=”bold”但是不能将中文设 ...

  4. 一线互联网常见的 14 个 Java 面试题,你颤抖了吗程序员

    跳槽不算频繁,但参加过不少面试(电话面试.face to face 面试),面过大 / 小公司.互联网 / 传统软件公司,面糊过(眼高手低,缺乏实战经验,挂掉),也面过人,所幸未因失败而气馁,在此过程 ...

  5. 怎样从外网访问内网WampServer?

    本地安装了一个WampServer,只能在局域网内访问,怎样从外网也能访问到本地的WampServer呢?本文将介绍具体的实现步骤. 准备工作 安装并启动WampServer 默认安装的WampSer ...

  6. ACM总结——2017湖南省省赛总结

    2017省赛已经结束了2天了,今天终于有时间,也有勇气来写下这一篇总结.的确,这是我第一次正式的ACM线下赛,我本以为再不济,也可以拿个三等奖,没想到,实力打铁.确实对我打击比较大,以前的确是知道自己 ...

  7. 关于js浅拷贝与深拷贝的理解

    前端开发中,一般情况下,很少会去在意深拷贝与浅拷贝的关系. 大家知道,js变量有2种数据类型:基本类型和引用类型.基本类型的拷贝是将整个值完全拷贝一份的,也就是深拷贝.就是开辟了新的堆内存.所以基本类 ...

  8. git clone 报错Unable to negotiate with xxx.xxx.xxx.xxx port 12345: no matching key exchange method found. Their offer: diffie-hellman-group1-sha1

    在执行git clone命令报错 Unable to negotiate with xxx.xxx.xxx.xxx port 12345: no matching key exchange metho ...

  9. rocketmq安装与基本操作

    如果不是因为政治原因,就rocketmq的社区活跃度.版本.特性和文档完善度,我是无论如何也不会使用rocketmq的. rocketmq严格意义上并不支持高可靠性,因为其持久化只支持异步,有另外一个 ...

  10. 【题解】Luogu P4363 [九省联考2018]一双木棋chess

    原题传送门 这道题珂以轮廓线dp解决 经过推导,我们珂以发现下一行的棋子比上一行的棋子少(或等于),而且每一行中的棋子都是从左向右依次排列(从头开始,中间没有空隙) 所以每下完一步棋,棋盘的一部分是有 ...