vue學習---Vue中的事件修飾符
阿新 • • 發佈：2021-11-13
Vue中的事件修飾符：
1.prevent：阻止預設事件（常用）；
2.stop：阻止事件冒泡（常用）；
3.once：事件只觸發一次（常用）；
4.capture：使用事件的捕獲模式；
5.self：只有event.target是當前操作的元素時才觸發事件；
6.passive：事件的預設行為立即執行，無需等待事件回撥執行完畢；
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>事件修飾符</title> <!-- 引入Vue --> <script type="text/javascript" src="../js/vue.js"></script> <style> *{ margin-top: 20px; } .demo1{ height: 50px; background-color: skyblue; } .box1{ padding: 5px; background-color: skyblue; } .box2{ padding: 5px; background-color: orange; } .list{ width: 200px; height: 200px; background-color: peru; overflow: auto; } li{ height: 100px; } </style> </head> <body><!-- Vue中的事件修飾符： 1.prevent：阻止預設事件（常用）； 2.stop：阻止事件冒泡（常用）； 3.once：事件只觸發一次（常用）； 4.capture：使用事件的捕獲模式； 5.self：只有event.target是當前操作的元素時才觸發事件； 6.passive：事件的預設行為立即執行，無需等待事件回撥執行完畢； --> <!-- 準備好一個容器--> <div id="root"> <h2>歡迎來到{{name}}學習</h2> <!-- 阻止預設事件（常用） --> <a href="http://www.atguigu.com" @click.prevent="showInfo">點我提示資訊</a> <!-- 阻止事件冒泡（常用） --> <div class="demo1" @click="showInfo"> <button @click.stop="showInfo">點我提示資訊</button> <!-- 修飾符可以連續寫 --> <!-- <a href="http://www.atguigu.com" @click.prevent.stop="showInfo">點我提示資訊</a> --> </div> <!-- 事件只觸發一次（常用） --> <button @click.once="showInfo">點我提示資訊</button> <!-- 使用事件的捕獲模式 --> <div class="box1" @click.capture="showMsg(1)"> div1 <div class="box2" @click="showMsg(2)"> div2 </div> </div> <!-- 只有event.target是當前操作的元素時才觸發事件； --> <div class="demo1" @click.self="showInfo"> <button @click="showInfo">點我提示資訊</button> </div> <!-- 事件的預設行為立即執行，無需等待事件回撥執行完畢； --> <ul @wheel.passive="demo" class="list"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> </div> </body> <script type="text/javascript"> Vue.config.productionTip = false //阻止 vue 在啟動時生成生產提示。 new Vue({ el:'#root', data:{ name:'尚矽谷' }, methods:{ showInfo(e){ alert('同學你好！') // console.log(e.target) }, showMsg(msg){ console.log(msg) }, demo(){ for (let i = 0; i < 100000; i++) { console.log('#') } console.log('累壞了') } } }) </script> </html>