对vue中v-on绑定自定事件的实例讲解


Posted in Javascript onSeptember 06, 2018

关于官网vue中v-on绑定自定义事件的个人理解

对官网实例进行了一些修改,如下图:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>v-on绑定自定义事件</title>
 <script src="vue.js"></script>
</head>
<body>
<div id="app">
 <p>{{ total }}</p>
 <button-counter v-on:increment="father1"></button-counter>
 <button-counter v-on:incr="father2"></button-counter>
 <button-counter v-on:inc="father1"></button-counter>
</div>
<script>
 Vue.component('button-counter', {
  template: '<button v-on:click="child">{{ counter }}</button>',
  data: function () {
   return {
    counter: 0
   }
  },
  methods: {
   child:function(){
    this.counter += 1;
    this.$emit('increment');
    this.$emit('incr');
    this.$emit('inc');
   }
  }
 });
 new Vue({
  el: '#app',
  data: {
   total: 0
  },
  methods: {
   father1: function () {
    this.total += 1
   },
   father2: function () {
    this.total -= 1
   }
  }
 })
</script>
</body>
</html>

对vue中v-on绑定自定事件的实例讲解

点击第一个按钮浏览器的执行顺序如图所示:

步骤一:点击第一个按钮,执行子组件的函数child

步骤二:分别触发该按钮中的事件$emit(‘ ');

步骤三:监听到 v-on:increment 事件,

步骤四:执行父组件监听子组件的事件father1;

以上这篇对vue中v-on绑定自定事件的实例讲解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JQuery 拾色器插件发布-jquery.icolor.js
Oct 20 Javascript
JQuery魔力之$(&quot;tagName&quot;)与selector
Mar 05 Javascript
JS短路原理的应用示例 精简代码的途径
Dec 13 Javascript
简单的jquery左侧导航栏和页面选中效果
Aug 21 Javascript
node.js中的fs.ftruncate方法使用说明
Dec 15 Javascript
JavaScript中解决多浏览器兼容性23个问题的快速解决方法
May 19 Javascript
BetterScroll 在移动端滚动场景的应用
Sep 18 Javascript
redux-saga 初识和使用
Mar 10 Javascript
JavaScript中常见内置函数用法示例
May 14 Javascript
基于vue-cli、elementUI的Vue超简单入门小例子(推荐)
Apr 17 Javascript
微信小程序时间戳转日期的详解
Apr 30 Javascript
JS实现使用POST方式发送请求
Aug 30 Javascript
微信小程序开发之自定义tabBar的实现
Sep 06 #Javascript
Vue的watch和computed方法的使用及区别介绍
Sep 06 #Javascript
Vue-component全局注册实例
Sep 06 #Javascript
Vue 监听列表item渲染事件方法
Sep 06 #Javascript
在Vue组件中获取全局的点击事件方法
Sep 06 #Javascript
jQuery实现基本动画效果的方法详解
Sep 06 #jQuery
JavaScript函数、闭包、原型、面向对象学习笔记
Sep 06 #Javascript
You might like
php下实现一个阿拉伯数字转中文数字的函数
2008/07/10 PHP
PHP OPP机制和模式简介(抽象类、接口和契约式编程)
2014/06/09 PHP
PHP date()函数警告: It is not safe to rely on the system解决方法
2014/08/20 PHP
一段实用的php验证码函数
2016/05/19 PHP
PHP  Yii清理缓存的实现方法
2016/11/10 PHP
php curl批处理实现可控并发异步操作示例
2018/05/09 PHP
Laravel 微信小程序后端实现用户登录的示例代码
2019/11/26 PHP
TP5框架使用QueryList采集框架爬小说操作示例
2020/03/26 PHP
php中try catch捕获异常实例详解
2020/08/06 PHP
基于jQuery的淡入淡出可自动切换的幻灯插件
2010/08/24 Javascript
jQuery控制图片的hover效果(smartRollover.js)
2012/03/18 Javascript
jQuery移动和复制dom节点实用DOM操作案例
2012/12/17 Javascript
一个简单的全屏图片上下打开显示网页效果示例
2014/07/08 Javascript
Node.js中使用事件发射器模式实现事件绑定详解
2014/08/15 Javascript
js+html5实现canvas绘制镂空字体文本的方法
2015/06/05 Javascript
java必学必会之static关键字
2015/12/03 Javascript
Bootstrap实现默认导航栏效果
2020/09/21 Javascript
让html元素随浏览器的大小自适应垂直居中的实现方法
2016/10/12 Javascript
BootstrapValidator超详细教程(推荐)
2016/12/07 Javascript
浅谈jQuery的bind和unbind事件(绑定和解绑事件)
2017/03/02 Javascript
JS组件系列之MVVM组件 vue 30分钟搞定前端增删改查
2017/04/28 Javascript
详解vue项目中如何引入全局sass/less变量、function、mixin
2018/06/02 Javascript
Vue路由模块化配置的完整步骤
2019/08/14 Javascript
vue登录页实现使用cookie记住7天密码功能的方法
2021/02/18 Vue.js
Django框架使用富文本编辑器Uedit的方法分析
2018/07/31 Python
python关于矩阵重复赋值覆盖问题的解决方法
2019/07/19 Python
作风建设年活动总结
2014/08/27 职场文书
2014年环保局工作总结
2014/12/11 职场文书
老公写给老婆的检讨书
2015/05/06 职场文书
计划生育责任书
2015/05/09 职场文书
债务追讨律师函
2015/06/24 职场文书
读《教育心理学》心得体会
2016/01/22 职场文书
导游词之上海杜莎夫人蜡像馆
2019/11/22 职场文书
Golang二维切片初始化的实现
2021/04/08 Golang
uniapp开发小程序的经验总结
2021/04/08 Javascript
python获取对象信息的实例详解
2021/07/07 Python