$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. 【Linux学习三】VI/VIM全屏文本编辑器

    环境 虚拟机:VMware 10 Linux版本:CentOS-6.5-x86_64 客户端:Xshell4 FTP:Xftp4 一.打开关闭文件打开文件:vim /path/to/somefilev ...

  2. Django之真正创建一个django项目

    真正创建一个django项目 1 创建Django项目     :new-project 2 创建APP :  python manager.py startapp app01 3 setting 配 ...

  3. 设计模式之Prototype(原型)(转)

    定义: 用原型实例指定创建对象的种类,并且通过拷贝这些原型创建新的对象. Prototype模式允许一个对象再创建另外一个可定制的对象,根本无需知道任何如何创建的细节,工作原理是:通过将一个原型对象传 ...

  4. Linux基础命令---文本编辑tee

    tee 将标准输入的内容复制到指定的文件中,同时在标准输出中显示. 此命令的适用范围:RedHat.RHEL.Ubuntu.CentOS.SUSE.openSUSE.Fedora.   1.语法   ...

  5. Django 应用 静态文件配置

    Django 应用 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  6. 基于jquery、bootstrap的数据验证插件bootstrapValidator使用

    实时验证用户名是否存在,密码不能和用户名相同,两次密码需要相同,提交之后需要验证返回值: <form id="defaultForm" role="form&quo ...

  7. 一款用于对 WiFi 接入点安全进行渗透测试的工具

    越来越多的设备通过无线传输的方式连接到互联网,以及,大范围可用的 WiFi 接入点为攻击者攻击用户提供了很多机会.通过欺骗用户连接到虚假的 WiFi 接入点,攻击者可以完全控制用户的网络连接,这将使得 ...

  8. jQuery获取子元素个数的方法

    //获取id=div1下的子元素的个数 $('#id').children().length; //获取id=div1下的p元素个数 $('#id').children('p').length;

  9. Cannot assign “A1”: “B1” must be a “C1” instance.

    应用 django FORM 录入数据 必须 item_id supplier_id 不能item, supplier

  10. nginx 动态跨域配置

    方法一: server { ..... set $cors_origin ""; if ($http_origin ~* "a.xxxx.com") { set ...