TodoList 案例(Vue3): 使用Composition API

🤍 前端开发工程师、技术日更博主、已过CET6

🍨 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1

🕠 牛客 高级专题作者、打造专栏《前端面试必备》《2024面试高频手撕题》《前端求职突破计划》

🍚 蓝桥云课 签约作者、上架课程《Vue.js 和 Egg.js 开发企业级健康管理项目》《带你从入门到实战全面掌握 uni-app》

文章目录

以下是一个简单的TodoList案例,展示了如何在Vue3中使用Composition API来实现一个基本的待办事项列表。

项目结构

复制代码
src/
|-- components/
|   |-- TodoList.vue
|   |-- TodoItem.vue
|-- App.vue
|-- main.js
|-- store.js (使用Vuex)

TodoList.vue

html 复制代码
<template>
<div>
<h1>Todo List</h1>
<input v-model="newTodo" @keyup.enter="addTodo" placeholder="Add a new todo">
<ul>
<TodoItem
v-for="(todo, index) in todos"
:key="index"
:todo="todo"
@delete="deleteTodo(index)"
/>
</ul>
</div>
</template>

<script>
import { ref } from 'vue';
import TodoItem from './TodoItem.vue';

export default {
components: {
TodoItem
},
setup() {
const newTodo = ref('');
const todos = ref([]);

const addTodo = () => {
if (newTodo.value.trim()) {
todos.value.push({ text: newTodo.value.trim(), done: false });
newTodo.value = '';
}
};

const deleteTodo = (index) => {
todos.value.splice(index, 1);
};

return {
newTodo,
todos,
addTodo,
deleteTodo
};
}
};
</script>

TodoItem.vue

html 复制代码
<template>
<li>
<span :class="{ done: todo.done }">{{ todo.text }}</span>
<button @click="$emit('delete')">Delete</button>
</li>
</template>

<script>
export default {
props: {
todo: Object
}
};
</script>

<style>
.done {
text-decoration: line-through;
}
</style>

App.vue

html 复制代码
<template>
<TodoList />
</template>

<script>
import TodoList from './components/TodoList.vue';

export default {
components: {
TodoList
}
};
</script>

main.js

javascript 复制代码
import { createApp } from 'vue';
import App from './App.vue';
import store from './store'; // 如果使用Vuex

const app = createApp(App);
app.use(store); // 如果使用Vuex
app.mount('#app');

store.js (可选)

如果你想使用Vuex来管理状态,可以创建一个store.js文件:

javascript 复制代码
import { createStore } from 'vuex';

export default createStore({
state: {
todos: []
},
mutations: {
addTodo(state, todo) {
state.todos.push(todo);
},
deleteTodo(state, index) {
state.todos.splice(index, 1);
}
},
actions: {
// 可以在这里添加异步操作
}
});

然后在 main.js 中引入并使用这个store。

总结

以上代码展示了一个简单的TodoList应用,使用了Vue3的Composition API。在这个案例中,我们创建了两个组件:TodoListTodoItemTodoList 组件负责管理待办事项的添加和删除,而 TodoItem 组件负责显示单个待办事项。这个例子没有使用Vuex,但是你可以很容易地将其集成到Vuex store中,以便更好地管理状态。

相关推荐
李少兄1 小时前
HTML 表单控件
前端·microsoft·html
学习笔记1012 小时前
第十五章认识Ajax(六)
前端·javascript·ajax
消失的旧时光-19432 小时前
Flutter 异步编程:Future 与 Stream 深度解析
android·前端·flutter
曹牧3 小时前
C# 中的 DateTime.Now.ToString() 方法支持多种预定义的格式字符
前端·c#
勿在浮沙筑高台3 小时前
海龟交易系统R
前端·人工智能·r语言
歪歪1003 小时前
C#如何在数据可视化工具中进行数据筛选?
开发语言·前端·信息可视化·前端框架·c#·visual studio
武清伯MVP3 小时前
阮一峰《TypeScript 教程》学习笔记——类型映射
笔记·学习·typescript
Captaincc4 小时前
AI 能帮你写代码,但把代码变成软件,还是得靠人
前端·后端·程序员
程序员杨工4 小时前
【原创】SpringBoot3+Vue3客户管理系统
vue.js·springboot