事件监听 || v-on参数
生活随笔
收集整理的這篇文章主要介紹了
事件监听 || v-on参数
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
v-on參數
<!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><!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>
?
總結
以上是生活随笔為你收集整理的事件监听 || v-on参数的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： const的使用 || 对象增强写法
- 下一篇： v-if 和 v-else-if 和 v