Vue.js 超详细入门与项目实战（微课视频版）课件 第04章 元素事件绑定_第1页
Vue.js 超详细入门与项目实战（微课视频版）课件 第04章 元素事件绑定_第2页
Vue.js 超详细入门与项目实战（微课视频版）课件 第04章 元素事件绑定_第3页
Vue.js 超详细入门与项目实战（微课视频版）课件 第04章 元素事件绑定_第4页
Vue.js 超详细入门与项目实战（微课视频版）课件 第04章 元素事件绑定_第5页
已阅读5页，还剩5页未读， 继续免费阅读

下载本文档

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

文档简介

第4章元素事件绑定课件V1.0

教学内容第一节

事件定义第二节事件绑定方式第三节事件传参知识目标教学目标理解和掌握Vue中定义事件方法理解Vue中事件绑定方式掌握Vue中传参过程和参数对象知识点预览#节知识点难点重点应用4C04-01事件定义

C04-02事件绑定方式1、指令v-on或@2、常见修饰符C04-03事件传参1、方法参数2、事件对象参数在Vue中，当一个元素通过使用v-on或语法糖@指令绑定某个事件后，则完成了事件被定义的过程，事件定义的过程，实质是事件被元素绑定的过程。Vue中元素绑定事件的过程其实与页面中元素使用addEventListener方法绑定事件是一致的。如下图所示。事件定义templateASTrenderVNodeVNodeDOMaddEventListenerevent

指令v-on专门用于元素事件的绑定，添加时通过“:”冒号将指令与事件名称隔开，冒号右侧为需要绑定的事件名称；@是指令绑定事件的一种简写方式，也是一种语法糖写法。指令v-on或@

在Vue中，当事件绑定时，允许在事件名称后面通过点语法的形式添加一个事件修饰符，来处理DOM事件本身默认的现象。

常见的修饰符有下面几种，名称和用法如下。

<!--单击事件时阻止冒泡现象--><av-on:click.stop="todo"></a><!--表单提交事件时阻止页面重载--><formv-on:submit.prevent="onSubmit"></form><!--单击事件的元素只有是自身时才会触发--><av-on:click.self="todo"></a><!--单击事件时只会触发一次--><av-on:click.once="todo"></a>常见修饰符

在事件方法中，可以不传参数，或传入一个或多个参数，方法中默认有一个事件对象，这个对象在方法不传入参数时，可以通过声明的方式直接获取。方法参数

在执行事件处理方法中，有时需要传入事件对象这个参数，一种是方法中不传任何参数，定义声明后直接获取，另外一种是向方法中传入一个特殊的变量$event，也可以获取事件对象。在Vue中，可以使用以下三种方法解决事件冒泡现象。第3种是Vue中特有的写法，既简单，又高效，建议大家使用。第1种todo(event){event.stopPropagation();Num++;}第2种<divclass="a-child"@click="todo($event)"></div>

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

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

最新文档

评论

0/150

提交评论