欢迎来到尧图网

客户服务 关于我们

您的位置：首页 > 教育 > 培训 > Vue 项目实战2-待办事项应用

Vue 项目实战2-待办事项应用

2026/3/22 7:43:35 来源：https://blog.csdn.net/2301_81807150/article/details/141536894  浏览:  次   关键词：Vue 项目实战2-待办事项应用

下了班，闲的蛋疼😎，又给新手写了个vue练手项目，直接上代码。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>待办事项应用</title><!-- 引入 Element UI CSS --><link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"><!-- 引入 Vue.js --><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><!-- 引入 Element UI JS --><script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<!-- 内联样式 -->
<style>.container {max-width: 600px;margin: 0 auto;padding: 20px;}.task-status {display: flex;justify-content: space-between;align-items: center;padding: 10px;}.center-buttons {display: flex;justify-content: center;}.title{text-align: center;}
</style>
<body><div id="app"><div class="container">、<h1 class=title>待办事项应用</h1><!-- 上半部分 - 输入区域 --><el-input v-model="newTask" placeholder="请输入新的待办事项" @keyup.enter="addTask"><el-button slot="append" icon="el-icon-plus" @click="addTask"></el-button></el-input><!-- 中间部分 - 列表区域 --><el-table :data="filteredTasks" style="width: 100%"><el-table-column prop="title" label="任务" width="180"><template slot-scope="scope"><el-checkbox v-model="scope.row.completed" @change="toggleTask(scope.$index)"></el-checkbox><span :class="{ completed: scope.row.completed }">{{ scope.row.title }}</span></template></el-table-column><el-table-column label="操作"><template slot-scope="scope"><el-button size="mini" type="danger" @click="deleteTask(scope.$index)">删除</el-button></template></el-table-column></el-table><!-- 下半部分 - 任务状态区域 --><div class="task-status"><span>任务总数: {{ filteredTasks.length }}</span><el-button-group class="center-buttons"><el-button type="primary" @click="viewAll">全部</el-button><el-button type="success" @click="viewActive">待办</el-button><el-button type="warning" @click="viewCompleted">已办</el-button></el-button-group></div></div></div><!-- Vue.js 实现逻辑 --><script>new Vue({el: '#app',data: {newTask: '', // 新任务的输入框值tasks: [ // 所有任务的数据{ title: '学习Vue.js', completed: false },{ title: '完成作业', completed: true }],view: 'all' // 当前显示的任务视图},methods: {addTask() { // 添加新任务if (this.newTask.trim()) {this.tasks.push({title: this.newTask,completed: false});this.newTask = ''; // 清空输入框}},deleteTask(index) { // 删除任务this.tasks.splice(index, 1);},toggleTask(index) { // 切换任务状态this.tasks[index].completed = !this.tasks[index].completed;},viewAll() { // 显示所有任务this.view = 'all';},viewActive() { // 显示待办任务this.view = 'active';},viewCompleted() { // 显示已办任务this.view = 'completed';}},computed: {filteredTasks() { // 计算属性来过滤任务if (this.view === 'all') {return this.tasks;} else if (this.view === 'active') {return this.tasks.filter(task => !task.completed);} else if (this.view === 'completed') {return this.tasks.filter(task => task.completed);}}}});</script>
</body>
</html>

以下是本次构建待办事项应用过程中涉及的关键知识点总结

1. 使用 CDN 引入 Vue.js 和 Element UI

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

2. Vue.js 实例

DOM 元素选择器 (el 属性)

指定 Vue 实例挂载到哪个 DOM 元素上。
new Vue({el: '#app',...
});

数据绑定 (data 属性)

定义 Vue 实例的数据对象，用于数据绑定。
data: {newTask: '',tasks: [],view: 'all'
},

计算属性 (computed 属性)

基于其他数据动态计算结果，提高性能。
computed: {filteredTasks() {// 根据当前视图过滤显示的任务}
},

方法 (methods 属性)


定义可复用的方法，用于处理事件。
methods: {addTask() {// 添加新任务},deleteTask(index) {// 删除任务},toggleTask(index) {// 切换任务状态},viewAll() {// 显示所有任务},viewActive() {// 显示待办任务},viewCompleted() {// 显示已办任务}
},

3. Element UI 组件

输入框 (el-input)
用于输入新任务。
<el-input v-model="newTask" placeholder="请输入新的待办事项" @keyup.enter="addTask"><el-button slot="append" icon="el-icon-plus" @click="addTask"></el-button>
</el-input>
表格 (el-table)
用于展示任务列表。
<el-table :data="filteredTasks" style="width: 100%"><el-table-column prop="title" label="任务" width="180"><template slot-scope="scope"><el-checkbox v-model="scope.row.completed" @change="toggleTask(scope.$index)"></el-checkbox><span :class="{ completed: scope.row.completed }">{{ scope.row.title }}</span></template></el-table-column><el-table-column label="操作"><template slot-scope="scope"><el-button size="mini" type="danger" @click="deleteTask(scope.$index)">删除</el-button></template></el-table-column>
</el-table>

按钮 (el-button)
用于执行各种操作，如添加、删除等。
<el-button type="primary" @click="viewAll">全部</el-button>
<el-button type="success" @click="viewActive">待办</el-button>
<el-button type="warning" @click="viewCompleted">已办</el-button>
按钮组 (el-button-group)
用于组合多个按钮。
<el-button-group class="center-buttons"><el-button type="primary" @click="viewAll">全部</el-button><el-button type="success" @click="viewActive">待办</el-button><el-button type="warning" @click="viewCompleted">已办</el-button>
</el-button-group>

4. 响应式设计

  • Flexbox
    使用 Flexbox 布局来让元素水平居中对齐。 
    1.center-buttons {
2    display: flex;
3    justify-content: center;
4}

5. Vue 指令

  • v-model
    用于双向数据绑定。
    1<el-input v-model="newTask" ...>
  • v-for
    用于循环遍历数据并渲染列表。
    1<el-table :data="filteredTasks" ...>
  • v-if / v-show
    控制元素的条件渲染。
    1<div v-if="condition">...</div>
  • @click / @keyup
    用于监听事件。
    1<el-button @click="viewAll">全部</el-button>
2<el-input ... @keyup.enter="addTask">

6. CSS 和样式

  • 内联样式
    在 <style> 标签中添加内联样式。 
    1<style>
2    .container {
3        max-width: 600px;
4        margin: 0 auto;
5        padding: 20px;
6    }
7
8    .task-status {
9        display: flex;
10        justify-content: space-between;
11        align-items: center;
12        padding: 10px;
13    }
14
15    .center-buttons {
16        display: flex;
17        justify-content: center;
18    }
19</style>

版权声明:

本网仅为发布的内容提供存储空间，不对发表、转载的内容提供任何形式的保证。凡本网注明“来源：XXX网络”的作品，均转载自其它媒体，著作权归作者所有，商业转载请联系作者获得授权，非商业转载请注明出处。

我们尊重并感谢每一位作者，均已注明文章来源和作者。如因作品内容、版权或其它问题，请及时与我们联系，联系邮箱：809451989@qq.com，投稿邮箱：809451989@qq.com

相关资讯

热文排行

最新新闻

推荐新闻

热搜词