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

关于官网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>

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

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

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

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

步骤四：执行父组件监听子组件的事件father1；

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

赞 (0)

相关推荐

  • vue的事件绑定与方法详解

    一.在vue中,绑定事件,用v-on:事件类型, 如绑定一个点击事件, 我们可以这样子做 window.onload = function () { var c = new Vue({ el : 'body', methods : { say : function(){ alert( '欢迎学习vue' ); } } }); } <input type="button" value="点我" v-on:click="say();"/>

  • vue v-on监听事件详解

    在html或jsp页面中我们总能碰到监听DOM事件来触发javaScript代码,下面我们就简单聊聊Vue.js中的监听事件是怎么处理的. 在vue.js中监听事件是通过v-on指令来实现的,先看一下简单的监听事件代码. <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <scrip

  • 浅谈Vue.js 组件中的v-on绑定自定义事件理解

    浅谈Vue.js 组件中的v-on绑定自定义事件理解

    每个 Vue 实例都实现了事件接口(Events interface),即: 使用 $on(eventName) 监听事件 使用 $emit(eventName) 触发事件 Vue的事件系统分离自浏览器的EventTarget API.尽管它们的运行类似,但是$on 和 $emit 不是addEventListener 和 dispatchEvent 的别名. 另外,父组件可以在使用子组件的地方直接用 v-on 来监听子组件触发的事件. 下面是一个文档上面的例子: 2017年4月11日更新 <d

  • VueJS事件处理器v-on的使用方法

    本文介绍了VueJS事件处理器v-on的使用方法,分享给大家,具体如下: 事件监听可以使用 v-on 指令. v-on:click表达式 HTML: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title> <script src="https://cdn.bootc

  • vue.js绑定事件监听器示例【基于v-on事件绑定】

    vue.js绑定事件监听器示例【基于v-on事件绑定】

    本文实例讲述了vue.js绑定事件监听器.分享给大家供大家参考,具体如下: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maxi

  • 浅谈Vue.js中的v-on(事件处理)

    浅谈Vue.js中的v-on(事件处理)

    Vue.js的事件处理 监听事件 我们可以用 v-on 指令监听 DOM 事件来触发一些 JavaScript 代码. <div class="box"> {{msg}} <input type="button" value="按钮" v-on:click="msg+=1"/> </div> var vm = new Vue({ el:".box", data:{ msg

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

    关于官网vue中v-on绑定自定义事件的个人理解 对官网实例进行了一些修改,如下图: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>v-on绑定自定义事件</title> <script src="vue.js"></script> </head>

  • Vue中通过属性绑定为元素绑定style行内样式的实例代码

    1.直接在元素上通过:style的形式,书写样式对象 <h1 :style="{color:'red','font-weight':200}">这是一个H1</h1> 2.将样式对象定义在data中,并直接引用到:style中 1:在data上定义样式 data:{ styleObj1:{color:'blue','font-weight':200,'font-size':'40px'}, } 2:在元素中,通过属性绑定的形式,将样式对象应用到元素中 <h

  • vue中view-model双向绑定基础原理解析

    利用Object.defineProperty进行数据劫持 代码如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Vue

  • vue中element-ui表格缩略图悬浮放大功能的实例代码

    vue中element-ui表格缩略图悬浮放大功能的实例代码

    element-ui界面非常简洁和美观,提供的组件可以满足绝大多数的应用场景,当表格中显示了图片的缩略图时,想要鼠标浮动在缩略图上时放大图片的效果,该如何实现呢?element-ui虽然没有直接提供图片悬浮放大的组件,但是可以使用Popover弹出框组件,一样实现效果,如下: 具体的代码(此处只是图片单元格的代码,其它代码省略): <el-table-column prop="picture" header-align="center" align="

  • 在vue中多次调用同一个定义全局变量的实例

    在Vue开发中,有很多场景会用到多次重复的API请求. 例如: '//192.168.1.117:1009/' 在多个地方调用,每次书写很麻烦,后期项目维护也不好管理.我们可以在src目录下创建一个api文件夹. 例如: 定义一个公共方法. config.js: export const http='//192.168.1.117:1009/' 在任何页面调用将http方法暴露出来 import {http} from "../../src/api/config" this.$http

  • vue中使用element-ui进行表单验证的实例代码

    vue中使用element-ui进行表单验证的实例代码

    element-ui 中验证 一.简单逻辑验证(直接使用rules) 实现思路 •html中给el-form增加 :rules="rules" •html中在el-form-item 中增加属性 prop="名称" •js中直接在data中定义rules:{} •html部分 <el-form ref="form" :rules="rules" :model="form" label-width=&q

  • 在vue中动态添加class类进行显示隐藏实例

    如下所示: <div class="status_button"> <el-button type="success" @click="checkSite" >查岗</el-button> <el-button type="danger">视频</el-button> </div> <!-- 查岗部分显示影藏 --> <div class

  • 在vue中使用cookie记住用户上次选择的实例(本次例子中为下拉框)

    最近工作中碰到一个需求,添加一条数据时,自动记住上次选择的下拉框的数据,刚开始觉得没思路,后来请教了项目组长,组长直接一句,这不很简单吧,直接用cookie,我:....... 好吧,都王的差不多了,于是经过一番百度实践,测试,总算是可以了,接下来就说说实践以及一些坑! 开发环境: webpack+vue+java后台 要实现这个小功能,其实只需要在vue中写相应的功能就可以了,并不需要在后台写什么,但是如果写的不正确,后台也是会报错的,代码如下: 先把这几个方法写上,删除的看需求决定需不需要:

  • vue父组件点击触发子组件事件的实例讲解

    最近在学习Vue父子组件通信的问题,刚好遇到一个父子之间事件事件派发与接收,在这里记录一下,在这里我使用的是ref 给子组件注册引用信息.官网是这样解释的 ref 被用来给元素或子组件注册引用信息.引用信息将会注册在父组件的 $refs 对象上.如果在普通的 DOM 元素上使用,引用指向的就是 DOM 元素; 如果用在子组件上,引用就指向组件实例: 父组件app.vue <template> <div id="app"> <!--父组件--> <

  • 对vue 键盘回车事件的实例讲解

    如果是原生的input,使用 @keyup.enter就可以,若是使用了element-ui,则要加上native限制符,因为element-ui把input进行了封装,原事件就不起作用了,代码如下: <input v-model="form.name" placeholder="昵称" @keyup.enter="submit"> <el-input v-model="form.name" placehol

随机推荐