一、事件处理
我们可以使用v-on 指令(简写为@)来监听DOM事件,并在事件触发时执行对应的JavaScript。用法:
on:click="methodName"
或
@click="handler"
- 内联事件处理器:事件被触发时执行的内联JavaScript语句(与onclick类似)
- 方法事件处理器:一个指向组件上定义的方法的属性名或是路径
内联事件处理器:
内联事件处理器通常用于简单场景
<template>
<h3>内联事件处理器</h3>
<button on:click="count++">Add</button> <!-- v-on:可简写为@ -->
<p>{{ count }}</p>
</template>
<script>
export default {
data() {
return {
count:0
}
}
}
</script>
方法事件处理器:
<template>
<h3>方法事件处理器</h3>
<button @dblclick="addCount">Add</button>//dblclick代表双击触发
<p>{{ count }}</p>
</template>
<script>
export default {
data(){
return {
count:0
}
},
methods: {
addCount(){
this.count++
}
}
}
</script>
二、事件参数
事件参数可以获取 event对象和通过事件传递数据获取event对象
<template>
<h3>事件参数传递数据</h3>
<button @click="addCount('hello')">Add</button>
<p>{{ count }}</p>
</template>
<script>
export default {
data(){
return {
count:0
}
},
methods: {
addCount(msg){
//e.target.innerHTML="Add"+this.count;
console.log(msg);
this.count++ //this.count用于读取到data里面的数据
}
}
}
</script>
注意:vue中的event对象,就是原生JS的event对象
<template>
<h3>事件传参</h3>
<p @click="getNameHandler(item,$event)" v-for="(item,index) in names" :key="index">{{ item }}</p>
</template>
<script>
export default {
data(){
return {
names:['a', 'b', 'c']
}
},
methods: {
getNameHandler(name,e){
console.log(name);
console.log(e);
}
}
}
</script>
注意:既传递对象又传递事件要用$event