vue的事件处理和事件参数

一、事件处理

我们可以使用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