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 11 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>Demotitle> 6 head> 7 <body> 8 <div id="app"> 9 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>