vue-模板语法-事件绑定与事件修饰符

最新推荐文章于 2024-04-12 11:01:11 发布
最新推荐文章于 2024-04-12 11:01:11 发布
阅读量353 收藏
点赞数
分类专栏： # vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gaogzhen/article/details/107475958
版权
vue-模板语法-事件绑定与事件修饰符
目录

文章目录



内容

1、事件绑定

  事件绑定指令，v-on，简写’@’。

1.1、v-on

  • 格式：

      <标签 v-on.事件="事件处理"></标签>
  <标签 @事件="事件处理"></标签> // 简写

1.2、事件处理

  • 简单事件处理逻辑：直接把逻辑写在事件处理位置
  • 复杂事件处理：把事件处理封装为方法，事件处理位置写方法调用

1.3、参数传递

  • 事件处理直接书写方法名

    • 默认传递事件对象

  • 事件处理书写方法名(参数列表)

    • 如果需要事件对象，需要在参数列表最后，写$event

  • 示例1.3-1：

      <!DOCTYPE html>
  <html lang="en">
  <head>
  	<meta charset="UTF-8">
  	<meta name="viewport" content="width=device-width, initial-scale=1.0">
  	<title>v-cloak</title>
  </head>
  <body>
  	<div id="app" v-cloak>
  		<div v-text="num"></div>
  	   <button @click="num++">点击1</button>
  	   <button @click="handle1">点击2</button>
  	   <button @click="handle2(32, $event)">点击3</button>
  	</div>
  <script src="../../asserts/js/vue.js"></script>
  <script>
  	let app = new Vue({
  		el: '#app',
  		data: {
  			num: 0
  		},
  		methods: {
  			handle1() {
  				console.log(this);
  				this.num++
  			},
  			handle2(n, event) {
  				console.log(n);
  				console.log(event);
  			}
  		},
  	})
  </script>
  </body>
  </html>

  • 效果图示1.3-1：[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TXqFP2Fl-1595254926586)(./images/2020-07-20_v-on.png)]

2、事件修饰符

  • 格式

      <标签 @事件.事件修饰符="事件处理"></标签>

  • 常用事件修饰符

事件修饰符描述
stop阻止冒泡
prevent阻止默认行为
once只执行一次
self自身触发的事件，才执行
  • 事件修饰符可以串联
    • @click.stop.prevent:阻止冒泡和默认行为
    • @click.prevent.self:会阻止所有的点击事件（冒泡）
    • @click.self.prevent:只会阻止对该元素自身的点击事件

后记 ：

  本项目为参考某马视频开发，相关视频及配套资料可自行度娘或者联系本人。上面为自己编写的开发文档，持续更新。欢迎交流，本人QQ:806797785

前端项目源代码地址：https://gitee.com/gaogzhen/vue
后端JAVA源代码地址:https://gitee.com/gaogzhen/JAVA
gaog2zh
关注
专栏目录
从源码看Vue中模板的自定义事件、DOM事件的绑定过程
Ancecis的博客
04-14 834
Vue中事件的基础 1.Vue中如何绑定事件 ​ Vue框架相比于React框架，提供了模板的功能，而模板与HTML代码极为相似，这使得我们可以花费很少的时间从原生到Vue框架的过渡，这是Vue的优点之一。不过模板到处理的时候只是一个字符串，而不是真正的HTML代码。所以如果我们以原生的方式来对节点进行监听的话，很可能会出错。这是因为有可能模板还没有渲染到页面上。不过，Vue推荐使用在模板上进行事...
Vue03基础语法--Vue组件+样式绑定+修饰符+常用控件+自定义指令+自定义事件
全栈
10-19 1233
Vue除支持内置的v-model/v-show等指令，还允许自定义指令。 vue2中，代码的复用和抽象的主要形式是组件，但在有些情况下仍然需要对普通dom元素做底层操作，这种情况下需要自定义指令。根据自定义指令的作用范围，可分为：全局、局部两种
vue 绑定事件&事件修饰符
alical的博客
10-11 523
vue、vue事件绑定、vue事件修饰符
VUE事件绑定修饰符
weixin_34390105的博客
06-03 181
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-e...
Vue中事件绑定 - 修饰符
qq_52207728的博客
06-02 269
点击按钮数字加一的案例： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &lt
vue事件绑定中的事件修饰符
ly_fashion的博客
03-20 1696
vue.js事件修饰符
认识vue---语法、双向绑定、Vue组件通信、插槽slot
Qian_mos的博客
03-26 1304
vue语法 Vue双向绑定 Vue组件通信 Vue插槽slot
浅谈在vue-cli3项目中解决动态引入图片img404的问题
10-15
4. 将动态生成的图片路径绑定到页面上：在Vue模板中，使用`v-bind`或简写为`:`的语法来绑定图片的`src`属性。例如： ```html 天气图标" /> ``` 这样，当`twCode`变化时，`fullUrl`计算属性也会跟着变化，从而...
练习代码1-模板语法&内置指令
12-19
4. v-on：绑定事件监听器，支持修饰符如`.stop`（阻止冒泡）、`.prevent`（阻止默认行为）等。 5. v-bind：动态绑定属性，包括元素属性、组件prop等。 6. v-model：实现双向数据绑定，适用于表单元素。 7. v-pre...
vue修饰符 v-on、v-bind、v-model
qq_40299140的博客
08-27 874
1.v-on 修饰符 .stop - 调用 event.stopPropagation()，禁止事件冒泡。 .prevent - 调用 event.preventDefault()，阻止事件默认行为。 .capture - 添加事件侦听器时使用 capture 模式。 .self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。 .{keyCode | keyAlias} - 只当...
Vue事件绑定以及事件修饰符
XueDaJing030409的博客
06-04 365
事件 要理解事件绑定，就得先了解事件。 浏览器是事件驱动型的，根据用户的行为触发不同的事件，根据事件执行相应的操作。我们较为熟悉的事件有三大类型： 鼠标键盘事件 鼠标键盘事件 事件介绍 onclick 鼠标点击某个对象 ondbclick 鼠标双击某个对象 onmousedown 某个鼠标按键被按下 onmouseup 某个鼠标按键被松开 onmousemove 鼠标被移动 onmouseover 鼠标被移到某元素之上 onmou
vue 中的事件绑定修饰符详解
qq_36958916的博客
11-13 370
<div id="root"> //普通点击事件可获取事件对象 <div @click="handleclick">button</div> //普通点击事件不可获取事件对象 <div @click="handleclick1()">button</div> //普通点击事件可获取事件对象 <div @click="handleclick2($event)">button</div> //阻止表单默认提交.
Vue中的事件绑定和修饰符
卓越无关环境，保持空杯心态——靡不有初，鲜克有终
03-21 1241
@click的方法只写了方法名没括号？ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> ...
vuejs中的事件绑定以及修饰符
qq_42775934的博客
04-02 524
vuejs中的事件绑定，使用<v-on:事件名 = 函数名>来完成的，这里函数名是定义在Vue实例中的methods对象中的，Vue实例可以直接访问其中的方法. 事件绑定的方式 （1） 内联直接把js写在标签上调用方法 <button v-on:click="alert（'hi'）">执行方法的第一种写法</button> （2）调用metho...
VUE（template标签 事件绑定与监听）
热门推荐
王冉的博客
03-17 1万+
一、template标签 Vue.js提供了template标签，可以将指令作用到这个标签上，对其子元素进行渲染，但最后渲染的结果里不会有它。 二、事件绑定与监听 1.方法与内联语句处理器 1）Vue.js中通过v-on可以绑定实例选项属性methods中的方法作为事件的处理器，v-on:后参数可以接受所有原生的事件名称。 2）v-on:的简写形式，用@代替；除了直接绑定methods函数外，v-...
Vue中的事件及其修饰符
欢迎阅读我的博客
03-11 452
/ 手动调用事件对象的preventDefault()方法，可以阻止事件的默认行为。// 对于当前程序来说this就是父级作用域(全局作用域)window。// 对于当前程序来说this就是父级作用域(全局作用域)window。// 事件函数中的this就是Vue的实例对象vm。// 当用户键入回车键的时候，获取用户输入的信息。// 函数中的this就是Vue的实例对象vm。// 自定义一个按键修饰符叫huiche。// 自定义的函数不会被调用。// 获取按键修饰符的名字。'Vue的事件绑定'
Vue 事件修饰符汇总
最新发布
克里斯蒂亚诺更新的博客
04-12 570
Vue 提供了一些事件修饰符，用于在处理 DOM 事件时提供额外的控制或功能。：阻止事件冒泡。（内有外无）：阻止事件默认行为。（阻止事件）：事件将在捕获阶段触发。（先外后内）：只当事件在该元素本身触发时触发回调。：事件将只触发一次。：告诉浏览器不要等待完成。：监听组件根元素的原生事件。：只当点击鼠标左键时触发。：只当点击鼠标右键时触发。：只当点击鼠标中键时触发。：精确匹配监听的按键，而不是包含它们的修饰符组合。：只触发一次。：滚动事件的默认行为（即滚动行为）将会立即触发。---
Vue2.0 Vue脚手架 组件自定义事件_绑定
yasinawolaopo的博客
12-20 818
Vue2.0 Vue脚手架 Vue自定义事件_绑定
模板语法与事件绑定
qq_46469137的博客
06-07 215
模板语法 数据绑定 <view>{{msg}}</view> <view>{{num}}</view> <view>{{isGirl}}</view> <view>{{person.age}}</view> <!-- 在标签的属性中使用 --> <view data-num="{{num}}">自定义属性</view> <!-- 使用Boolean类型充当属性，要注意
Vue基础：事件绑定与模板语法详解
在学习过程中，理解Vue的事件绑定机制是非常关键的，这包括如何在模板中使用`v-on`来监听和响应不同类型的事件（如click、input等），以及如何使用修饰符（如`.prevent`、`.stop`）来控制事件的默认行为。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

gaog2zh

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值