10vue學習_v-on的使用，引數傳遞，修飾符
阿新 • • 發佈：2021-02-01
技術標籤：VUE
1、v-on的使用和語法糖
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title-hellovuejs</title> </head> <body> <div id ="app"> <h2>當前計數:{{counter}}</h2> <!-- <button v-on:click="counter++">+</button> <button v-on:click="counter--">-</button> --> <!-- <button v-on:click="increment">+</button> <button v-on:click="decrement">-</button> --> <button @click="increment">+</button> <button @click="decrement">-</button> </div> <script src="../js/vue.js"></script> <script> //let（變數） /const（常亮） const chen1 = new Vue({ el: '#app', //用於掛載要管理的元素 data:{//定義資料 counter: 0 }, methods:{ increment(){ console.log('add button click'); this.counter++; }, decrement(){ console.log('sub button click'); this.counter--; } } }) </script> </body>
2、v-on的引數傳遞有好多種要注意的地方
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title-hellovuejs</title> </head> <body> <div id ="app"> <!-- 方法1,--此時，不帶引數，括號可以省略 --> <!-- <button @click="btn1Click()">按鈕1</button> --> <button @click="btn1Click">按鈕1</button> <!--方法2,-- 在事件定義時，寫函式時省略了小括號，但是方法本身需要一個引數 這個人時候，vue會預設將瀏覽器的event傳輸到方法中（引數） --> <!-- (1)正常使用 --> <!-- <button @click="btn2Click(123)">按鈕2</button> --> <!-- （2）非正常使用，此時，用括號，不帶引數，也不報錯 ，引數預設為undifined--> <!-- <button @click="btn2Click()">按鈕2</button> --> <!-- （3）非正常是喲，此時不帶括號，傳入了預設引數，瀏覽器的event （滑鼠）--> <button @click="btn2Click">按鈕2</button> <!-- 方法3,--方法定義時，我們需要event物件，同時又需要其他引數 --> <!-- 在呼叫方法是，如何為了獲取到瀏覽器引數的event物件，$event --> <button @click="btn3Click('123',$event)">按鈕3</button> </div> <script src="../js/vue.js"></script> <script> //let（變數） /const（常亮） const chen1 = new Vue({ el: '#app', //用於掛載要管理的元素 data:{//定義資料 counter: 0 }, methods:{ btn1Click(){ console.log('btn1'); }, btn2Click(event){ console.log('-----param----',event); }, btn3Click(abb,event){ console.log('++++++param----',abb,event); } } }) </script> </body>