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 - 实例事件的更多相关文章

  1. Vue01 Vue介绍、Vue使用、Vue实例的创建、数据绑定、Vue实例的生命周期、差值与表达式、指令与事件、语法糖

    1 Vue介绍 1.1 官方介绍 vue是一个简单小巧的渐进式的技术栈,它提供了Web开发中常用的高级功能:视图和数据的解耦.组件的服用.路由.状态管理.虚拟DOM 说明:简单小巧 -> 压缩后 ...

  2. python 全栈开发,Day91(Vue实例的生命周期,组件间通信之中央事件总线bus,Vue Router,vue-cli 工具)

    昨日内容回顾 0. 组件注意事项!!! data属性必须是一个函数! 1. 注册全局组件 Vue.component('组件名',{ template: `` }) var app = new Vue ...

  3. 2-3 Vue实例中的数据,事件和方法

    上节课模板是写在Vue的实例里面的,现在我们可以把它恢复出来.写在挂载点的内部,看起来会舒服一点.Vue的数据项,可以配置任意的数据名字. <!DOCTYPE html> <html ...

  4. Vue学习之vue实例中的数据、事件和方法

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. 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.数据驱动.双向绑定 ...

  6. Vue 实例之事件 操作样式 (文本、事件、属性、表单、条件)指令

    Vue 可以独立完成前后端分离式web项目的JavaScript框架 三大主流框架之一: Angular React Vue 先进的前端设计模式:MVVM 可以完全脱离服务器端,以前端代码复用的方式渲 ...

  7. Vue - 实例

    1.实例属性介绍如下图所示: 具体介绍如下: A.$parent:访问当前组件的父实例 B.$root:访问当前组件的根实例,要是没有的话,则是自己本身 C.$children:访问当前组件实例的直接 ...

  8. 05-Vue入门系列之Vue实例详解与生命周期

    Vue的实例是Vue框架的入口,其实也就是前端的ViewModel,它包含了页面中的业务逻辑处理.数据模型等,当然它也有自己的一系列的生命周期的事件钩子,辅助我们进行对整个Vue实例生成.编译.挂着. ...

  9. Vue自定义事件

    前面的话 父组件使用props传递数据给子组件,子组件怎么跟父组件通信呢?这时,Vue的自定义事件就派上用场了.本文将详细介绍Vue自定义事件 事件绑定 每个 Vue 实例都实现了事件接口 (Even ...

随机推荐

  1. Comet OJ CCPC-Wannafly Winter Camp Day1 (Div2, online mirror) F.爬爬爬山-最短路(Dijkstra)(两个板子)+思维(mdzz...) zhixincode

    爬爬爬山 已经提交 已经通过 9.83% Total Submission:417 Total Accepted:41 题目描述 爬山是wlswls最喜欢的活动之一. 在一个神奇的世界里,一共有nn座 ...

  2. 【前端必备】三、JS篇

    1.运算符与隐式类型转换 类型判断: typeof constructor.toString().indexOf() NaN是numberArray.Date.Null都是Objectfunction ...

  3. Java浮点类型的格式化

    概述 基于Java,介绍将浮点类型小数进行格式化的方案. 正文 在Java中,用于格式化小数的类是java.text.DecimalFormat,比如你可以这样使用: double data = 33 ...

  4. PDF文档盖章

    概述 在pdf文档的最后一页,合适位置,添加印章图片. maven依赖 <dependency> <groupId>com.itextpdf</groupId> & ...

  5. Linux添加或修改ssh端口

    1)  查看ssh服务是否安装齐全 这里使用”rpm –qa|grep ssh”命令查看. [root@xuexi ~]# rpm -qa | grep ssh libssh2-1.4.3-10.el ...

  6. sqlldr load UTF8 error

    The default length semantics for all datafiles (except UFT-16) is byte. So in your case you have a C ...

  7. CSS 笔记——选择器

    1. 选择器 (1)类型选择器(标签选择器) 基本语法 E { sRules } 使用说明 类型选择器.以文档对象(Element)类型作为选择器. 选择面较大,适合做某种标签元素外观的常规设置. 代 ...

  8. luogu P1353 [USACO08JAN]跑步Running

    题目描述 The cows are trying to become better athletes, so Bessie is running on a track for exactly N (1 ...

  9. [Codeforces-div.1 68D] Half-decay tree

    [Codeforces-div.1 68D] Half-decay tree 试题分析 增加显然是\(log\)的. 由于某一些叶子结点的答案是一样的,所以我们可以考虑一次性求解. 容易想到一个非常优 ...

  10. Perl读写文件&字符串操作

    Perl中读写文件的方法非常简单,可以使用open或sysopen函数来打开文件,linux下运行perl脚本只需 ./XX.pl 或 perl XX.pl. 读文件 open(文件句柄, " ...