对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 相关文章推荐
JavaScipt基本教程之JavaScript语言的基础
Jan 16 Javascript
js 数组克隆方法 小结
Mar 20 Javascript
往光标所在位置插入值的js代码
Sep 22 Javascript
JavaScript判断变量是对象还是数组的方法
Aug 28 Javascript
JavaScript去除数组里重复值的方法
Jul 13 Javascript
Angularjs CURD 详解及实例代码
Sep 14 Javascript
微信小程序开发图片拖拽实例详解
May 05 Javascript
微信小程序后台解密用户数据实例详解
Jun 28 Javascript
微信小程序 wx:for遍历循环使用实例解析
Sep 09 Javascript
vue.js实现照片放大功能
Jun 23 Javascript
js获取url页面id,也就是最后的数字文件名
Sep 25 Javascript
vue.js封装switch开关组件的操作
Oct 26 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
PHP5 操作MySQL数据库基础代码
2009/09/29 PHP
PHP5.3以上版本安装ZendOptimizer扩展
2015/03/27 PHP
php使用Header函数,PHP_AUTH_PW和PHP_AUTH_USER做用户验证
2016/05/04 PHP
php查询操作实现投票功能
2016/05/09 PHP
ThinkPHP5框架实现简单的批量查询功能示例
2018/06/07 PHP
关于document.cookie的使用javascript
2010/10/29 Javascript
js解决弹窗问题实现班级跳转DIV示例
2014/01/06 Javascript
jQuery属性选择器用法示例
2016/09/09 Javascript
jQuery按需加载轮播图(web前端性能优化)
2017/02/17 Javascript
Bootstrap jquery.twbsPagination.js动态页码分页实例代码
2017/02/20 Javascript
jquery dataTable 后台加载数据并分页实例代码
2017/06/07 jQuery
JavaScript hasOwnProperty() 函数实例详解
2017/08/04 Javascript
Vue 实现列表动态添加和删除的两种方法小结
2018/09/07 Javascript
微信小程序时间标签和时间范围的联动效果
2019/02/15 Javascript
Vue的click事件防抖和节流处理详解
2019/11/13 Javascript
vue3中轻松实现switch功能组件的全过程
2021/01/07 Vue.js
Node.js 中如何收集和解析命令行参数
2021/01/08 Javascript
[01:42]辉夜杯战队访谈宣传片—FANTUAN
2015/12/25 DOTA
python中二维阵列的变换实例
2014/10/09 Python
Python2.7基于淘宝接口获取IP地址所在地理位置的方法【测试可用】
2017/06/07 Python
python修改list中所有元素类型的三种方法
2018/04/09 Python
Python 脚本的三种执行方式小结
2019/12/21 Python
python统计函数库scipy.stats的用法解析
2020/02/25 Python
Python pandas如何向excel添加数据
2020/05/22 Python
Staples加拿大官方网站:办公用品一站式采购
2016/09/25 全球购物
PacSun官网:加州生活方式服装、鞋子和配饰
2018/03/10 全球购物
香港家用健身器材、运动器材及健康美容仪器专门店:FitBoxx
2019/12/05 全球购物
《母亲的恩情》教学反思
2014/02/13 职场文书
2014年平安夜寄语
2014/12/08 职场文书
商务英语求职信范文
2015/03/19 职场文书
预备党员考察意见范文
2015/06/01 职场文书
骆驼祥子读书笔记
2015/06/26 职场文书
军训后的感想
2015/08/07 职场文书
position:sticky 粘性定位的几种巧妙应用详解
2021/04/24 HTML / CSS
Go语言基础map用法及示例详解
2021/11/17 Golang
python 离散点图画法的实现
2022/04/01 Python