Vue事件处理的基本使用

简介: 笔记

前言


事件处理在vue中也是非常重要的一项技术,它类似于js的事件处理,但是也有不同,下面就简单介绍一下在vue中如何进行事件使用以及一些要点


1 事件基本使用


在这里我们使用单击事件为例,简单讲讲在vue中单击事件的编写以及细节问题


在vue中想要实现点击事件,需要新增一个指令:v-on:click,后面跟对应的函数

<button v-on:click="showInfo">点我提示信息</button>


对于这个函数的编写,也是有讲究的,如果按照下图直接按照传统函数JS编写会报错

2.png3.png

因为vue实例读取不到这个函数,我们需要配置methods属性,把事件的回调写到里面

4.png

再次运行,完美解决

5.png

其他回调函数也是一样的写法,都要写在vue的属性methods里面,让vue可以读取到这个回调函数


2 验证问题(是否可以传参和this的指向)


基本的事件使用之后,会有两个疑问:

1 回调函数是否可以传参

2 回调函数里面的this是什么

下面一一验证

6.png

验证1:发现只能接受到第一个参数,第一个参数就是调用函数本身的元素,我们通过这个元素获取到了它对应的文本

验证2:函数里面当前的this就是vue实例对象

7.png

3 事件指向this原则


当我们写vue回调函数的时候,最好不要写成箭头函数,不然这个this就不是vue实例对象,而是全局的window对象

所有被vue管理的函数,最好都要写普通函数,不要写成剪头函数,不然就使用不了this了

8.png9.png

所以有一个原则:所有被vue管理的函数,最好都要写普通函数,不要写成剪头函数,不然就使用不了this了

4 事件简写模式


v-on-click可以简写成@click,效果是一样的(v-on=@),由于后者编写比较简便,通常后者使用的更多

image.pngimage.png

5 自由传参以及参数占位符


如果我们想传参,比如点击删除按钮,需要吧id传到函数里面,我们可以在方法后跟参数

但是这样就收不到event了

image.pngimage.png

但是这样就收不到event了

image.pngimage.png

那么这个问题怎么解决呢?其实vue提供了占位符可以给供我们使用

注意:$event是vue的关键字,只能这么写,不然识别不出来,而且参数顺序必须对上!

image.png


6总结


1 使用v-on:xxx或者简写成@xxx绑定事件,其中xxx是事件名称


2 事件的回调需要配置在methods对象中,最终会在vm上


3 methods中配置的函数,不要用箭头函数!否则this就不是vm了


4 methods中配置的函数,都是被vue管理的函数,this的指向是vm或组件实例对象


5 @click="xxx"和@click="xxx(100,e v e n t ) " 效果是一样的,但是后者可以传参,可以用event作为参数占位符,需要注意传参和接受参数的顺序是否一致


相关文章
|
2天前
|
缓存 JavaScript 前端开发
《基础篇第4章:vue2基础》:使用vue脚手架创建项目
《基础篇第4章:vue2基础》:使用vue脚手架创建项目
10 3
|
4天前
|
JavaScript 前端开发 开发者
Vue v-for 进阶指南:in 与 of 的区别及应用场景 | 笔记
Vue.js 中的 v-for 是强大的遍历指令,但其中的 in 和 of 关键字往往被开发者忽视。尽管它们的用法相似,但适用的场景和数据结构却各有不同。本文将详细探讨 v-for 中 in 和 of 的区别、适用场景以及在实际开发中的最佳使用时机。通过理解它们的差异,你将能够编写更加高效、简洁的 Vue.js 代码,灵活应对各种数据结构的遍历需求。
40 6
|
2天前
|
缓存 JavaScript
Vue 中 computed 与 method 的区别
【10月更文挑战第15天】computed 和 method 是 Vue 中两个重要的选项,它们在功能和特点上存在着明显的区别。理解并合理运用它们的区别,可以帮助我们构建更高效、更具可维护性的 Vue 应用。在实际开发中,要根据具体情况灵活选择使用,以满足不同的需求。
5 2
|
2天前
|
JavaScript 搜索推荐 UED
vue的自定义指令
【10月更文挑战第14天】Vue 自定义指令为我们提供了一种强大的工具,使我们能够更灵活地控制和扩展 Vue 应用的行为。通过合理地使用自定义指令,可以提高开发效率,增强应用的功能和用户体验。
|
3天前
|
JavaScript
|
4天前
|
JavaScript UED
Vue + ElementUI 实现动态添加和删除表单项的多层嵌套表单
【10月更文挑战第5天】本示例展示了如何在 Vue.js 中使用 Element UI 组件实现动态添加和删除嵌套表单项。该表单包含设备信息、设备部位及其对应的任务列表,支持用户动态添加设备部位和任务,并提供相应的表单验证规则。
23 0
Vue + ElementUI 实现动态添加和删除表单项的多层嵌套表单
|
4天前
|
JavaScript
《进阶篇第9章》学习vuex知识点后练习:求和案例_纯vue版代码
《进阶篇第9章》学习vuex知识点后练习:求和案例_纯vue版代码
10 1
|
20小时前
|
JavaScript 前端开发 Java
vue2知识点:Vue封装的过度与动画
vue2知识点:Vue封装的过度与动画
7 0
|
2天前
|
JavaScript UED
在 Vue 中使用自定义指令
【10月更文挑战第14天】通过合理地使用自定义指令,可以为 Vue 应用带来更多的灵活性和扩展性,提高开发效率和用户体验。
|
3天前
|
JavaScript 前端开发 容器
vue的哈希模式下乾坤微应用的使用
vue的哈希模式下乾坤微应用的使用