2021-04-02 vue基础语法(元素的事件绑定指令/事件的访问修饰符)

<template>
    <div>
        <!-- 元素的事件绑定指令 -->
        <!-- 在组件method属性上写事件方法 -->
        <!-- v-on:type="fn" 例: v-on:click="fn" 简写: @click="fn" -->
        <button v-on:click="btnClick1">click-1</button>
        <!-- 简写 -->
        <button @click="btnClick2">click-2</button>
        <!-- 事件的访问修饰符 , 修饰符可以连用
             .stop .prevent .capture .self .once .passive(提高移动端性能 关于passive:<https://blog.csdn.net/w993263495/article/details/85009761>) -->

        <div @click="propClick" class="btnBox1">
            <button @click="propClick" id="btn1">propBtn1</button>
            <!-- 此处btn点击一次触发两次 -->
        </div>
        <!-- stop:阻止事件冒泡 (事件的冒泡:由里向外)-->
        <div @click="propClick" class="btnBox2">
            <button @click.stop="propClick" id="btn1">propBtn2</button>
            <!-- btn点击只触发一次事件 -->
        </div>

        <div @click="capClick(1)" class="btnBox1">
            <button @click="capClick(2)" id="btn1">propBtn3</button>
            <!-- 先输出 2 再输出 1 -->
        </div>
        <!-- capture:事件捕获,修改冒泡事件为捕获 (事件的捕获:由外向里) -->
        <div @click.capture="capClick(1)" class="btnBox2">
            <button @click="capClick(2)" id="btn1">propBtn4</button>
            <!-- 先输出 1 再输出 2 -->
        </div>

        <!-- prevent:阻止事件默认行为 -->
        <form @submit.prevent="submitFn">
            <input type="text" name="name" />
            <button>submit</button>
        </form>

        <!-- self:自身执行当前事件 ( e.target 是自身才触发 ) 也可以阻止事件冒泡-->
        <div @click.self="selfFn" class="btnBox1">
            <button @click="selfFn" id="btn1">propBtn1</button>
        </div>

        <!-- once:当前事件仅能触发一次 -->
        <button @click.once="btnClick1">once</button>
    </div>
</template>

<script>
export default {
    name: 'pra-04-01',
    data() {
        return {
            propCount: 0
        };
    },
    methods: {
        //事件中的this指向当前组件
        //2.x版本this指向 VueComponent 对象
        //3.0版本生成Proxy对象,但效用相同
        btnClick1() {
            console.log('点击方法1');
        },
        btnClick2() {
            console.log('点击方法2');
        },
        propClick() {
            console.log('prop');
            this.propCount++;
            console.log(this.propCount);
        },
        capClick(proNum) {
            console.log(proNum);
        },
        submitFn() {
            console.log('submit');
        },
        selfFn() {
            console.log('自身触发');
        }
    }
};
</script>

<style>
.btnBox1 {
    height: 100px;
    width: 100px;
    background-color: rgb(90, 153, 212);
}
.btnBox2 {
    height: 100px;
    width: 100px;
    background-color: rgb(231, 110, 110);
}
</style>