VUE参考---事件处理
一、总结
一句话总结：
*、vue绑定事件监听的时候，默认是带了event对象的：<button @click="test1">test1</button>
*、事件处理中 按键修饰符 使用实例：<input type="text" @keyup.13="test7">
1、vue绑定事件监听的时候，默认是带了event对象的？
-、<button @click="test1">test1</button>
-、<button @click="test3('abcd', $event)">test3</button>
methods: {
test1(event) {
alert(event.target.innerHTML)
},
}
2、事件处理中 按键修饰符 使用实例？
·、<input type="text" @keyup.13="test7">
·、<input type="text" @keyup.enter="test7">
二、事件处理
博客对应课程的视频位置：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>07_事件处理</title> 6 </head> 7 <body> 8 <!-- 9 1. 绑定监听: 10 v-on:xxx="fun" 11 @xxx="fun" 12 @xxx="fun(参数)" 13 默认事件形参: event 14 隐含属性对象: $event 15 2. 事件修饰符: 16 .prevent : 阻止事件的默认行为 event.preventDefault() 17 .stop : 停止事件冒泡 event.stopPropagation() 18 3. 按键修饰符 19 .keycode : 操作的是某个keycode值的健 20 .enter : 操作的是enter键 21 --> 22 23 <div id="example"> 24 25 <h2>1. 绑定监听</h2> 26 <button @click="test1">test1</button> 27 <button @click="test2('abc')">test2</button> 28 <button @click="test3('abcd', $event)">test3</button> 29 30 <h2>2. 事件修饰符</h2> 31 <a href="http://www.baidu.com" @click.prevent="test4">百度一下</a> 32 <div style=" 200px;height: 200px;background: red" @click="test5"> 33 <div style=" 100px;height: 100px;background: blue" @click.stop="test6"></div> 34 </div> 35 36 <h2>3. 按键修饰符</h2> 37 <input type="text" @keyup.13="test7"> 38 <input type="text" @keyup.enter="test7"> 39 40 </div> 41 42 <script type="text/javascript" src="../js/vue.js"></script> 43 <script type="text/javascript"> 44 new Vue({ 45 el: '#example', 46 data: { 47 48 }, 49 methods: { 50 test1(event) { 51 alert(event.target.innerHTML) 52 }, 53 test2 (msg) { 54 alert(msg) 55 }, 56 test3 (msg, event) { 57 alert(msg+'---'+event.target.textContent) 58 }, 59 60 test4 () { 61 alert('点击了链接') 62 }, 63 64 test5 () { 65 alert('out') 66 }, 67 test6 () { 68 alert('inner') 69 }, 70 71 test7 (event) { 72 console.log(event.keyCode) 73 alert(event.target.value) 74 } 75 } 76 }) 77 </script> 78 </body> 79 </html>