【測試平臺開發】Vue的事件修飾符、按鍵修飾符、計算屬性學習教程

进击的bug~發表於2024-11-29
Vue事件

Vue.js是一個構建使用者介面的漸進式框架，它提供了許多強大的功能，今天將詳細介紹Vue.js中的事件修飾符、按鍵修飾符和計算屬性將從基礎開始，逐步深入講解這些概念，並透過示例程式碼幫助小白快速上手。

一、事件修飾符

事件修飾符用於修改事件的預設行為。Vue提供了一些內建的事件修飾符，如.stop、.prevent、.once、.capture、.self和.passive。

1.stop：阻止事件冒泡。

<div @click="outerClick">
    <button @click.stop="innerClick">點選我</button>
</div>
<script>
new Vue({
    el: '#app',
    methods: {
        outerClick() {
            console.log('外層div被點選');
        },
        innerClick() {
            console.log('按鈕被點選，但冒泡被阻止');
        }
    }
});
</script>

2.prevent：阻止預設行為。

<a href="https://www.baidu.com" @click.prevent="linkClick">點選我</a>
<script>
new Vue({
    el: '#app',
    methods: {
        linkClick() {
            console.log('連結被點選，但預設跳轉被阻止');
        }
    }
});
</script>

3.once：事件只觸發一次。

<button @click.once="oneTimeClick">點選我</button>
<script>
new Vue({
    el: '#app',
    methods: {
        oneTimeClick() {
            console.log('按鈕只被點選一次');
        }
    }
});
</script>

4.capture：使用事件捕獲模式。

<div @click.capture="captureClick">
    <button @click="normalClick">點選我</button>
</div>
<script>
new Vue({
    el: '#app',
    methods: {
        captureClick() {
            console.log('捕獲到點選事件');
        },
        normalClick() {
            console.log('普通點選事件');
        }
    }
});
</script>

5.self：只有事件的目標是當前元素時才觸發。

<div @click.self="selfClick">
    <button @click="childClick">點選我</button>
</div>
<script>
new Vue({
    el: '#app',
    methods: {
        selfClick() {
            console.log('div被點選');
        },
        childClick() {
            console.log('按鈕被點選，但div的self修飾符阻止了事件');
        }
    }
});
</script>

6.passive：滾動事件的預設行為將立即觸發，而不會等待vue事件監聽器完成。

二、按鍵修飾符

按鍵修飾符用於監聽鍵盤事件，Vue提供了一些常用的按鍵別名，如.enter、.tab、.delete、.esc、.space、.up、.down、.left、.right等。

1.enter：監聽Enter鍵。

<input type="text" @keyup.enter="enterPressed">
<script>
new Vue({
    el: '#app',
    methods: {
        enterPressed() {
            console.log('Enter鍵被按下');
        }
    }
});
</script>

2.自定義按鍵修飾符：可以透過Vue.config.keyCodes自定義按鍵別名。

Vue.config.keyCodes.f1 = 112;
<input type="text" @keyup.f1="f1Pressed">
<script>
new Vue({
    el: '#app',
    methods: {
        f1Pressed() {
            console.log('F1鍵被按下');
        }
    }
});
</script>

三、計算屬性

計算屬性主要用於封裝對現有物件的各種操作，並返回一個新的資料。計算屬性會根據依賴的資料變化而更新，並且在該資料沒有變化時，使用快取的計算屬性資料。

1.基本計算屬性：

<div id="app">
    <p>原始字串: {{ message }}</p>
    <p>反轉後的字串: {{ reversedMessage }}</p>
</div>
<script>
new Vue({
    el: '#app',
    data: {
        message: 'hello world'
    },
    computed: {
        reversedMessage() {
            return this.message.split('').reverse().join('');
        }
    }
});
</script>

2.計算屬性的setter：

<div id="app">
    <p>全名: {{ fullName }}</p>
    <p>
        <input type="text" v-model="firstName">
        <input type="text" v-model="lastName">
    </p>
</div>
<script>
new Vue({
    el: '#app',
    data: {
        firstName: 'John',
        lastName: 'Doe'
    },
    computed: {
        fullName: {
            get() {
                return this.firstName + ' ' + this.lastName;
            },
            set(newValue) {
                const names = newValue.split(' ');
                this.firstName = names[0];
                this.lastName = names[names.length - 1];
            }
        }
    }
});
</script>

今日分享到此，堅持每日打卡，一步步深入測試平臺開發的精髓。讓我們攜手並進，在知識的海洋中遨遊，共同探索技術的無限可能。我相信，透過我們的共同努力與堅持，你一定能夠掌握測試平臺開發的技能，實現自己的技術夢想。讓我們一起加油，讓學習成為我們生活中最美好的習慣！

相關文章