-
【尚硅谷 Vue学习笔记】P14事件处理 P13事件修饰符 p16键盘事件 p17事件总结
前言：仅做笔记使用。不是制作精良的博客。
时间：2022/11/14
P14事件处理
需求，点这个按钮就提示
错误的写法：
（错误原因：只能在Vue实例中找）
正确写法：
（解释：在配置项methods下写函数，不需要写function，直接写方法名。如果写了function会有红色波浪线）
代码：
<body> <div id="root"> <h1>学校名字：{{name}}</h1> <button v-on:click="showInfo">点我提示信息</button> </div> <script type="text/javascript"> Vue.config.productionTip=false let data={ name:'尚硅谷', address:'就这样' } const vm=new Vue({ el:'#root', data, methods:{ showInfo() { alert('卧草') } } }) </script> </body>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
验证函数里面的this
(这个this就是vm)
注意：函数写成=>
this就是window，而不是vue
简写形式：
v-on:click
@click
<button v-on:click="showInfo">点我提示信息1</button> <button @click="showInfo">点我提示信息2</button>- 1
- 2
再来个需求：
(点击 点我提示信息2 传进去一个参数)
给个代码：
<body> <div id="root"> <h1>学校名字：{{name}}</h1> <button v-on:click="showInfo1">点我提示信息1</button> <button @click="showInfo2(66)">点我提示信息2</button> </div> <script type="text/javascript"> Vue.config.productionTip=false let data={ name:'尚硅谷', address:'就这样' } const vm=new Vue({ el:'#root', data, methods:{ showInfo1() { alert('我草1')//此处的this就是vm }, showInfo2(number) { alert('我曹2'+'传一个数字'+number)//此处的this就是vm } } }) </script> </body>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
代码解释：
1.showInfo2 括号加不加都行
2.有个bug，不能用event.target.innerText (也就是点我提示信息2的文本)
3.不能一传参就把event搞丢了
解决：
1.写$event，这样传进函数里面就是event
<button @click="showInfo2(66,$event)">点我提示信息2</button> showInfo2(number,event) { alert('我曹2'+'传一个数字'+number)//此处的this就是vm }- 1
- 2
- 3
- 4
- 5
- 6
showInfo1,showInfo2在vm中，但不做数据代理。
总结：
P13事件修饰符
需求：
（点击按钮跳转网页,a标签）
不想让它跳转就写个:
//阻止默认行为 showInfo(e) { e.preventDefault() alert('我草1')//此处的this就是vm }- 1
- 2
- 3
- 4
- 5
- 6
但是Vue可以这样
<a href="https://www.bilibili.com" @click.prevent="showInfo">点我提示信息</a>- 1
prevent就是事件修饰符
用了click事件，但是prevent修饰click事件
总结：
阻止事件冒泡：
alert弹了两次，写完@click.stop之后，只谈一次
事件触发一次：
第一次点击：
多次点击：（不灵了）
捕获模式：
点击div2（结果2，1）
捕获与冒泡阶段:
捕获：从外到内
冒泡：从内到外
加上就是1,2
5.self
6.passive
本来应该是这个函数跑完再滚动滚动条
加passsive，就可以滚动滚动条了。
p16键盘事件
<input type="text" placeholder="回车提示" @keyup.delete="showInfo">- 1
按下删除键才会执行。
p17事件总结
能连着写
-
相关阅读:
Mac中无法运行旧版本印象笔记：版本太旧 你的本地印象笔记数据是由新版印象笔记管理
高效使用python之xlwt库编辑写入excel表内容
springBoot + netty搭建高性能 websocket 服务 & 性能测试
Python中堪称神仙的六个内置函数
12029.EEPROM驱动框架
软件项目管理指南：定义、5大过程、估算及进度管理方法等
实用小算法
C语言-入门-枚举类型(十四)
【线程】线程同步
Apache Inlong:数据集成框架原理及实践
- 原文地址：https://blog.csdn.net/m0_54381284/article/details/127857576
