对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 相关文章推荐
js 动态添加标签(新增一行,其实很简单,就是几个函数的应用)
Mar 26 Javascript
input输入框鼠标焦点提示信息
Mar 17 Javascript
AngularJS中$watch和$timeout的使用示例
Sep 20 Javascript
Google 爬虫如何抓取 JavaScript 的内容
Apr 07 Javascript
angular中两种表单的区别(响应式和模板驱动表单)
Dec 06 Javascript
谈谈JavaScript中super(props)的重要性
Feb 12 Javascript
jQuery+ajax实现批量删除功能完整示例
Jun 06 jQuery
layui table设置某一行的字体颜色方法
Sep 05 Javascript
如何实现一个简易版的vuex持久化工具
Sep 11 Javascript
vue 使用v-for进行循环的实例代码详解
Feb 19 Javascript
vue自定义树状结构图的实现方法
Oct 18 Javascript
在HTML中使用JavaScript的两种方法
Dec 24 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中Cookie与 Session使用详解
2013/04/30 PHP
新浪SAE云平台下使用codeigniter的数据库配置
2014/06/12 PHP
php快速查找数据库中恶意代码的方法
2015/04/01 PHP
php实现分页显示
2015/11/03 PHP
php.ini中date.timezone设置详解
2016/11/20 PHP
用javascript实现点击链接弹出&quot;图片另存为&quot;而不是直接打开
2007/08/15 Javascript
一个JS小玩意 几个属性相加不能超过一个特定值.
2009/09/29 Javascript
extJs 下拉框联动实现代码
2010/04/09 Javascript
使用jquery中height()方法获取各种高度大全
2014/04/02 Javascript
js判断当页面无法回退时关闭网页否则就history.go(-1)
2014/08/07 Javascript
JavaScript判断按钮被点击的方法
2015/12/13 Javascript
基于JS判断iframe是否加载成功的方法(多种浏览器)
2016/05/13 Javascript
BootStrap中按钮点击后被禁用按钮的最佳实现方法
2016/09/23 Javascript
详解Vue.use自定义自己的全局组件
2017/06/14 Javascript
bootstrap paginator分页前后台用法示例
2017/06/17 Javascript
node通过express搭建自己的服务器
2017/09/30 Javascript
Angular动画实现的2种方式以及添加购物车动画实例代码
2018/08/09 Javascript
javascript实现前端input密码输入强度验证
2020/06/24 Javascript
[40:31]Secret vs Alliacne 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
[45:17]DOTA2-DPC中国联赛定级赛 Phoenix vs DLG BO3第三场 1月9日
2021/03/11 DOTA
在Python的Django框架中生成CSV文件的方法
2015/07/22 Python
Python黑帽编程 3.4 跨越VLAN详解
2016/09/28 Python
django之session与分页(实例讲解)
2017/11/13 Python
Python 存储字符串时节省空间的方法
2019/04/23 Python
Django 响应数据response的返回源码详解
2019/08/06 Python
Python xml、字典、json、类四种数据类型如何实现互相转换
2020/05/27 Python
pycharm远程连接vagrant虚拟机中mariadb数据库
2020/06/05 Python
解决Windows下python和pip命令无法使用的问题
2020/08/31 Python
基于python爬取链家二手房信息代码示例
2020/10/21 Python
Django 实现图片上传和下载功能
2020/12/31 Python
Python try except finally资源回收的实现
2021/01/25 Python
请问如下代码执行后a和b的值分别是什么
2016/05/05 面试题
大学生交通专业求职信
2014/09/01 职场文书
2015年三好一满意工作总结
2015/07/24 职场文书
高中生社会实践心得体会
2016/01/14 职场文书
浅谈Python从全局与局部变量到装饰器的相关知识
2021/06/21 Python