事件修饰符的使用

上传人：韩*** IP属地：安徽上传时间：2023-05-07 格式：PPTX 页数：10 大小：1.45MB 积分：12 举报 版权申诉

已阅读5页，还剩5页未读，继续免费阅读

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

事件修饰符的使用

1、事件处理

2、使用说明

3、使用案例

学习目标

1、了解事件处理的概念

2、通过案例掌握事件修饰符的用法

在Vue中事件修饰符：

（1）、.prevent：等同于JavaScript中的event.preventDefault()，防止执行预设的行为（如果事件可取消，则取消该事件，而不停止事件的进一步传播）

（2）、.capture：与事件冒泡的方向相反，事件捕获由外到内。

事件处理

Vue提供了事件绑定的语法，在标签中可直接使用形如v-on:click，@click，@focus的形式绑定事件监听器，并且可以使用修饰符对事件进行option设置。.prevent用于取消默认事件。

比如我们页面的<ahref="#">标签，当用户点击时，通常在浏览器的网址列出。

使用说明

.capture捕获事件捕获事件：嵌套两三层父子关系，然后所有都有点击事件，点击子节点，就会触发从外至内父节点-》子节点的点击事件。

使用说明

某些标签拥有自身的默认事件，如a[href="#"]button[type="submit"]这种标签在冒泡结束后会开始执行默认事件。

注意默认事件虽然是冒泡后开始，但不会因为stop阻止事件传递而停止。

使用案例

在a标签上的click加个prevent的修饰符，最后输出12344321。默认的href里的事件没有触发，如下图：

使用案

人人文库> 全部分类> 教育资料 > 辅导培训

1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。