泰州网站制作价格,网站申请支付宝支付,杭州建设招聘信息网站,保定网站建设技术支持一.事件处理
事件修饰符 Vue通过由点(.)表示的指令后缀来调用修饰符#xff0c; .stop#xff0c; .prevent#xff0c;.capture#xff0c;.self#xff0c;.once .stop#xff1a;阻止事件冒泡。当一个元素触发了事件#xff0c;并且该元素包含嵌套的父元素时#…一.事件处理
事件修饰符 Vue通过由点(.)表示的指令后缀来调用修饰符 .stop .prevent.capture.self.once .stop阻止事件冒泡。当一个元素触发了事件并且该元素包含嵌套的父元素时使用.stop修饰符可以防止事件被传递到祖先元素。 .prevent阻止默认事件。当一个元素上触发了某个事件使用.prevent修饰符可以阻止浏览器执行默认的事件行为。 .capture使用事件捕获模式。默认情况下Vue中的事件监听器是通过事件冒泡模式处理的即从子元素冒泡到父元素。但是使用.capture修饰符可以将事件监听器绑定到捕获阶段即从父元素捕获到子元素。 .self只当事件在指定元素自身触发时触发。当一个元素包含子元素并且绑定了相同的事件处理函数时使用.self修饰符可以确保事件只在元素自身触发时才执行处理函数。 .once只触发一次事件。当绑定了.once修饰符的事件被触发后监听器将自动解绑以确保处理函数只执行一次。 代码演示
!DOCTYPE html
htmlheadmeta charsetutf-8script srchttps://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js/scriptscript srchttps://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js/scripttitle事件处理/titlestyle typetext/css.one{background-color: red;height: 400px;width: 400px;} .two{background-color: yellow;height: 300px;width: 300px;} .three{background-color: pink;height: 200px;width: 200px;} .four{background-color: green;height: 100px;width: 100px;}/style/headbodydiv idappdiv classone clickfun1div classtwo clickfun2div classthree clickfun3div classfour click.stopfun4/div/div/div/divinput :valuemsg/button clickclickme点我/buttonform submit.preventsubmitFormbutton typesubmit提交/button/formdiv click.captureparentClickbutton clickchildClick点击我/button/divdiv click.selfparentClickbutton clickchildClick点击我/button/div/divscript typetext/javascriptnew Vue({el:#app,data(){return {msg:你好};},methods:{fun1(){alert(fun1)},fun2(){alert(fun2)},fun3(){alert(fun3)},fun4(){alert(fun4)},clickme(){console.log(this.msg)},submitForm() {console.log(表单提交事件);},parentClick() {console.log(父元素点击事件);},childClick() {console.log(子元素点击事件);}}})/script/body
/html
效果 二.表单的综合案例
