房县建设局网站,千锋培训价目表,建设虚拟网站,国外创意包装设计欣赏我们可以使用v-on来监听DOM事件#xff0c;并在事件触发时执行对应的Vue的Javascript代码。 用法#xff1a;v-on:click handler 或简写为 click handlervue中的事件名原生事件名去掉 on 前缀 如:onClick -- clickhandler的值可以是方法事件… 我们可以使用v-on来监听DOM事件并在事件触发时执行对应的Vue的Javascript代码。 用法v-on:click handler 或简写为 click handlervue中的事件名原生事件名去掉 on 前缀 如:onClick -- clickhandler的值可以是方法事件处理器也可以是内联事件处理器绑定事件时可以通过一些绑定的修饰符常见的事件修饰符如下 click.once:只触发一次事件。[重点]click.prevent:阻止默认事件。[重点]click.stop:阻止事件冒泡click.capture:使用事件捕获模式而不是冒泡模式click.self:只在事件发送者自身触发时才触发事件 script setupimport {ref} from vue;//响应式数据 当发生变化时会自动更新 dom 树let count ref(0);let addCount(){count.value;}let incrCount(event){count.value;//通过事件对象阻止组件的默认行为event.preventDefault();}let sayHello(){alert(hello world!)}let h01(){alert(ho1)}let h02(){alert(ho2)event.stopPropagation(); //阻止事件传播繁殖蔓延}let h03(){alert(h03);}/scripttemplatedivh1count的值是:{{count}}/h1!--方法事件处理器--button v-on:clickaddCount()addCount/buttonbr!--内联事件处理器--button clickcountincrCount/buttonbr!--事件修饰符 once 只绑定事件一次--button click.oncecountaddOnce/buttonbr!--事件修饰符 prevent 阻止组件的默认行为--a hrefhttps://blog.csdn.net/m0_65152767?spm1011.2124.3001.5343 target_blank click.preventcountprevent/abr!--原是js方式阻止组件默认行为(推荐)--a hrefhttps://blog.csdn.net/m0_65152767?spm1010.2135.3001.5343 target_blank clickincrCount($event)prevent/abrbutton v-on:clicksayHello点我/buttonbutton clicksayHello点我省略v-on:/buttondiv clickh01 stylebackground-color: #abc;width: 200px;height: 200pxdiv clickh02 stylebackground-color: #cba;width: 100px;height: 100pxHELLO/divdiv click.stoph03 stylebackground-color: #dfb;width: 100px;height: 100pxHELLO/div/div/div/template
