Core Business Development

Next, we will build the core task management logic in App.vue.

The entire logic is as follows:

1. Data flow: Input content into the input box ->v-modelupdatenewTaskTitle。
2. Action trigger: Press Enter -> executeaddTask -> tasksAdd an item to the array.
3. View update：taskschanges -> triggerfilteredTasksautomatic recalculation -> Vue re-renderslithe list.
4. State flow: Click the filter button -> modifycurrentFiltervalue -> trigger againfilteredTaskscomputation -> the page displays different categories of tasks.

Basic Layout and Reactive Data

Write in src/App.vue:

After running, the interface is as follows:

Core Knowledge Points

1. Composition API

The above code demonstrates the core logic organization of Vue 3:

• ref(Reactive basics)：tasks、newTaskTitleare reactive references. In<script>the context, modifying them must use.value(such astasks.value = ...), but in<template>the context you directly write the variable name. Vue automatically tracks changes to these values and updates the UI.
• computed(Computed properties)：filteredTasksis a very classic application. It istasksandcurrentFilterderived from.
• Advantages: It is reactive and hascaching capability. Iftaskshas not changed, when the page is rendered multiple times, it will not re-execute the filtering logic.

2. List Rendering and Key Values

<li v-for="task in filteredTasks" :key="task.id">

• :keyThe importance of: In Vue, list loops must providekey. Here we usecrypto.randomUUID()generated unique ID. This ensures that when the list order changes or an item is deleted, Vue can accurately identify the specific DOM node, avoiding rendering errors (especially for lists with animations or input states).

3. Event Handling and Modifiers

• @keyup.enter: This is akey modifier. It makesaddTaskthe function trigger only when the user presses the Enter key, greatly improving the input experience.
• Event parameter passing：removeTask(task.id)demonstrates how to pass the current loop item's data to a function in the template.

4. Two-way Binding (v-model)

• v-model="newTaskTitle"implements synchronization between the input box and the variable.
• Principle: It is actually:valueand@inputsyntactic sugar for.

5. Animation System (TransitionGroup)

• This is a built-in Vue component specifically used to handle list (v-for) additions and removals.
• It automatically switches CSS classes when elements enter or leave (such as.list-enter-from). Combined with the code at the bottomstyle, it achieves the effect of list items smoothly sliding in and out.

Tailwind v4 Style Features Explanation

Compared with v3, Tailwind v4 places more emphasis onnative CSS capabilitiesandsimplicity.。

1. Brand-new Gradient Syntax

• bg-linear-to-br: In v4, gradients no longer requirebg-gradient-to-brthis verbose syntax. Instead, directly uselinear-to-方位which is closer to native CSS'slinear-gradient。

2. Opacity Handling

• text-blue-100/80：/80represents 80% opacity. v4's handling of color opacity is very intuitive, with no need to preset complex color configurations.

3. Theme Variable References

• bg-brand: We, in the CSS@themedefine--color-brand. In v4, as long as a CSS variable is defined, Tailwind automatically generates the corresponding utility classes (such asbg-brand, text-brand, border-brand), no need to fiddle with the JS config file.

4. Powerful Interactive Pseudo-classes

• groupand `group-hover:opacity-100`：
• Inliset ongroup。
• Set on the delete buttongroup-hover:opacity-100。
• Effect: Achieves "the delete button is displayed only when the mouse hovers over this row". This kind ofparent-child state linkagedoes not require writing a single line of JS code.

• active:scale-95: Use CSS pseudo-classes to quickly achieve button scale feedback on click.

5. Modern Borders and Ring Shadows

• focus:ring-2 focus:ring-brand/50: When the input box is focused, useringproperty to create an outer glow border,brand/50ensures the glow has a sense of translucency rather than a rigid solid color.