Vue: 事件的基本使用

已于 2022-05-11 17:13:04 修改
阅读量460 收藏 2
点赞数 2
文章标签： vue.js 前端 javascript
于 2022-05-02 22:27:13 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_55435847/article/details/124547839
版权
本文介绍了Vue事件的基本使用，包括v-on或@符号绑定事件，回调方法配置在methods对象中，强调methods内函数不应使用箭头函数以保持this指向Vue实例。同时，讨论了如何传递参数以及展示了不同事件指令修饰符在实际案例中的应用。
摘要由CSDN通过智能技术生成

一丶Vue事件的基本使用

1丶  使用v-on:xxx 或 @xxx绑定事件，其中xxx是事件

2丶  使用的回调方法需要配置在methods对象中，最终会在Vue的实例上

3丶  methods中配置的函数，不用箭头函数！否者this就不是Vue的实例了

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

5丶  @click = "demo" 和 @click="demo($event)"效果一致，但后者可以传参。

二丶通过绑定Vue案例演示

说明: Vue的不同绑定事件的指令修饰符控制了4个按钮的事件

代码演示:<

最低0.47元/天 解锁文章
又是面向Java这个对象的一天
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue基础之事件简写、事件对象、冒泡、默认行为、键盘事件实例分析
明月如霜丶
05-09 744
v-on:click/mouseover...... 简写的: @click="" 推荐 事件对象: @click="show($event)" 事件冒泡: 阻止冒泡: a). ev.cancelBubble=true; b). @click.stop ...
Web学习——vue的基本使用之事件对象
威威的博客
02-10 1109
目录1.事件对象2.使用事件对象阻止冒泡3.使用vue的方式来阻止事件冒泡4.阻止元素的默认行为5.使用vue的方式阻止元素的默认行为6.让事件执行一次7.键盘事件8.用vue的方式来监听键盘事件某个键9.鼠标事件的按键修饰符 1.事件对象 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="js/vue.
vue的事件对象，方法执行
weixin_34122548的博客
04-21 599
方法都写在methods重，有两种写法：1、 getMsg:function(){ alert(); }, 这种写法就是对象中的方法 2、 getMsg1(){ alert(); }注意没有function,否则报错 对于view上面的事件有两种方式定义： v-on:click="""这种方式 或者@click...
VUE的事件对象
Cool_so_cool的博客
05-01 288
绑定事件时，可以有小括号，也可以没有 1.在绑定事件时，如果没有小括号，那么第一个参数就是事件对象 2. 如果有小括号，但是没有传参，那么e默认是undefined； 3. 如果需要事件对象，并且需要传参，那么需要在绑定时使用**$event进行占位；** <body> <div id="app"> <button @click="fn($ev...
vue中事件的基本使用
weixin_58384302的博客
10-17 383
1.事件的绑定 1.使用v-on:xxx 或 @xxx 绑定事件，其中xxx是事件名； 2.事件的回调需要配置在methods对象中，最终会在vm上； 3.methods中配置的函数，不要用箭头函数！否则this就不是vm了； 4.methods中配置的函数，都是被Vue所管理的函数，this的指向是vm 或 组件实例对象； 5.@click="demo" 和 @click="demo($event)" 效果一致，但后者可以传参； 事件传参可以传自定义值,只传自定义值时,将拿不到e...
peel-vue:vue的最基本功能
05-24
"peel-vue"看起来是Vue.js的一个简化版本，专注于其最基本的功能，即双向数据绑定和指令系统。在这个简化的实现中，它可能去除了Vue.js的一些高级特性，如组件化、路由、状态管理等，以提供一个更轻量级的选择。 **...
one-vue:基本的UI组件
04-28
5. **依赖管理**：使用包管理器（如npm）的配置文件（package.json），列出了项目所依赖的其他库和它们的版本。 6. **测试**：可能包含单元测试和集成测试，确保组件的稳定性和功能完整性。 7. **许可证文件**：...
maptalks-vue：基于maptalks，threejs 3d地图vue框架
04-02
4. **3D元素创建**：使用`threejs`创建3D几何体，结合`maptalks`进行定位和展示。 5. **交互功能实现**：绑定地图和3D元素的事件，实现用户交互功能。 6. **优化和调试**：利用`.browserslistrc`和`postcss.config....
fullcalendar-vue:FullCalendar的官方Vue组件
04-29
### 基本使用 在Vue模板中，你可以这样使用`<calendar>`组件： ```html <calendar :events="events" /> export default { data() { return { events: [ // 事件数据 ], }; }, }; ``` ### 配置项...
详解vue事件对象、冒泡、阻止默认行为
08-31
本篇文章主要介绍了详解vue事件对象、冒泡、阻止默认行为，这里整理了详细的代码,有需要的小伙伴可以参考下。
在 vue 中使用 事件对象e
miracle_linlei的博客
09-28 876
在 vue 中使用 事件对象e
Vue（六）事件基本使用
憨憨的博客
03-12 286
总结 1、事件使用v-on：xxx或@xxx绑定，xxx指事件名 2、事件的回调需要配置在methods对象中，最终会在vm上 3、methods中配置的函数都是被Vue管理的函数，this指向vm或组件实例对象,如果使用了箭头函数其指向会发生改变。 4、@click="met"和@click="met($event)'效果一样 案例 ...
Vue的事件对象
做一个有知识的流氓
02-19 203
我想见你，不远万里 在此附上我的QQ: 2489757828 有问题的话可以一同探讨 我的github: 李大玄 我的私人博客: 李大玄 我的简书: 李大玄 我的CSDN: 李大玄
Vue中获取当前元素事件的event对象用法（二）——target-当前点击元素 & currentTarget-绑定事件元素 & 获取兄弟元素、子元素、父元素
weixin_44867717的博客
07-07 9550
vue
Vue 对象
最新发布
翱翔-蓝天
05-21 470
在 Vue.js 中，操作对象是常见的任务之一。Vue 提供了许多方法和指令来方便地操作对象，包括动态添加属性、遍历对象、响应式更新等。以下是一些常见的对象操作及其详细说明和示例。
Vue事件处理的基本使用
见证自己学习,成长的记录
12-24 752
事件处理在vue中也是非常重要的一项技术，它类似于js的事件处理，但是也有不同，下面就简单介绍一下在vue中如何进行事件使用以及一些要点1 使用v-on:xxx或者简写成@xxx绑定事件，其中xxx是事件名称2 事件的回调需要配置在methods对象中，最终会在vm上3 methods中配置的函数，不要用箭头函数！否则this就不是vm了4 methods中配置的函数，都是被vue管理的函数，this的指向是vm或组件实例对象5 @click="xxx"和@click="xxx(100,eve。
修改webpack的配置 ，vue的组件及使用，模板语法，指令事件对象，事件修饰符
Yanxiaona111的博客
11-14 242
002 1. 修改webpack 的配置 官网打开 Vue CLI 目录结构   src ： 开发时编写代码的位置   main.js 入口文件 App.vue 首屏加载的页面    如果需要修改webpack的配置，需要在项目根目录下创建 vue.config.js   具体的配置参考：https://cli.vuejs.org/zh/config/ 2. vue的组件   1. 组件是以 .vue 结尾的   2. 组件的结构： <template><template&gt
Vue—事件对象详解
雷雨天的雷胖子
10-04 1161
<input :value='val' @input="$emit('update', $event.target.value)"/> 当触发input事件时，$event是当前的事件对象，$event.target.value指向的是当前输入框的值。
Vue框架入门：解析Vue特性和基本使用
- **定义Vue控制的DOM区域**：使用Vue的挂载点（通常是一个带有特定ID的`<div>`元素）来标识Vue将控制哪一部分DOM。 - **创建Vue实例**：通过`new Vue()`创建一个新的Vue实例，配置项包括挂载点（el）、数据（data...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值