Vue.js前端开发框架应用（微课版） 课件 第四章 Vue.js事件处理

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()实例方法声明的侦听器，会在宿主组件卸载时自动停