鸩羽千夜

07.事件

goer ... 2022-01-06 Vue
  • Javascript
  • Vue
 大约 1 分钟
事件处理

[toc]

# 事件

处理事件：鼠标点击移动，键盘监听事件等

# 监听

v-on 指令监听 DOM 事件

<button v-on:click="num += 1">点击{{num}}</button>
// v-on:click 和 @click 一样
1
2

# 处理方法

事件处理逻辑会更为复杂, v-on ='方法'

对象方法写在 methods:{}下

<div id="app">
	<button v-on:click="alert1">点击</button>
    <button v-on:click="abc('123')">点</button>
    //带参数的
</div>  
<script>
    new Vue({
        el:'#app',
        data:{
            name:'vue',
        },
        methods:{  //函数写在对象的methods下
            alert1(){
                alert(this.name); //js逻辑
            }，
            abc:function(a){//接受参数
        		alert(a);
    		},
        }
    });
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

处理器中访问原始的 DOM 事件。可以用特殊变量 $event·

<button v-on:click="alert('vue',$event)">点击</button>
//把 $event作第二个参数
methods:{  //函数写在对象的methods下
    alert(hi,e){
        alert(hi);
        console.log(e);
    },
}
1
2
3
4
5
6
7
8

# 事件修饰符

由点开头的指令后缀 很常用

// 不全就看看官方文档
.stop
.prevent
.capture
.self
.once
.passive
***
<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>

<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>
1
2
3
4
5
6
7
8
9
10
11
12
13

v-on: 可以用所有的js事件，这里只试了单击事件，同学赶紧去用其他事件

多個事件，直接在後面接參數