VUE-04 事件
阿新 • • 發佈：2020-07-09
原生：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>事件</title> 6 </head> 7 <body> 8 9 <div onclick="fn()" id="btn">點我</div> 10 11 <script> 12 function fn(){ 13 alert(1); 14 } 15 console.log(btn.onclick)16 /* 17 * ƒ onclick(event) { 18 fn() 19 } 20 */ 21 </script> 22 </body> 23 </html>
vue：
1 <!DOCTYPE html> 2 <html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>事件</title> 6 </head> 7 <body> 8 9 <div id="app"> 10 <!--v-on === @--> 11 <!--如果不傳遞引數 則不要寫括號 會自動傳入事件源，寫括號了要手動傳入$event屬性--> 12 <div v-on:click="fn">點我</div> 13 <div v-on:click="ck($event,1)">點我</div> 14 </div> 15 16 <script src="./node_modules/vue/dist/vue.js"></script> 17 <script> 18 19 let vm = new Vue({ // 根例項 20 el:'#app', 21 methods:{ 22 // methods 中的this指向的都是例項vm 不能用箭頭函式fn:()=>{alert(1);}，this會改變 23 fn() {alert(1);}, // es6 的寫法 fn:function () {alert(1);} 24 ck(event,a) {console.log(event)} 25 }, 26 data:{ 27 // 也可以 但是 不美觀 fn (){alert(1);} data和methods中的資料都會放到vm上，名字不能重複。 28 } 29 30 }); 31 </script> 32 </body> 33 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Demo</title> 6 </head> 7 <body> 8 <div id="app"> 9 <!--vue中的鍵盤修飾符 keyup.13 keyup.enter 按enter鍵 keyup.a keyup.ctrl.a"--> 10 <input type="text" v-model="val" @keyup.enter="add"/> 11 <ul> 12 <li v-for="v,i in arr">{{v}}<button @click="remove(i)">刪除</button> </li> 13 </ul> 14 </div> 15 <script src="./node_modules/vue/dist/vue.js"></script> 16 <script> 17 let vm = new Vue({ 18 el:'#app', 19 methods:{ 20 add(e){ 21 // if(e.keyCode===13){ 事件上直接用.enter代替 22 this.arr.unshift(this.val); 23 this.val = ''; 24 // } 25 }, 26 remove(i){this.arr = this.arr.filter((item,index)=> index!==i);}, 27 }, 28 data:{ 29 val:'', 30 arr:[], 31 } 32 }) 33 </script> 34 </body> 35 </html>