feat: Add Vue3 exercises and interview plan

- 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.
This commit is contained in:
charlie
2026-03-24 23:02:58 +08:00
parent 3435848495
commit d0d8be443b
41 changed files with 1551 additions and 5 deletions

View File

@@ -0,0 +1,52 @@
const { createApp, ref, nextTick, watch } = Vue;
createApp({
components: {
SearchInput: {
props: {
modelValue: {
type: String,
default: "",
},
},
emits: ["update:modelValue"],
template: `
<input
ref="inputEl"
:value="modelValue"
type="text"
placeholder="请输入课程关键字"
@input="$emit('update:modelValue', $event.target.value)"
/>
`,
methods: {
focus() {
this.$refs.inputEl.focus();
},
},
},
},
setup() {
const showSearch = ref(false);
const keyword = ref("");
const searchBox = ref(null);
watch(keyword, (newValue) => {
// 任务:在控制台输出关键字变化
});
async function toggleSearch() {
// 任务:
// 1. 切换 showSearch.value
// 2. 如果展开了await nextTick()
// 3. 通过 searchBox.value.focus() 聚焦输入框
}
return {
showSearch,
keyword,
searchBox,
toggleSearch,
};
},
}).mount("#app");