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:
52
08-vue3/10-next-tick-and-component-v-model/starter.js
Normal file
52
08-vue3/10-next-tick-and-component-v-model/starter.js
Normal 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");
|
||||
Reference in New Issue
Block a user