v-on的引數問題與修飾符
阿新 • • 發佈：2020-12-11
v-on的引數問題：
當通過methods中定義方法，以供@click呼叫時，需要注意引數問題：
情況一：如果該方法不需要額外引數，那麼方法後的()可以不新增。但是注意：如果方法本身中有一個引數，那麼會預設將原生事件event引數傳遞進去。
情況二：如果需要同時傳入某個引數，同時需要event時，可以通過$event傳入事件。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <!--1.事件呼叫的方法沒有引數--> <button @click="btn1Click()">按鈕1</button> <button @click="btn1Click">按鈕1</button> <!--2.在事件定義時, 寫方法時省略了小括號, 但是方法本身是需要一個引數的, 這個時候, Vue會預設將瀏覽器生產的event事件物件作為引數傳入到方法--> <!--<button @click="btn2Click(123)">按鈕2</button>--> <!--<button @click="btn2Click()">按鈕2</button>--> <button @click="btn2Click">按鈕2</button> <!--3.方法定義時, 我們需要event物件, 同時又需要其他引數--> <!-- 在呼叫方式, 如何手動的獲取到瀏覽器引數的event物件: $event--> <button @click="btn3Click(abc, $event)">按鈕3</button> </div> <script src="../js/vue.js"></script> <script> const app= new Vue({ el: '#app', data: { message: '你好啊', abc: 123 }, methods: { btn1Click() { console.log("btn1Click"); }, btn2Click(event) { console.log('--------', event); }, btn3Click(abc, event) { console.log('++++++++', abc, event); } } })// 如果函式需要引數,但是沒有傳入, 那麼函式的形參為undefined // function abc(name) { // console.log(name); // } // // abc() </script> </body> </html>
v-on的修飾符：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <!--1. .stop修飾符的使用，停止冒泡--> <div @click="divClick"> aaaaaaa<button @click.stop="btnClick">按鈕</button> </div> <!--2. .prevent修飾符的使用，阻止預設行為--> <br> <form action="baidu"> <input type="submit" value="提交" @click.prevent="submitClick"> </form> <!--3. .監聽某個鍵盤的鍵帽--> <input type="text" @keyup.enter="keyUp"> <!--4. .once修飾符的使用，點選回撥只會觸發一次--> <button @click.once="btn2Click">按鈕2</button> </div> <script src="../js/vue.js"></script> <script> const app = new Vue({ el: '#app', data: { message: '你好啊' }, methods: { btnClick() { console.log("btnClick"); }, divClick() { console.log("divClick"); }, submitClick() { console.log('submitClick'); }, keyUp() { console.log('keyUp'); }, btn2Click() { console.log('btn2Click'); } } }) </script> </body> </html>