1.事件處理
v-on可以監聽dom事件。用法：v-on:click="methodName",可以簡寫為@click="methodName"
methodName可以是一個方法名，也可以是一個內聯表示式（直接寫邏輯）
<template>
<div>事件繫結</div>
<div>
<button v-on:click="count++">add</button>
<button @click="add">加2</button>
<p>{{ count }}</p>
</div>
</template>
<script>
export default{
data(){
return{
count:0
}
},
methods:{
add(){
this.count=this.count+2
}
}
}
</script>
2.事件傳參
事件引數可以獲取event物件和透過事件傳遞資料。vue中的event物件就是原生的event物件。
<template>
<div>事件繫結</div>
<div>
<button v-on:click="count++">add</button>
<button @click="add">加2</button>
<p>{{ count }}</p>
</div>
</template>
<script>
export default{
data(){
return{
count:0
}
},
methods:{
add(e){
//列印event物件（傳進來的引數e）
// console.log(e);
e.target.innerHTML="test"
this.count=this.count+2
}
}
}
</script>
事件傳遞引數和event物件：
<template>
<div>事件傳遞引數和event物件</div>
<div>
<button v-on:click="count++">add</button>
<button @click="add('hello',$event)">加2</button>
<p>{{ count }}</p>
</div>
</template>
<script>
export default{
data(){
return{
count:0
}
},
methods:{
add(msg,$event){
console.log(msg)
console.log($event)
this.count=this.count+2
}
}
}
</script>
3.事件修飾符
作用：簡化程式碼。
<template>
<div>事件修飾符</div>
<div>
<a @click.prevent="clickHandler" href="http://www.baidu.com">測試</a>
</div>
<div @click="clickDiv">
<p @click.stop="clickP">測試事件冒泡</p>
</div>
</template>
<script>
export default{
data(){
return{
count:0
}
},
methods:{
clickHandler(e){
// e.preventDefault();
console.log("點選了")
},
clickP(e){
console.log("點選P")
},
clickDiv(){
console.log("點選Div")
}
}
}
</script>