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