$on在构造器外部添加事件$once执行一次的事件$off关闭事件
$on 在构造器外部添加事件。
$on接收两个参数,第一个参数是调用时的事件名称,第二个参数是一个匿名方法。
如果按钮在作用域外部,可以利用$emit来执行。 html
<div id="app">
<span>{{message}}</span>
<button @click="add()">+</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:
},
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');
}
随机推荐
- recv() failed (104: Connection reset by peer) while reading response header from upstream
2017年12月1日10:18:34 情景描述: 浏览器执行了一会儿, 报500错误 运行环境: nginx + php-fpm nginx日志: recv() failed (104: Conn ...
- 根据CAS协议写的简单的SSO框架
前言: 考虑到现在分布式应用都不可或缺的一个重要部分:单点登录,决定花点时间去学下.本来想直接上现成的CAS框架的,初步的了解了一下后,觉得这个太庞大了,而且不好定制,要完全深度用起来也没那么简单 ...
- 后台调用前台js方法
后台调用前台jsClientScript.RegisterStartupScript(ClientScript.GetType(), "myscript", "<s ...
- JSP中request获取值
获取项目名:request.getContextPath(); 获取IP:request.getServerName() 获取端口:request.getServerPort() pageContex ...
- vuex——做简单的购物车功能
购物车组件 <template> <div> <h1>vuex-shopCart</h1> <div class="shop-listb ...
- vue -webpack.dev.config.js模拟后台数据接口
在const portfinder = require('portfinder')后面添加 const express = require('express') const app = express ...
- MSChart的研究(转)
介绍MSChart的常用属性和事件 MSChart的元素组成 最常用的属性包括 ChartAreas:增加多个绘图区域,每个绘图区域包含独立的图表组.数据源,用于多个图表类型在一个绘图区不兼容时. A ...
- js学习——基础知识
数据类型 函数.方法 变量作用域 运算符 条件语句 break和continue typeof 错误(异常) 变量提升 严格模式 JSON void(0) JavaScript ...
- 在 Confluence 6 中禁用 workbox 应用通知
如果你选择 不提供应用通知(does not provide in-app notifications): Confluence workbox 图标将不会可见同时用户也不能在这个服务器上访问 wor ...
- Confluence 6 在初始化配置时候的问题
提交一个 服务器请求(support request) 然后在你的服务请求中同时提供下面的信息. 下载一个 LDAP 浏览器,你可以通过这个确定你的 LDAP 服务器配置正确.Atlassian 推荐 ...