1 DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8" />
5 <title>事件的基本使用title>
6 <script type="text/javascript" src="../js/vue.js">script>
7 head>
8 <body>
9
17 <div id="root">
18 <h1>hello， {{name}}h1>
19 <button v-on:click="showInfo1">点我提示信息(不传参)button>
20 <button @click="showInfo2($event,66)">点我提示信息(传参)button>
21 div>
22 body>
23
24 <script type="text/javascript" >
25 Vue.config.productionTip = false;// 阻止 vue 在启动时生成生产提示。
26
27 let vm = new Vue({
28 el: '#root',
29 data: {
30 name: 'Jack'
31 },
32 methods: {
33 showInfo1(event){
34 console.log(event.target.innerText);// target事件对象，发生事件的事件目标（元素）
35 console.log(this); // 这里的this就是vm(vue对象)
36 alert('showInfo1');
37 },
38 showInfo2: function (event, number) {
39 console.log(number);
40 alert('showInfo2');
41 }
42 }
43 })
44 vm.$mount('#root') // el的第二种写法
45 script>
46 html>
1 DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8" />
5 <title>事件修饰符title>
6 <script type="text/javascript" src="../js/vue.js">script>
7 <style>
8 *{
9 margin-top: 5px;
10 }
11 .demo2{
12 height: 50px;
13 background-color: skyblue;
14 }
15 .demo4{
16 padding: 5px;
17 background-color: skyblue;
18 }
19 .demo4_1{
20 padding: 5px;
21 background-color: orange;
22 }
23 .list{
24 width: 200px;
25 height: 200px;
26 background-color: peru;
27 overflow: auto;
28 }
29 li{
30 height: 100px;
31 }
32 style>
33 head>
34 <body>
35
44 <div id="root">
45 <h1>hello， {{name}}h1>
46
47 <a href="http://baidu.com" @click.prevent="showInfo1">点我提示信息a>
48
49 <div class="demo2" @click="showInfo2" >
50
51 <button @click.stop="showInfo2">点我提示信息button>
52 div>
53
54 <button @click.once="showInfo2">点我提示信息button>
55
56 <div class="demo4" @click.capture="showInfo4(1)">
57 div1
58 <div class="demo4_1" @click="showInfo4(2)">
59 div2
60 div>
61 div>
62
63
64 <div class="demo4" @click.self="showInfo4(1)">
65 div1
66 <div class="demo4_1" @click="showInfo4(2)">
67 div2
68 div>
69 div>
70
71
75 <ul @wheel.passive="demo6" class="list">
76 <li>1li>
77 <li>2li>
78 <li>3li>
79 <li>4li>
80 ul>
81 div>
82 body>
83
84 <script type="text/javascript" >
85 Vue.config.productionTip = false;// 阻止 vue 在启动时生成生产提示。
86
87 let vm = new Vue({
88 el: '#root',
89 data: {
90 name: 'Jack'
91 },
92 methods: {
93 showInfo1(event){
94 // event.preventDefault(); // 阻止默认事件（当前a标签的href）的触发。Vue中使用prevent事件修饰符一样的效果
95 alert('showInfo1');
96 },
97 showInfo2(e) {
98 // e.stopPropagation(); // 这样就阻止了div的冒泡事件 Vue可以直接使用stop修饰符
99 alert('我是提示信息！');
100 },
101 showInfo4(number){
102 // 冒泡事件的调用流程：捕获事件，从父控件到子控件依次捕获，然后冒泡依次执行，所以依次是showInfo4(2)、showInfo4(1)
103 // 当设置事件修饰符capture时，事件在捕获的时候直接执行，依次是showInfo4(1)、showInfo4(2)
104 console.log(number);
105 },
106 demo6(e){
107 // 当你滚动鼠标滚轮的时候会立即执行该方法(demo6 我们定义的事件回调)，
108 // 然后去滚动条会往上或者往下滚动(默认回调)
109 // 但当你使用passive 事件修饰符的时候，它的流程就变成立即执行默认回调，不再等待demo6执行完了再执行
110 for (let i = 0; i < 1000; i++){
111 console.log('@');
112 }
113 console.log('累坏了');
114 }
115 },
116
117 })
118 vm.$mount('#root') // el的第二种写法
119 script>
120 html>