vue实现绑定事件的方法实例代码详解

一、前言

vuejs中的事件绑定,使用<v-on:事件名 = 函数名>来完成的,这里函数名是定义在Vue实例中的methods对象中的,Vue实例可以直接访问其中的方法。

二、事件绑定方式

1、 直接在标签中写js方法

 <button v-on:click="alert('hi')">执行方法的第一种写法</button>

2、调用method的办法

<button v-on:click="run()">执行方法的第一种写法</button>

  <button @click="run()">执行方法的 简写 写法</button>
export default {
  data () {
  return {
   msg: '你好vue',
   list:[]
  }
  },
  methods:{
   run:function(){
    alert('这是一个方法');
    }
   }
 }

(1)方法传参,方法直接在调用时在方法内传入参数

 <button @click="deleteData('111')">执行方法传值111</button>
  <button @click="deleteData('222')">执行方法传值2222</button>
 deleteData(val){
   alert(val);
  },

(2)传入事件对象

 <button data-aid='123' @click="eventFn($event)">事件对象</button>
eventFn(e){
   console.log(e);
   // e.srcElement dom节点
   e.srcElement.style.background='red';
   console.log(e.srcElement.dataset.aid); /*获取自定义属性的值*/
  }

三、事件修饰符

1、stop  //阻止事件继续传播 即阻止它的捕获和冒泡过程

方法一: @click='show($event)'    我们有了事件对象后,我们函数中是不是就可以利用原生中的e.cancelBubble=true

方法二: @click.stop='show()'    只要在事件后面加 .stop  就可以阻止事件冒泡

举个例子:

实例:如下点击内部点击,阻止了冒泡过程,即只执行tz这个方法,如果不加.stop,先执行tz方法,后执行gett方法。即通过了冒泡这个过程。

<div v-on:click="gett">
 外部点击
 <div v-on:click.stop="tz">内部点击</div>
</div>

2、prevent    //阻止默认事件:

方法一: @click='show($event)'    我们有了事件对象后,我们函数中是不是就可以利用原生中的 e.preventDefault();

方法二: @click.prevent='show()'   只要在事件后面加 .prevent  就可以阻止默认事件。

举个例子:阻止了a标签的默认刷新

<a href="" v-on:click.prevent>点击</a>

3、capture // 添加事件监听器时使用事件捕获模式,即在捕获模式下触发

实例:在点击最里层的点击6时,gett方法先执行,因为gett方法在捕获模式执行的,先与冒泡事件。下列执行顺序 geet->set->tz ,因为后俩个还是冒泡模式下触发的事件。

<div v-on:click.capture="gett">外部点击5
 <div v-on:click="tz">内部点击5
  <div v-on:click="set">点击6</div>
 </div>
</div>

4、self //当前元素自身时触发处理函数时才会触发函数

原理:是根据event.target确定是否当前元素本身,来决定是否触发的事件/函数

实例:如果点击内部点击2,冒泡不会执行gett方法,因为event.target指的是内部点击2的dom元素,不是外部点击1的,所以不会触发自己的点击事件。

<div v-on:click.self="gett">
 外部点击1
 <div v-on:click="tz">内部点击2</div>
</div>

5、once //只触发一次

实例:

<div  v-on:click.once="tz">once</div>

6、键盘事件

方法一:@keydown='show()'    

当然我们传个$event  也可以在函数中获 ev.keyCode

if(ev.keyCode==13){
 alert('你按了回车键!')
}

方法二:

 <input type="text" @keyup.enter="show()">回车执行
 <input type="text" @keydown.up='show()' >上键执行
 <input type="text" @keydown.down='show()' >下键执行
 <input type="text" @keydown.left='show()' >左键执行
 <input type="text" @keydown.right='show()' >右键执行

总结

以上所述是小编给大家介绍的vue实现绑定事件的方法实例代码详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

时间: 2019-06-18

解决VUE框架 导致绑定事件的阻止冒泡失效问题

前面遇到了一个问题就是VUE框架内部做了一些处理,使得在我们通过v-for渲染DOM的时候添加新元素的时候,绑定事件也能对新增的元素有效. 而这次遇到的问题则是,原本绑定事件中(该函数没有写在vue实例的methods中),导致阻止冒泡事件失效了.无论是return false 还是event.stopPropagation();都无效. 此时需要通过用VUE提供了事件修饰符来处理,比如阻止事件冒泡@click.stop='xx()' .stop .prevent .capture .self

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动态生成dom并且自动绑定事件

用jquery的时候你会发现,页面渲染后动态生成的dom,在生成之前的代码是没办法取到相应对象的,必须重新获取.但是vue基于数据绑定的特性让它能生成的时候直接绑定数据. html: <div id="app"> <table v-for="table in tables"> <tr v-for="row in table.row"> <td style="width:80px;float:le

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 绑定对象内点击事件失效问题

突然的发现某段 html 代码中点击事件失效了. 仔细观察才发现,这段代码内的元素都在 vue 绑定对象中. 因此失效. 解决办法是将绑定对象内的元素点击事件换成 v-on:click. 以上这篇解决vue 绑定对象内点击事件失效问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

Vue.js事件处理器与表单控件绑定详解

事件处理主要通过v-on这个指令来执行. 事件监听及方法处理 1.简单的可以直接内嵌在页面. 2.可以通过将方法定义在methods中,然后再v-on中执行 3.可以通过绑定给函数传递参数,还可以传递通过变量$event给函数传递原生DOM事件. <div id="app-1"> <button v-on:click="counter += 1">增加1</button> <p>这个按钮被点击了{{counter}}&

vue绑定事件后获取绑定事件中的this方法

使用$event传递参数(事件本身) <input v-model="checknames" @change="changecheckbox(item,$event)" style="float: right" type="checkbox" :value="index" > changecheckbox(val,element) { console.log( element.currentTa

jQuery中on绑定事件后引发的事件冒泡问题如何解决

用on绑定时,我把子元素的 绑定到 document,而把父元素绑定到上级元素,导致 return false 阻止冒泡无效. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999

vue中子组件的methods中获取到props中的值方法

父子组件通信 这个官网很清楚,也很简单,父组件中使用v-bind绑定传送,子组件使用props接收即可 例如: 父组件中 <template> <div> <head-top></head-top> <section class="data_section"> <header class="chart-title">数据统计</header> <el-row :gutter=&

一览画面点击复选框后获取多个id值的方法

在web开发中经常会遇到一览画面中每一条记录前都带一个复选框,点击后选中该条记录进行删除.修改.查看等操作. 修改和查看都是获取一条记录的id值后传递到后台进行查询获取该记录对象的各种属性值,再显示到画面上. 我说的重点是选中多条记录后进行批量删除,如何获取多条记录的id值是问题的关键.首先是在jsp页面中全选中复选框的方法. 代码如下: function checkEvent(name, allCheckId) { var allCk = document.getElementById(all

js判断图片加载完成后获取图片实际宽高的方法

本文实例讲述了js判断图片加载完成后获取图片实际宽高的方法.分享给大家供大家参考,具体如下: 通常,我们会用jq的.width()/.height()方法获取图片的宽度/高度或者用js的.offsetwidth/.offsetheight方法来获取图片的宽度/高度,但这些方法在我们通过样式设置了图片的宽高后获取的就不是图片的实际宽高,这显然在有些时候不是我们想要的结果,那么有没有一种方法来获取这样的实际宽高呢?答案是有的.下面的代码就能解决这样的问题: <img src="01.jpg&q

PHP基于反射获取一个类中所有的方法

本文实例讲述了PHP基于反射获取一个类中所有的方法.分享给大家供大家参考,具体如下: 当我们使用一个类时既没有源码也没有文档时(尤其是php扩展提供的类,比如mysqli,Redis类),我们该怎么知道这个类中提供了哪些方法,以及每个方法该怎么使用呢,此时就该PHP中强大的反射登场了,下面以Redis扩展为例用代码演示: <?php $ref = new ReflectionClass('Redis'); $consts = $ref->getConstants(); //返回所有常量名和值

C#编程获取资源文件中图片的方法

本文实例讲述了C#编程获取资源文件中图片的方法.分享给大家供大家参考.具体实现方法如下: using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Reflection; using System.Drawing; namespace CL { public class RES { /// <summary> /// 定义一个资源文件名 资源文件名 = 工

详解C#编程获取资源文件中图片的方法

详解C#编程获取资源文件中图片的方法 本文主要介绍C#编程获取资源文件中图片的方法,涉及C#针对项目中资源文件操作的相关技巧,以供借鉴参考.具体内容如下: 例子: using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Reflection; using System.Drawing; namespace CL { public class RES { /

vue webpack打包后图片路径错误的完美解决方法

项目用run dev build 打包后,发现很多图片都不显示,在本地是没有问题的啊!找原因发现通过webpack+vuecli默认打包的css.js等资源,路径都是绝对的. 因为我们的图片路径都是经历过文件夹的,在本地引用图片是绝对路径,但打包后因为把配置的static文件夹当成了根路径,所以很多图片找不到都不显示. 解决办法如图: (1). 修改 assetsPublicPath: './' (2).打开webpack.prod.conf.js,在output:增加 publicPath:

Ajax异步获取html数据中包含js方法无效的解决方法

页面上使用js写了一个获取后台数据的方法 function data() { var tab = $("#dic") $.ajax({ url: '../demo.ashx?method=GetList', data: {}, dataType: 'json', type: 'post', async: true, success: function (data) { //console.log(data); var parentStr = ''; $.each(data, funct