Vue3.x中的事件和方法全解

一、Vue事件方法的簡單使用

// template模版
<template>
    <div>
        <h2>{{ msg }}</h2>
        <button @click="setMsg()">改變msg</button>
        <button @click="getMsg()">獲取msg</button>
    </div>
</template>
// 業務邏輯
<script>
    export default {
        data() {
            return {
                msg: "你好,Vue!"
            }
        },
        methods: {
            setMsg() {
                this.msg = "改變后的msg";
            },
            getMsg() {
                alert(this.msg);
            }
        }
    }
</script>

二、v-bind綁定Class

當v-bind與class一起使用時，vue提供了特殊的增強功能style，除了字符串外，表達式還可以求值為對象或者數組

2.1 v-bind: class 綁定字符串

<template>
    <div :class="myClass"></div>
    <button @click="changClass()">改變div顏色</button>
</template>

<script>
    export default {
        data() {
            return {
                myClass: "red",
            }
        },
        methods: {
            changClass() {
                this.myClass = "blue";
            }
        }
    }
</script>

<style scoped="scoped">
    .red {
        width: 200px;
        height: 200px;
        background-color: red;
    }

    .blue {
        width: 200px;
        height: 200px;
        background-color: skyblue;
    }
</style>

2.2 v-bind:class 綁定對象

<template>
    <h2>class綁定多個動態屬性：對象方式</h2>
    <div :class="{'blue':isActive,'active':isErro}"></div> <!-- 注意：外邊雙引號，里邊單引號 -->
</template>

<script>
    export default {
        data() {
            return {
                isActive: true,
                isErro: false
            }
        },
        methods: {
            changClass() {
                this.myClass = "blue";
            }
        }
    }
</script>

<style scoped="scoped">
    .red {
        width: 200px;
        height: 200px;
        background-color: red;
    }

    .blue {
        width: 200px;
        height: 200px;
        background-color: skyblue;
    }
</style>

2.3 v-bind:class 綁定數組

<template>
    <h2>class綁定多個動態屬性：數組方式</h2>
    <div :class="[activeClass,redClass]">前端工程師</div> <!-- 注意：外邊雙引號，里邊單引號 -->
</template>

<script>
    export default {
        data() {
            return {
                redClass: "red",
                activeClass: "active"
            }
        },
        methods: {
            changClass() {
                this.myClass = "blue";
            }
        }
    }
</script>

<style scoped="scoped">
    .red {
        width: 200px;
        height: 200px;
        background-color: red;
    }

    .blue {
        width: 200px;
        height: 200px;
        background-color: skyblue;
    }

    .active {
        line-height: 200px;
        text-align: center;
        font-size: 30px;
        font-weight: bolder;
        color: #fff;
    }
</style>

2.4 v-bind:class 數組語法：結合三目運算

<template>
    <h2>class綁定多個動態屬性：三目運算方式</h2>
    <div class="active" :class="flag?redClass:blackClass">前端工程師</div> <!-- 注意：外邊雙引號，里邊單引號 -->
</template>

<script>
    export default {
        data() {
            return {
                flag: false,
                redClass: "red",
                blackClass: "black",
                activeClass: "active",
            }
        },
        methods: {}
    }
</script>

<style scoped="scoped">
    .red {
        width: 200px;
        height: 200px;
        background-color: red;
    }

    .black {
        width: 200px;
        height: 200px;
        background-color: black;
    }

    .active {
        line-height: 200px;
        text-align: center;
        font-size: 30px;
        font-weight: bolder;
        color: #fff;
    }
</style>

 三、v-bind綁定Style

<template>
    <h1 :style="styleObj1">v-bind綁定style:對象方式</h1>
</template>

<script>
    export default {
        data() {
            return {
                styleObj1: {
                    color: "red",
                    "font-weight": "200"
                }
            }
        },
        methods: {}
    }
</script>

<style scoped="scoped">
</style>

<template>
    <h1 :style="[styleObj1,styleObj2]">v-bind綁定style:數組方式</h1>
</template>

<script>
    export default {
        data() {
            return {
                styleObj1: {
                    color: "red",
                    "font-weight": "200"
                },
                styleObj2: {
                    color: "green",
                    "font-style": "italic"
                }
            }
        },
        methods: {}
    }
</script>

案例：循環數據 第一個數據高亮顯示

<template>
    <ul>
        <!-- 循環數據，第一個數據高亮顯示 -->
        <li v-for="(item,index) in list" :key="index" :class="{'red':index==0,'blue':index==1}">{{ item }}</li>
    </ul>
</template>

<script>
    export default {
        data() {
            return {
                list: ['騰訊', '阿里巴巴', '百度', '美團'],
            }
        },
        methods: {}
    }
</script>

<style scoped="scoped">
    .red {
        color: red;
    }

    .blue {
        color: blue;
    }
</style>

四、事件方法應用

4.1 傳參

<template>
    <h2>{{ title }}</h2>
    <button @click="setTitle('我是新的值111')">設置title的值1</button>
    <button @click="setTitle('我是新的值222')">設置title的值2</button>
</template>

<script>
    export default {
        data() {
            return {
                title: "我是一個標題"
            }
        },
        methods: {
            setTitle(data) {
                this.title = data;
            },
        }
    }
</script>

<style scoped="scoped">
</style>

4.2 在一個方法中調用另一個方法

<template>
    <h2>{{ msg }}</h2>
    <button @click="setMsg()">設置msg</button>
    <button @click="getMsg()">獲取msg</button>
    <button @click="run()">方法中調用方法改變msg的值</button>
</template>

<script>
    export default {
        data() {
            return {
                msg: "你好,Vue!"
            }
        },
        methods: {
            setMsg() {
                this.msg = "我是改變后的msg";
            },
            getMsg() {
                alert(this.msg);
            },
            run() { // 在一個方法中調用另一個方法,通過this調用
                this.getMsg();
            },
        }
    }
</script>

<style scoped="scoped">
</style>

四、事件對象：

有時候我們還需要在內聯語句處理程序中訪問原始DOM事件，可以使用特殊$event變量將其傳遞給方法

1、單個參數：

// temolate 模版
<template>
    <button data-aid="123" @click="eventFn($event)">事件對象</button> <!-- 注意這里$event規范(固定)寫法 -->
</template>
// 業務邏輯
<script>
    export default {
        data() {},
        methods: {
            eventFn(e) { // 傳入事件對象
                console.log(e);
                e.srcElement.style.background = "yellowgreen"; // srcElement 或者 target都可以獲取事件源對象
                console.log(e.srcElement.dataset.aid); // 通過事件對象獲取 aid 屬性值
                // e.preventDefault(); // 阻止冒泡
                // e.stopPropagation(); // 阻止默認行為
            },
        }
    }
</script>
<style scoped="scoped"></style>

2、多個參數：

<template>
    <button @click="warn('傳入的參數',$event)">多個參數加事件對象</button>
</template>

<script>
    export default {
        data() {},
        methods: {
            warn(message, e) { // 多個參數
                console.log(e);
                if (e) {
                    e.preventDefault();
                }
                alert(message);
            },
        }
    }
</script>

<style scoped="scoped"></style>

五、多事件處理程序

你可以在事件處理程序中，使用逗號分隔多個事件處理程序（點擊一次，執行多個方法）

<template>
    <button @click="one($event),two($event),getMsg()">點擊按鈕一次執行多個方法</button>
</template>

<script>
    export default {
        data() {
            return {
                msg: "hello vue!",
            }
        },
        methods: {
            getMsg() {
                alert(this.msg);
            },
            one(e) {
                console.log(e);
            },
            two(e) {
                console.log(e);
            }
        }
    }
</script>

<style scoped="scoped"></style>

六、事件修飾符

vue中阻止冒泡阻止默認行為，可以通過事件對象event.preventDefault(),或event.stopPropagation()實現，還可以通過事件修飾符實現

.stop  阻止冒泡

<template>
    <div @click="divHandler">
        <!-- .stop 阻止冒泡 -->
        <input type="button" @click.stop="btnHandler" value="點擊按鈕">
    </div>
</template>

<script>
    export default {
        data() {},
        methods: {
            divHandler() {
                console.log("父元素");
            },
            btnHandler() {
                console.log("子元素");
            },
        }
    }
</script>

<style scoped="scoped"></style>

.prevent  阻止默認事件(跳轉)

<template>
    <a href="https://www.baidu.com" @click.prevent="linkClick">百度</a>
</template>

.capture  添加事件傾聽器時使用事件捕獲機制（由外向里）

<template>
    <div class="inner" @click.capture="divHandler">
        <input type="button" value="點擊按鈕" @click.stop="btnHandler" />
    </div>
</template>

.self  只當事件在該元素本身（比如不是子元素）觸發時觸發回調

<template>
    <div class="inner" @click="divHandler">
        <input type="button" value="點擊按鈕" @click.stop="btnHandler" />
    </div>
</template>

.once  事件只觸發一次

<template>
    <a href="https://www.baidu.com" @click.prevent.once="linkClick">百度</a>
</template>

.stop 和 .self 的區別:
.self 只會阻止自己身上冒泡行為的觸發，並不會真正阻止冒泡的行為

七、按鍵修飾符

.enter

.tab

.delete (同時捕獲刪除或退格鍵)

.esc

.space

.up

.down

.left

.right

監聽鍵盤事件時，我們通常要檢查特定的鍵，Vue允許在監聽關鍵事件時v-on或@在監聽關鍵事件時添加按鍵修飾符

<template>
    <input @keyup.enter="sumbit()" type="text">
</template>

<script>
    export default {
        data() {},
        methods: {
            sumbit() {
                alert("提交成功");
            }
        }
    }
</script>

<style scoped="scoped"></style>