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 相关文章推荐
AeroWindow 基于JQuery的弹出窗口插件
Jun 27 Javascript
javascript学习笔记之函数定义
Jun 25 Javascript
详解AngularJS中module模块的导入导出
Dec 10 Javascript
js实现简单的验证码
Dec 25 Javascript
jQuery实现下拉菜单(内容为时间)的实时更新及图表的随动更新的方法
Jul 07 Javascript
jQuery实现导航栏头部菜单项点击后变换颜色的方法
Jul 19 jQuery
深入浅出理解JavaScript闭包的功能与用法
Aug 01 Javascript
如何封装了一个vue移动端下拉加载下一页数据的组件
Jan 06 Javascript
详解Vue demo实现商品列表的展示
May 07 Javascript
小程序组件之自定义顶部导航实例
Jun 12 Javascript
微信小程序canvas截取任意形状的实现代码
Jan 13 Javascript
vue scroll滚动判断的实现(是否滚动到底部、滚动方向、滚动节流、获取滚动区域dom元素)
Jun 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
JavaScript 在线压缩和格式化收藏
2009/01/16 Javascript
javascript 密码强弱度检测万能插件
2009/02/25 Javascript
javascript 不间断的图片滚动并可点击
2010/01/15 Javascript
兼容主流浏览器的iframe自适应高度js脚本
2014/01/10 Javascript
javascript生成json数据简单示例分享
2014/02/14 Javascript
jQuery判断复选框是否勾选的原理及示例
2014/05/21 Javascript
jquery操作 iframe的方法
2014/12/03 Javascript
JavaScript实现twitter puddles算法实例
2014/12/06 Javascript
node.js中的fs.readFile方法使用说明
2014/12/15 Javascript
jQuery实现复选框成对选择及对应取消的方法
2015/03/03 Javascript
酷炫jQuery全屏3D焦点图动画效果
2016/03/22 Javascript
Node.js中.pfx后缀文件的处理方法
2017/03/10 Javascript
JavaScript中双向数据绑定详解
2017/05/03 Javascript
BootStrap Validator 根据条件在JS中添加或移除校验操作
2017/10/12 Javascript
vue2.0$nextTick监听数据渲染完成之后的回调函数方法
2018/09/11 Javascript
js获取本日、本周、本月的时间代码
2020/02/01 Javascript
vue 使用rules对表单字段进行校验的步骤
2020/12/25 Vue.js
python查询sqlite数据表的方法
2015/05/08 Python
python的格式化输出(format,%)实例详解
2018/06/01 Python
python+Splinter实现12306抢票功能
2018/09/25 Python
python-numpy-指数分布实例详解
2019/12/07 Python
Pytorch之parameters的使用
2019/12/31 Python
如何安装并在pycharm使用selenium的方法
2020/04/30 Python
基于Python爬取股票数据过程详解
2020/10/21 Python
python使用ctypes库调用DLL动态链接库
2020/10/22 Python
Vans荷兰官方网站:美国南加州的原创极限运动潮牌
2018/01/23 全球购物
KOHLER科勒美国官网:国际著名卫浴橱柜领先品牌
2020/06/27 全球购物
DOUGLAS荷兰:购买香水和化妆品
2020/10/24 全球购物
技术学校毕业生求职信分享
2013/12/02 职场文书
中国梦我的梦演讲稿
2014/04/23 职场文书
护理学院专科毕业生求职信
2014/06/28 职场文书
技术入股合作协议书
2014/10/07 职场文书
出国留学自荐信模板
2015/03/06 职场文书
2015年校医个人工作总结
2015/07/24 职场文书
Spring this调用当前类方法无法拦截的示例代码
2022/03/20 Java/Android
输入框跟随文字内容适配宽实现示例
2022/08/14 Javascript