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 相关文章推荐
如何实现iframe(嵌入式帧)的自适应高度
Jul 26 Javascript
css图片自适应大小
Nov 28 Javascript
javascript中声明函数的方法及调用函数的返回值
Jul 22 Javascript
简介JavaScript中substring()方法的使用
Jun 06 Javascript
JS中关于事件处理函数名后面是否带括号的问题
Nov 16 Javascript
利用iscroll4实现轮播图效果实例代码
Jan 11 Javascript
vue基于element的区间选择组件
Sep 07 Javascript
vue中使用mxgraph的方法实例代码详解
May 17 Javascript
JS中数据结构与算法---排序算法(Sort Algorithm)实例详解
Jun 17 Javascript
javascript中undefined的本质解析
Jul 31 Javascript
详解Angular Karma测试的持续集成实践
Nov 15 Javascript
JS数组索引检测中的数据类型问题详解
Jan 11 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
虫族 Zerg 热键控制
2020/03/14 星际争霸
关于PHP实现异步操作的研究
2013/02/03 PHP
PHP引用符&amp;的用法详细解析
2013/08/22 PHP
ThinkPHP中U方法的使用浅析
2014/06/13 PHP
PHP使用自定义方法实现数组合并示例
2016/07/07 PHP
Javascript 兼容firefox的一些问题
2009/05/21 Javascript
用jquery实现的模拟QQ邮箱里的收件人选取及其他效果(一)
2011/01/06 Javascript
通过jQuery源码学习javascript(一)
2012/12/27 Javascript
js转义字符介绍
2013/11/05 Javascript
jQuery实现定位滚动条位置
2016/08/05 Javascript
JS实现预加载视频音频/视频获取截图(返回canvas截图)
2017/10/09 Javascript
vue Element-ui input 远程搜索与修改建议显示模版的示例代码
2017/10/19 Javascript
使用Angular CLI快速创建Angular项目的一些基本概念和写法小结
2018/04/22 Javascript
layui 实现table翻页滚动条位置保持不变的例子
2019/09/05 Javascript
Node.js设置定时任务之node-schedule模块的使用详解
2020/04/28 Javascript
JavaScript中交换值的10种方法总结
2020/08/18 Javascript
vue仿携程轮播图效果(滑动轮播,下方高度自适应)
2021/02/11 Vue.js
python原始套接字编程示例分享
2014/02/21 Python
Python中使用PDB库调试程序
2015/04/05 Python
python简单实例训练(21~30)
2017/11/15 Python
python的dataframe转换为多维矩阵的方法
2018/04/11 Python
python中yaml配置文件模块的使用详解
2018/04/27 Python
python之django母板页面的使用
2018/07/03 Python
Python3爬虫学习之MySQL数据库存储爬取的信息详解
2018/12/12 Python
python plotly绘制直方图实例详解
2019/07/22 Python
详解如何使用rem或viewport进行移动端适配
2020/08/14 HTML / CSS
法国大使拉杆箱官网:DELSEY Paris
2018/03/20 全球购物
锐步英国官网:Reebok英国
2019/11/29 全球购物
公司中层干部的自我评价分享
2014/03/01 职场文书
工商干部先进事迹
2014/05/14 职场文书
小学生校园广播稿
2014/09/28 职场文书
文明单位申报材料
2014/12/23 职场文书
新郎答谢词
2015/01/04 职场文书
旅游投诉信范文
2015/07/02 职场文书
2016高三毕业赠言寄语
2015/12/04 职场文书
导游词之南京中山陵
2019/11/27 职场文书