




版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领
文档简介
Vue.js框架应用Vue.js事件处理目
录Vue.js事件处理器修饰符watch侦听目
录Vue.js事件处理器修饰符watch侦听Vue.js事件处理器
一、监听事件Vue.js提供的v-on指令用来监听DOM事件,并在事件触发时执行对应的代码。它的用法如下:v-on:click="methodName"@click="handler"v-on指令的参数值click:事件触发类型“鼠标点击”等于号后面的值:事件处理器,它分为两类:内联事件处理器和方法事件处理器三、内联事件处理器v-on指令接收的是事件被触发时执行的内联JavaScript语句(与onclick类似)。二、方法事件处理器v-on指令可以接受一个方法名对某个方法的调用,称为方法事件处理器。方法事件处理器会自动接收原生DOM事件并触发执行。目
录Vue.js事件处理器修饰符watch侦听修饰符
一、事件修饰符我们在处理事件时经常会调用event.preventDefault()或event.stopPropagation()方法,为了使方法能更专注于数据逻辑而不用去处理DOM事件的细节,Vue.js为我们提供了v-on指令的修饰符。主要包含:.stop:阻止事件传播.prevent:阻止事件默认行为.self:仅元素自身触发.capture:默认的冒泡事件更改为捕获事件.once:事件最多被触发一次注意:当同时使用了多个事件修饰符时,要注意修饰符的调用顺序。例如:@click.prevent.self会阻止元素及其子元素的所有点击事件的默认行为,而@click.self.prevent只会阻止对元素本身的点击事件的默认行为。修饰符
二、按键修饰符有些事件是通过按键触发,因此我们在监听键盘事件时需要经常检查特定的按键。Vue.js允许在v-on或@监听按键事件时添加按键修饰符。1.普通按键修饰符2.系统按键修饰符3..exact按键修饰符三、鼠标按键修饰符除了上面的修饰符,Vue.js还提供了.left、.right、.middle鼠标按键修饰符,它们将处理程序限定为由特定鼠标按键触发的事件。<!--只有当按下鼠标右键时才会触发--><button@click.right="btnClick">A</button>目
录Vue.js事件处理器修饰符watch侦听watch侦听一、侦听器在某些情况下,我们需要在一个数据状态变化时去执行一些操作,这样就需要实时地在代码逻辑中侦听这个数据。Vue.js提供了实例的watch侦听器选项,通过它可以实现这一功能。通过设置侦听,在每次响应式属性发生变化时会触发一个函数。watch:{amount(newValue,oldValue){ console.log('数量变化了!’,"新值:", newValue,'旧值:',oldValue);},},data(){return{amount:50,};},watch侦听二、深层侦听器 watch默认的侦听方式是浅层侦听,即如果侦听的数据是对象,仅在对象被赋新值时才会触发回调函数;如果是对象中的属性发生了变化则不会触发。
如果想侦听所有对象的属性的变更,可以使用深层侦听器。watch:{//默认watch监听不会进行深度监听,对象的属性改变时不能被监听到info:{handler(newValue,oldValue){ console.log("侦听到info改变:",newValue.id,oldValue.id);},//info进行深度监听:对象的属性改变时也可以被监听到
deep:true,},},深度侦听需要遍历被侦听对象中的所有属性,当用于大型数据结构时开销很大,所以只在必要时才使用深度侦听。watch侦听三、即时回调的侦听器watch默认是懒执行的,即仅当数据源变化时,才会执行回调。但在某些场景中,我们希望在创建侦听器时,立即执行一遍回调。watch:{//默认watch监听不会进行深度监听,对象的属性改变时不能被监听到info:{handler(newValue,oldValue){ console.log("侦听到info改变:",newValue.id,oldValue.id);},//info进行深度监听:对象的属性改变时也可以被监听到
deep:true,
immediate:true,},},watch侦听四、this.$watch()除了使用watch选项创建侦听器外,还可以使用组件实例的$watch()方法来命令式地创建一个侦听器。created(){this.$watch("amount",(newValue,oldValue)=>{console.log('数量变化了!',"新值:",newValue,'旧值:',oldValue);});},五、停止侦听器用watch选项或者$watch()实例方法声明的侦听器,会在宿主组件卸载时自动停
温馨提示
- 1. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等,如果需要附件,请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸,网页内容里面会有图纸预览,若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对用户上传分享的文档内容本身不做任何修改或编辑,并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- 二零二五年度互联网贷款居间服务合作协议
- 二零二五年度电子商务平台不承担责任协议书
- 二零二五年度室内设计软件授权使用合同
- 2025年度生物制药股东知识产权保护补充协议
- 二零二五年度员工分红股股权激励与员工福利协议
- 二零二五年度电影聘用合同样本:电影角色扮演演员临时聘用合同
- 2025年度石材入场安全管理与隐患排查合同
- 2025年度航空航天产业用工合作协议书
- 资产管理新规解读与应用实践
- 2025-2030年双针四线封包缝纫机项目商业计划书
- NBA球星库里课件
- 2025届新高考地理精准冲刺复习 航拍中国-云南
- 护理美学-第十章 护理环境中的美
- 试车阶段投用前安全检查清单(PSSR)工厂级表单
- 《空调的使用与维护》课件
- 镀金行业市场突围建议及需求分析报告
- 2024年同等学力申硕-同等学力(经济学)笔试考试历年高频考点试题摘选含答案
- GB/T 13305-2024不锈钢中α-相含量测定法
- 2024年高中英语衡水体书法练字字帖
- 老龄化社会 认知症包容性社群框架
- 江苏省无锡市惠山区2023-2024学年八年级下学期语文期中试卷
评论
0/150
提交评论