微信扫一扫打赏支持

VUE参考---事件处理

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="width: 200px;height: 200px;background: red" @click="test5">
33     <div style="width: 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>

 

 

 

 
posted @ 2020-04-20 12:57  范仁义  阅读(192)  评论(0)    收藏  举报