4.vue学习笔记(事件处理+事件参数+事件修饰符)

1.事件处理

我们可以使用v-on指令（简写为@）来监听DOM事件，并在事件触发时执行对应的JavaScript。
用法：v-on:click="methodName"或@click=“handler”

事件处理器的值可以是
1.内联事件处理器：事件被触发时执行的内联JavaScript语句（与onclick类似）
2.方法事件处理器：一个指向组件上定义的方法的属性名或是路径

1.1.内联事件处理器

通常用于简单场景

<template>
    <h3>方法事件处理器</h3>
    <button @click="addCount">Add</button>
    <button @dblclick="addCount">Add</button>
    <p>{{ count }}</p>
</template>

<script>

export default {
    data() {
        return{
            count:0
        }   
    },
    //所有的方法都放在methods
    methods:{
        addCount(){
            console.log("点击了");
            this.count++;
        }
    }

}
</script>

2.事件参数

事件参数可以获取Event对象和通过事件传递参数

<template>
    <h3>方法事件处理器</h3>
    <button @click="addCount('hello')">Add</button>
    <p>{{ count }}</p>
</template>

<script>

export default {
    data() {
        return{
            count:0
        }   
    },
    //所有的方法都放在methods
    methods:{
        addCount(msg){
            //Vue中的event对象，就是原生JS的Event对象
            //e.target.innerHTML = "Add" + this.count;
            console.log(msg);
            this.count++;
        }
    }

}
</script>

2.1.传参过程中获取Event

<template>
    <h3>事件传参</h3>
    <p @click="getNameHandler(item,$event)" v-for="(item,index) of names" :key="index">{{ item }}</p>
</template>

<script>
export default {
    data() {
        return{
            names:["iwen","ime","frank"]
        }   
    },
    //所有的方法都放在methods
    methods:{
        getNameHandler(name,e){
            console.log(name);
            console.log(e);
        }
    }
}
</script>

3.事件修饰符

为了简化代码
	在处理事件的时候调用event.preventDefault()等很常见。尽管我们可以直接在方法内调用，但如果方法能更专注于数据逻辑而不用去处理DOM事件的细节会更好
	为解决这一问题，Vue为 v-on 提供了时间修饰符，常用的如下

	.stop（阻止事件冒泡）	.prevent（阻止默认事件）	.once（事件只会触发一次）	.enter（回车）等

3.1.阻止默认事件+阻止事件冒泡

<template>
    <h3>事件修饰符</h3>
    <!-- 阻止默认事件 -->
    <a @click.prevent="clickHandle" href="https://www.baidu.com/">百度</a>

    <!-- 阻止事件冒泡 -->
    <div @click="clickDiv">
        <!-- 不加.stop会使点击子元素把父元素的事件也触发了 -->
        <p @click.stop="clickP">测试冒泡</p>
    </div>
</template>

<script>
export default {
    data() {
        return{
            names:["iwen","ime","frank"]
        }   
    },
    //所有的方法都放在methods
    methods:{
        clickHandle(e){
            //阻止默认事件
            //e.preventDefault();
            console.log("点击了");
        },
        clickDiv(){
            console.log("DIV");
        },
        clickP(e){
            //阻止事件冒泡
            //e.stopPropagation();
            console.log("P");
        }
    }
}
</script>