d0d8be443b
- Introduced Vue3 exercises covering composable API, reactivity, lifecycle hooks, and built-in components. - Added structured interview plan for frontend candidates focusing on HTML, CSS, JavaScript, TypeScript, and Vue. - Included starter files for each exercise and detailed README documentation for guidance.
39 lines
757 B
Vue
39 lines
757 B
Vue
<template>
|
|
<article class="course-card">
|
|
<h2>{{ title }}</h2>
|
|
<p>{{ finished ? "已完成" : "学习中" }}</p>
|
|
<button ref="actionButton" type="button" @click="handleToggle">
|
|
切换状态
|
|
</button>
|
|
</article>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref } from "vue";
|
|
|
|
// 任务：
|
|
// 1. 用 defineProps 定义 title 和 finished
|
|
// 2. 用 defineEmits 定义 toggle
|
|
// 3. 点击按钮时触发 toggle
|
|
// 4. 用 defineExpose 暴露 focusAction
|
|
|
|
const actionButton = ref(null);
|
|
|
|
function handleToggle() {
|
|
// 在这里触发 emit
|
|
}
|
|
|
|
function focusAction() {
|
|
actionButton.value?.focus();
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.course-card {
|
|
padding: 18px;
|
|
border-radius: 16px;
|
|
border: 1px solid #dbe4f1;
|
|
background: #fbfcfe;
|
|
}
|
|
</style>
|