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.
53 lines
1.1 KiB
JavaScript
53 lines
1.1 KiB
JavaScript
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");
|