vue - 实例事件
1.$on（在构造器外部添加事件）
2.$once（执行一次的事件）
3.$off（关闭事件）
4.$emit（事件调用）
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>Vue入门之Helloworld</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head> <body>
<div id="app">
<div>数字：{{count}}</div>
<button onclick="reduce()">on调用</button>
<button onclick="reduceOnce()">once调用</button>
<button onclick="off()">off调用</button>
</div> <script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
count: 1
}
}) // 官方示例(vm指的是vue绑定,也是是上述所指的app.$on)：
// vm.$on('test', function (msg) {
// console.log(msg)
// })
// vm.$emit('test', 'hi')
// => "hi" // $on 在构造器外部添加事件
app.$on('reduce', function () {
console.log('执行了reduce()');
this.count--;
});
// 调用
function reduce() {
// 事件调用
console.log('emit事件调用');
app.$emit('reduce');
} // $once执行一次的事件
app.$once('reduceOnce', function () {
console.log('只执行一次的方法');
this.count--;
}); // 调用
function reduceOnce() {
app.$emit('reduceOnce');
} // 关闭事件
function off() {
console.log('关闭事件');
app.$off('reduce');
}
</script>
</body> </html>
vue - 实例事件的更多相关文章
- Vue01 Vue介绍、Vue使用、Vue实例的创建、数据绑定、Vue实例的生命周期、差值与表达式、指令与事件、语法糖
1 Vue介绍 1.1 官方介绍 vue是一个简单小巧的渐进式的技术栈,它提供了Web开发中常用的高级功能:视图和数据的解耦.组件的服用.路由.状态管理.虚拟DOM 说明:简单小巧 -> 压缩后 ...
- python 全栈开发，Day91(Vue实例的生命周期,组件间通信之中央事件总线bus,Vue Router,vue-cli 工具)
昨日内容回顾 0. 组件注意事项!!! data属性必须是一个函数! 1. 注册全局组件 Vue.component('组件名',{ template: `` }) var app = new Vue ...
- 2-3 Vue实例中的数据，事件和方法
上节课模板是写在Vue的实例里面的,现在我们可以把它恢复出来.写在挂载点的内部,看起来会舒服一点.Vue的数据项,可以配置任意的数据名字. <!DOCTYPE html> <html ...
- Vue学习之vue实例中的数据、事件和方法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Vue框架（一）——Vue导读、Vue实例（挂载点el、数据data、过滤器filters）、Vue指令(文本指令v-text、事件指令v-on、属性指令v-bind、表单指令v-model)
Vue导读 1.Vue框架 vue是可以独立完成前后端分离式web项目的js框架 三大主流框架之一:Angular.React.Vue vue:结合其他框架优点.轻量级.中文API.数据驱动.双向绑定 ...
- Vue 实例之事件 操作样式 （文本、事件、属性、表单、条件）指令
Vue 可以独立完成前后端分离式web项目的JavaScript框架 三大主流框架之一: Angular React Vue 先进的前端设计模式:MVVM 可以完全脱离服务器端,以前端代码复用的方式渲 ...
- Vue - 实例
1.实例属性介绍如下图所示: 具体介绍如下: A.$parent:访问当前组件的父实例 B.$root:访问当前组件的根实例,要是没有的话,则是自己本身 C.$children:访问当前组件实例的直接 ...
- 05-Vue入门系列之Vue实例详解与生命周期
Vue的实例是Vue框架的入口,其实也就是前端的ViewModel,它包含了页面中的业务逻辑处理.数据模型等,当然它也有自己的一系列的生命周期的事件钩子,辅助我们进行对整个Vue实例生成.编译.挂着. ...
- Vue自定义事件
前面的话 父组件使用props传递数据给子组件,子组件怎么跟父组件通信呢?这时,Vue的自定义事件就派上用场了.本文将详细介绍Vue自定义事件 事件绑定 每个 Vue 实例都实现了事件接口 (Even ...
随机推荐
- SOAP消息的结构
概述 介绍SOAP报文的结构,以及获取的方式. 正文 1.其实发送的是SOAP消息 在前面讲述过使用Eclipse的工具Web Services Explorer发送请求.在Actions中填写请求参 ...
- Luogu P2486 染色（树链剖分+线段树）
题解 不妨采取重链剖分的方式把路径剖成区间,然后用线段树维护,考虑如何合并一个区间 struct Node { int lf, rg, tot; }seg[N << 2]; int col ...
- 【JAVA】在线程里使用线程外的变量为什么一定要是final类型
这个情况真的碰到很多,开始的时候也很难理解,但是既然IDE提示要final那我就final咯,跑通就行管那么多呢.然而这并不是科学的学习方法,万一面试问你呢那不是倒了大霉. OK,看了一些
- SSH服务审计工具ssh-audit
SSH服务审计工具ssh-audit SSH服务是常见的远程访问服务.通过对SSH服务进行审计,可以尝试发现对应的漏洞.Kali Linux新增一款SSH服务审计工具ssh-audit.该工具支持 ...
- 杭电oj 1002
#include <iostream> #include <algorithm> using namespace std; int nCases; ], n[]; ], b[] ...
- 【BZOJ 1057】 1057: [ZJOI2007]棋盘制作
1057: [ZJOI2007]棋盘制作 Description 国际象棋是世界上最古老的博弈游戏之一,和中国的围棋.象棋以及日本的将棋同享盛名.据说国际象棋起源 于易经的思想,棋盘是一个8*8大小的 ...
- 调用sort段错误问题
问题:sort的比较函数实现有问题导致进程调用sort时core了. 结论:特别要注意,sort的比较函数必须遵循严格弱排序(strict weak ordering)的规则. 这是最近在工作中遇 ...
- 【20181024T3】小C的宿舍【分治】
题面 [错解] 好像就是\(|i-j|+|a_i - b_i|\)唉 嗯开始都加i-1,跑一遍,1~(i-1)加1,i~n 减1,线段树维护. 过样例了呢 哎大样例怎么多了那么多啊 跑了个暴力,多得更 ...
- Codeforces Testing Round 14
A:The Way to Home link:http://codeforces.com/contest/910/problem/A 题面:有每次最大跳跃距离d,只有一部分的点可以落脚,求最少几步达到 ...
- 【线段树】Petrozavodsk Summer Training Camp 2016 Day 6: Warsaw U Contest, XVI Open Cup Onsite, Sunday, August 28, 2016 Problem H. Hay
有一些草,一开始高度都是0,它们的生长速率不同. 给你一些单增的日期,在这些日期要将>b的草的部分都割掉,问你每次割掉的部分有多少. 将草的生长速率从大到小排序,这样每次割掉的是一个后缀,而且不 ...