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


Posted in Javascript onJune 20, 2019

一、前言

  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实现绑定事件的方法实例代码详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
JavaScript Event学习第三章 早期的事件处理程序
Feb 07 Javascript
jQuery Ajax使用 全解析
Dec 15 Javascript
JS在textarea光标处插入文本的小例子
Mar 22 Javascript
谈谈关于JavaScript 中的 MVC 模式
Apr 11 Javascript
jQuery实现非常实用漂亮的select下拉菜单选择效果
Nov 06 Javascript
JavaScript必知必会(九)function 说起 闭包问题
Jun 08 Javascript
NODE.JS跨域问题的完美解决方案
Oct 20 Javascript
Popup弹出框添加数据实现方法
Oct 27 Javascript
基于casperjs和resemble.js实现一个像素对比服务详解
Jan 10 Javascript
在Vue项目中使用jsencrypt.js对数据进行加密传输的方法
Apr 17 Javascript
node后端服务保活的实现
Nov 10 Javascript
js+css实现扇形导航效果
Aug 18 Javascript
javascript实现5秒倒计时并跳转功能
Jun 20 #Javascript
JS实现的简单tab切换功能完整示例
Jun 20 #Javascript
Vue 页面权限控制和登陆验证功能的实例代码
Jun 20 #Javascript
jQuery实现文本显示一段时间后隐藏的方法分析
Jun 20 #jQuery
javascript获取select值的方法完整实例
Jun 20 #Javascript
node基于async/await对mysql进行封装
Jun 20 #Javascript
JavaScrip数组去重操作实例小结
Jun 20 #Javascript
You might like
php blowfish加密解密算法
2016/07/02 PHP
PHP Filter过滤器全面解析
2016/08/09 PHP
javascript引导程序
2008/10/26 Javascript
jQuery1.3.2 升级到jQuery1.4.4需要修改的地方
2011/01/06 Javascript
使用js实现关闭js弹出层的窗口
2014/02/10 Javascript
元素绑定click点击事件方法
2015/06/08 Javascript
JavaScript DOM 学习总结(五)
2015/11/24 Javascript
JavaScript转换与解析JSON方法实例详解
2015/11/24 Javascript
JS中多步骤多分步的StepJump组件实例详解
2016/04/01 Javascript
jquery 获取select数组与name数组长度的实现代码
2016/06/20 Javascript
node.js入门学习之url模块
2017/02/25 Javascript
ionic中的$ionicPlatform.ready事件中的通用设置
2017/06/11 Javascript
AngularJs实现聊天列表实时刷新功能
2017/06/15 Javascript
React Native 真机断点调试+跨域资源加载出错问题的解决方法
2018/01/18 Javascript
详解webpack 入门与解析
2018/04/09 Javascript
微信小程序request请求封装,验签代码实例
2019/12/04 Javascript
[41:11]完美世界DOTA2联赛PWL S2 Inki vs Magma 第一场 11.22
2020/11/24 DOTA
使用Python实现下载网易云音乐的高清MV
2015/03/16 Python
使用Python内置的模块与函数进行不同进制的数的转换
2016/03/12 Python
详谈Python2.6和Python3.0中对除法操作的异同
2017/04/28 Python
Python解决两个整数相除只得到整数部分的实例
2018/11/10 Python
windows下numpy下载与安装图文教程
2019/04/02 Python
Numpy的简单用法小结
2019/08/28 Python
pytorch GAN生成对抗网络实例
2020/01/10 Python
解决pycharm debug时界面下方不出现step等按钮及变量值的问题
2020/06/09 Python
艺术应用与设计个人的自我评价
2013/11/23 职场文书
医院护士的求职信范文
2013/12/26 职场文书
单位未婚证明范本
2014/01/18 职场文书
临床护理求职信
2014/04/26 职场文书
计算机专业自荐信范文
2014/05/28 职场文书
学校先进集体事迹材料
2014/05/31 职场文书
村主任“四风”问题个人对照检查材料思想汇报
2014/10/02 职场文书
2015年护理工作总结范文
2015/04/03 职场文书
大学生创业,为什么都会选择快餐饮?
2019/08/08 职场文书
关于MySQL中的 like操作符详情
2021/11/17 MySQL
python小型的音频操作库mp3Play
2022/04/24 Python