vuejs-challenges
vuejs-challenges copied to clipboard
Collection of Vue.js challenges
```vue // 你的答案 import { defineComponent, h } from 'vue'; export default defineComponent({ name: 'MyButton', props: { disabled: { type: Boolean, default: false, }, }, emit: ['customClick'], setup(props, { emit,...
```vue // 你的答案 Hello Vue.js p { font-size:20px; color:red; text-align: center; line-height: 50px; } /* Make it work */ :global(body) { width: 100vw; height: 100vh; background-color: burlywood; } ```
This is an auto-generated PR that auto reflect on #999, please go to #999 for discussion or making changes. Closes #999
新题目
> 请按照以下的模版填充相应的内容,一个 PR 会自动生成并保持与本 Issue 的内容同步。 > 你不需要提供详细的答案或教学,但请保证题目可解。 ## 基本信息 ```yaml # 题目难度 difficulty: easy # medium / hard / extreme # 题目标题 title: 你的题目 # 题目标签 tags: union, array...
```vue import { onMounted, inject, onUnmounted } from "vue" const timer = inject("timer") const count = inject("count") onMounted(() => { timer.value = window.setInterval(() => { count.value++ }, 1000) }) onUnmounted(()...
```vue // 你的答案 Mouse position is at: {{ x }}, {{ y }} import { onMounted, onUnmounted, ref } from 'vue'; function useEventListener( target: HTMLElement, event: T, callback: (this: HTMLElement,...
```vue // 你的答案 interface TreeData { key: string title: string children: TreeData[] } const { data } = defineProps() export default { name: 'TreeComponent' } {{ it.title }} ```
官方示例customRef 有题解 ```vue // your answers import { watch, customRef } from "vue" /** * Implement the function */ function useDebouncedRef(value, delay = 200) { let timeout = null return...
```vue // 你的答案 import { shallowRef, watch } from "vue" const state = shallowRef({ count: 1 }) // Does NOT trigger watch(state, () => { console.log("State.count Updated") }, { deep:...
```vue // 你的答案 import { ref } from "vue" const msg = ref("Hello World") {{msg}} ```