Vue基础-事件绑定

最新推荐文章于 2022-08-30 09:32:33 发布
最新推荐文章于 2022-08-30 09:32:33 发布
阅读量283 收藏
点赞数
分类专栏： vue
本文为博主原创文章，署名（BY）-非商业性使用（NC）-禁止演绎（ND），转载请附上原文链接和本申明。
本文链接：https://blog.csdn.net/qq_38060231/article/details/109115923
版权

事件绑定

一、事件绑定

绑定的方法名后面是否加（）结果可能不同哦，分别点击三个button按钮查看打印结果
在这里插入图片描述

二、事件修饰符

vue提供了一种事件修饰的语法

.stop：防止事件冒泡
.prevent：阻止事件的默认行为，比如< a >标签点击后会进行页面的跳转，这类默认事件虽然是冒泡后开始的，但不会因为.stop停止，阻止此类预设行为.prevent就派上用场了
举个例子吧

在这里插入图片描述
当我们点击提交的时候页面会自动跳转到abc这个网址
在这里插入图片描述

如果我们想阻止这个默认行为该怎么办呢？我们绑定一个事件在里面阻止默认行为就可以了，但在vue中可以不用这么麻烦

最低0.47元/天 解锁文章
多一点开心
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue的事件绑定与方法详解
08-29
主要为大家详细介绍了vue的事件绑定与方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
vue基础-品牌列表案例.zip
12-28
总的来说，“vue基础-品牌列表案例”是一个典型的前端开发实践，涵盖了Vue的基础特性如数据绑定、组件、事件处理以及基本的CRUD操作。通过这个案例，开发者可以深入了解Vue的工作原理，并将其应用到更复杂的项目中。
DOM 事件修饰符
可达鸭的博客
09-03 455
<!-- 阻止单击事件继续传播 --> <a v-on:click.stop="doThis"></a> <!-- 提交事件不再重载页面 --> <form v-on:submit.prevent="onSubmit"></form> <!-- 修饰符可以串联 --> <a v-on:click.stop.prevent="doThat"></a> <!-- 只有修饰符 --> &.
Vue常用的修饰符
limeng886549的博客
08-05 1082
v-on 指令常用修饰符： 1、.stop -调用 event.stopPropagation()，禁止事件冒泡。 2、.prevent -调用 event.preventDefault()，阻止事件默认行为。 3、.capture -添加事件侦听器时使用 capture 模式。 4、.self -只当事件是从侦听器绑定的元素本身触发时才触发回调。 5、.{keyCode | keyAlias} ...
Vue常用的修饰符?
kobezzZ的博客
08-04 771
v-on指令常用修饰符： .stop：- 调用event.stopPropagation()，禁止事件冒泡。 .prevent：- 调用event.preventDefault()，阻止事件默认行为。 .capture：- 添加事件侦听器时使用 capture 模式。 .self：- 只当事件是从侦听器绑定的元素本身触发时才触发回调。 .{keyCode | keyAlias}： - 只当事件是从...
vue常用修饰符
在北风吹起的时候加入我们的队伍 在秋雨到来的时候成为彼此的温暖
06-26 493
转载 原文：https://blog.csdn.net/qq_42238554/article/details/86592295
vue-基础-进阶-111
最新发布
02-01
"vue-基础-进阶-111"这个标题暗示我们将深入探讨Vue的基础概念以及一些进阶技巧。在这个主题中，我们将涵盖以下几个关键知识点： 1. **Vue实例**：Vue的核心是Vue实例，它是Vue应用程序的起点。通过创建一个新的Vue...
vue基础知识-菜鸟入门
01-03
Vue.js 是一款非常流行的前端JavaScript框架，用于构建用户界面。...通过深入理解和熟练掌握这些Vue基础知识，开发者能够构建出功能丰富、性能优秀的Web应用。不断学习和实践，是提升Vue技能的关键。
vue-admin-template-4.4.0.zip
03-01
1. **Vue.js**：Vue.js的核心特性包括组件化、虚拟DOM、响应式数据绑定和指令系统。它允许开发者通过声明式语法创建用户界面，并提供了丰富的生命周期钩子和插槽机制，便于理解和组织代码。 2. **前端框架**：Vue....
vue-adminTemplate.zip
06-02
综合这些文件，我们可以看出这个“vue-adminTemplate.zip”是一个使用Vue.js和Element UI的后台管理系统基础框架，包含了开发、测试、构建的全套配置，方便开发者快速搭建和定制自己的管理界面。开发者只需要根据...
vue常用的修饰符
weixin_45695200的博客
09-11 120
一、v-model修饰符 1 .lazy 输入框改变，这个数据就会改变，lazy这个修饰符会在光标离开input框才会更新数据： <input type="text" v-model.lazy="msg"> 2 .trim 输入框过滤首尾的空格 3 .number 先输入数字就会限制输入只能是数字，先字符串就相当于没有加number 二、事件修饰符 1 .stop 阻止事件冒泡，相当于调用了event.stopPropagation()方法 2 .prevent 阻止默认行为，相当于
【VUE】常用修饰符
ColdCoder的博客
03-10 216
文章目录v-model 修饰符v-on 事件修饰符按键修饰符系统修饰符按键与keyCode v-model 修饰符 .lazy 取代 input 监听 change 事件 在默认情况下，v-model 在每次 input 事件触发后将输入框的值与数据进行同步 。你可以添加 lazy 修饰符，从而转变为使用 change 事件进行同步： <!-- 在“change”时而非“input”时更新 --> <input v-model.lazy="msg" > .number 输入字
10. Vue 常用的修饰符的作用详解？
能带孩子会做饭
08-30 396
10. Vue 常用的修饰符的作用详解？ Vue中的修饰符分为以下五种： 表单修饰符； 事件修饰符； 鼠标按键修饰符； 键值修饰符； v-bind修饰符。 .stop 阻止事件冒泡 .prevent 阻止默认行为 .capture 事件捕获 .self 自身触发 .once 只触发一次......
vue--事件--事件绑定,事件修饰符,
cmy741741的博客
11-18 557
事件绑定 可以用 v-on 指令监听DOM 事件，并在触发时运行一些 JavaScript 代码。v-on 还可以接收一个需要调用的方法名称。 <button v-on:click="greet">Greet</button> methods: { greet: function (event) { if (event) { alert(event.target.tagName) } // `event` 是原生 DOM 事件 ...
Vue常见面试题，事件修饰符
Hello World
05-11 205
Vue常见面试题，事件修饰符 ① once 设置事件只能触发一次（第二次以及以上将不会触发）： <button @click="btn">测试按钮</button> btn(){ console.log("开始测试"); } ② prevent 阻止默认事件的发生（例如，点击超链接，不会进行跳转） <a href="www.baidu.com" @click.prevent>百度</a> ③ stop 阻止冒泡（阻止事件向上级DOM元素传递） &
Vue中事件绑定
liu0218的博客
06-08 4159
vue事件绑定
Vue事件绑定
过客如期的博客
05-26 7303
一，原生事件绑定 1.在原生js中，我们有三种方式为一个属性绑定事件，分别为： 在HTML标签上添加事件属性 在js中使用html节点的事件属性绑定事件处理程序，例如node.onclick=function(){} 在js中使用addEventListener("click",function(){},false) 想了解更多，可参考js原生事件绑定 二，Vue事件绑定 v-on: 1.在vue.........
vue的事件绑定：v-on指令
wuliangfan的博客
07-17 492
语法 v-on:事件名.修饰符 = 方法名() | 方法名 | 简单的JS表达式 简写： @事件名.修饰符 = 方法名() | 方法名 | 简单的JS表达式 事件名： click|keydown|keyup|mouseover|mouseout|自定义事件名 修饰符： .stop | .prevent | .once | .self | .left | .right | .middle | .u...
vue的作用_关于Vue中.sync修饰符的作用
weixin_39522927的博客
12-12 490
在说vue 修饰符sync前，我们先看下官方文档：vue .sync 修饰符，里面说vue .sync 修饰符以前存在于vue1.0版本里，但是在在 2.0 中移除了 .sync 。但是在 2.0 发布之后的实际应用中，我们发现 .sync 还是有其适用之处，比如在开发可复用的组件库时。我们需要做的只是让子组件改变父组件状态的代码更容易被区分。从 2.3.0 起我们重新引入了 .sync 修饰符，...
vue基础-MVVM设计模式
04-30
3. 视图模型层(ViewModel)：负责处理视图与模型之间的交互，它是一个纯粹的 JavaScript 对象，负责实现数据绑定、数据格式化、事件监听等功能。 在 Vue.js 中，我们可以使用指令(v-directive)来实现数据绑定。指令...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值