【测试平台开发】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：监听回车键。

<input type="text" @keyup.enter="enterPressed">
<script>
new Vue({
    el: '#app',
    methods: {
        enterPressed() {
            console.log('回车键被按下');
        }
    }
});
</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>

今日分享到此，坚持每日打卡，一步步深入测试平台开发的精髓。让我们携手并进，在知识的海洋中遨游，共同探索技术的无限可能。我相信，通过我们的共同努力与坚持，你一定能够掌握测试平台开发的技能，实现自己的技术梦想。让我们一起加油，让学习成为我们生活中最美好的习惯！