对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 相关文章推荐
Javascript常考语句107条收集
Mar 09 Javascript
javascript学习笔记(二十) 获得和设置元素的特性(属性)
Jun 20 Javascript
javascript特殊用法示例介绍
Nov 29 Javascript
jQuery实现可用于博客的动态滑动菜单完整实例
Sep 17 Javascript
jQuery on()方法绑定动态元素的点击事件实例代码浅析
Jun 16 Javascript
JavaScript中关于for循环删除数组元素内容时出现的问题
Nov 21 Javascript
JS三目运算(三元运算)方法详解
Mar 01 Javascript
js Dom实现换肤效果
Oct 21 Javascript
AnglarJs中的上拉加载实现代码
Feb 08 Javascript
Vue 根据条件判断van-tab的显示方式
Aug 03 Javascript
原生js+canvas实现验证码
Nov 29 Javascript
一起来了解一下JavaScript的预编译(小结)
Mar 01 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
ThinkPHP之R方法实例详解
2014/06/20 PHP
调用WordPress函数统计文章访问量及PHP原生计数器的实现
2016/03/21 PHP
浅谈laravel 5.6 安装 windows上使用composer的安装过程
2019/10/18 PHP
JavaScript DOM 学习第三章 内容表格
2010/02/19 Javascript
Jquery动态进行图片缩略的原理及实现
2013/08/13 Javascript
使用js实现雪花飘落效果
2013/08/26 Javascript
二叉树先序遍历的非递归算法具体实现
2014/01/09 Javascript
表单提交前触发函数返回true表单才会提交
2014/03/11 Javascript
javascript实现无限级select联动菜单
2015/01/02 Javascript
JS实现在网页中弹出一个输入框的方法
2015/03/03 Javascript
jQuery中$this和$(this)的区别介绍(一看就懂)
2015/07/06 Javascript
jQuery列表检索功能实现代码
2017/07/17 jQuery
浅谈mint-ui loadmore组件注意的问题
2017/11/08 Javascript
jQuery实现监听下拉框选中内容发生改变操作示例
2018/07/13 jQuery
koa socket即时通讯的示例代码
2018/09/07 Javascript
详解关于Angular4 ng-zorro使用过程中遇到的问题
2018/12/05 Javascript
vue鼠标悬停事件实例详解
2019/04/01 Javascript
基于Vue实现平滑过渡的拖拽排序功能
2019/06/12 Javascript
el-table树形表格表单验证(列表生成序号)
2020/05/31 Javascript
python基础教程之字典操作详解
2014/03/25 Python
Python中Django框架利用url来控制登录的方法
2015/07/25 Python
Python3学习urllib的使用方法示例
2017/11/29 Python
Python3 XML 获取雅虎天气的实现方法
2018/02/01 Python
python 统计一个列表当中的每一个元素出现了多少次的方法
2018/11/14 Python
python正则爬取某段子网站前20页段子(request库)过程解析
2019/08/10 Python
django 快速启动数据库客户端程序的方法示例
2019/08/16 Python
关于Python3爬虫利器Appium的安装步骤
2020/07/29 Python
美国知名的百货清仓店:Neiman Marcus Last Call
2016/08/03 全球购物
日本高岛屋百货购物网站:TAKASHIMAYA
2019/03/24 全球购物
自荐书封面下载
2013/11/29 职场文书
行政总监岗位职责
2013/12/05 职场文书
《姥姥的剪纸》教学反思
2014/02/25 职场文书
Python基础详解之邮件处理
2021/04/28 Python
golang中字符串MD5生成方式总结
2021/07/04 Golang
Win11控制面板快捷键是什么?Win11打开控制面板的方法汇总
2022/07/07 数码科技
MySQL深分页问题解决思路
2022/12/24 MySQL