VUE-04 事件

原生：

 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>