Vue 项目实战1-学习计划表

架构师ZYL2024-08-29 15:50

Vue 项目实战1-学习计划表

一、大致实现思路

1. 页面结构设计

使用 Element UI 的 `el-card`、`el-form`、`el-table` 等组件来构建页面的基本结构。
使用 `el-row` 和 `el-col` 来实现水平布局。

2. 数据模型

使用 Vue 的数据模型来存储学习计划的信息，如 `newPlan` 和 `plans` 数组。

`newPlan` 用于暂存新添加的学习计划信息。
`plans` 用于存储所有已添加的学习计划。

3. 表单交互

使用 `el-form` 和 `el-form-item` 来创建表单，并使用 `v-model` 来实现双向数据绑定。
使用 `el-input` 和 `el-select` 来创建输入框和下拉选择器。
使用 Element UI 的表单验证功能 (`:rules`) 来确保所有必填字段都已被填写。

4. 添加学习计划

使用 `el-button` 创建"添加"按钮，并通过点击事件触发 `addPlan` 方法。
在 `addPlan` 方法中，先验证表单数据的有效性，然后将新计划添加到 `plans` 数组中。

5. 展示学习计划

使用 `el-table` 来展示所有的学习计划。
使用 `v-for` 循环遍历 `plans` 数组，并为每条记录创建一个表格行。

6.完成状态切换

在表格的"完成状态"列中，使用 `el-switch` 组件来表示完成状态，并通过 `v-model` 实现双向绑定。

7. 删除学习计划

在表格的"操作"列中，使用 `el-button` 创建"删除"按钮，并通过点击事件触发 `deletePlan` 方法。
在 `deletePlan` 方法中，根据选中的行的索引从 `plans` 数组中移除该记录。

二、关键知识点

1. Vue 2 基础

数据绑定 (`v-model`): 双向数据绑定机制。
条件渲染 (`v-if`, `v-show`): 控制元素的显示和隐藏。
列表渲染 (`v-for`): 遍历数组并生成 DOM 元素。
事件处理 (`@click`, `@submit.prevent`): 监听用户事件并执行相应操作。
计算属性 (`computed`): 用于定义依赖于其他数据的属性。
方法 (`methods`): 执行复杂的逻辑或操作。

2.Element UI

`el-card`: 用于创建卡片容器。
`el-form` 和 `el-form-item`: 用于创建表单和表单项。
`el-input`: 输入框组件。
`el-select`: 下拉选择器组件。
`el-table`: 表格组件。
`el-switch`: 开关组件。
`el-button`: 按钮组件。
`el-row` 和 `el-col`: 用于创建栅格系统。

3. CSS 样式

使用内联样式或外部样式表来美化界面。
使用 Flexbox 或 Grid 布局来实现复杂布局。

4. 表单验证

使用 Element UI 的内置表单验证功能。
定义验证规则 (`:rules`) 并在提交前进行验证。

三、使用vue+element-ui实现一个"学习计划表"

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

1.在这里我们在HTML中使用cdn引入vue，这样便于更好偷懒。

html 复制代码 
<div id="app">
    <el-card class="box-card">
        <div slot="header">
            <h1>学习计划表</h1>
        </div>
        <el-form :model="newPlan" ref="form" label-width="80px" :rules="rules">
            <el-row :gutter="20">
                <el-col :span="8">
                    <el-form-item label="学习科目" prop="subject">
                        <el-input v-model="newPlan.subject"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="学习内容" prop="content">
                        <el-input v-model="newPlan.content"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="学习地点" prop="location">
                        <el-select v-model="newPlan.location" placeholder="请选择">
                            <el-option label="自习室" value="自习室"></el-option>
                            <el-option label="图书馆" value="图书馆"></el-option>
                            <el-option label="宿舍" value="宿舍"></el-option>
                        </el-select>
                        <el-form-item>
                            <el-button type="primary" @click="addPlan" style="margin-left: 255px;margin-top:-40px ;">添加</el-button>
                        </el-form-item>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
    </el-card>
    <el-table :data="plans" style="width: 100%">
        <el-table-column prop="subject" label="学习科目" width="180"></el-table-column>
        <el-table-column prop="content" label="学习内容" width="180"></el-table-column>
        <el-table-column prop="location" label="学习地点" width="180"></el-table-column>
        <el-table-column label="完成状态" width="180">
            <template slot-scope="scope">
                <el-switch v-model="scope.row.completed" active-text="已完成" inactive-text="未完成"></el-switch>
            </template>
        </el-table-column>
        <el-table-column label="操作" width="180">
            <template slot-scope="scope">
                <el-button type="danger" size="small" @click="deletePlan(scope.$index)" :disabled="!scope.row.completed">删除</el-button>
            </template>
        </el-table-column>
    </el-table>
</div>

2.模板语法 ，写出项目的结构

javascript 复制代码 
new Vue({
        el: '#app',
        data() {
            return {
                newPlan: {
                    subject: '',
                    content: '',
                    location: ''
                },
                plans: [],
                rules: {
                    subject: [{ required: true, message: '请输入学习科目', trigger: 'blur' }],
                    content: [{ required: true, message: '请输入学习内容', trigger: 'blur' }],
                    location: [{ required: true, message: '请选择学习地点', trigger: 'change' }]
                }
            }
        },
        methods: {
            addPlan() {
                this.$refs.form.validate(valid => {
                    if (valid) {
                        this.plans.push({ ...this.newPlan, completed: false });
                        this.newPlan = { subject: '', content: '', location: '' };
                    }
                });
            },
            deletePlan(index) {
                this.plans.splice(index, 1);
            }
        }
    });

3.进行数据渲染

完整代码

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>学习计划表</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
<div id="app">
    <el-card class="box-card">
        <div slot="header">
            <h1>学习计划表</h1>
        </div>
        <el-form :model="newPlan" ref="form" label-width="80px" :rules="rules">
            <el-row :gutter="20">
                <el-col :span="8">
                    <el-form-item label="学习科目" prop="subject">
                        <el-input v-model="newPlan.subject"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="学习内容" prop="content">
                        <el-input v-model="newPlan.content"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="学习地点" prop="location">
                        <el-select v-model="newPlan.location" placeholder="请选择">
                            <el-option label="自习室" value="自习室"></el-option>
                            <el-option label="图书馆" value="图书馆"></el-option>
                            <el-option label="宿舍" value="宿舍"></el-option>
                        </el-select>
                        <el-form-item>
                            <el-button type="primary" @click="addPlan" style="margin-left: 255px;margin-top:-40px ;">添加</el-button>
                        </el-form-item>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
    </el-card>
    <el-table :data="plans" style="width: 100%">
        <el-table-column prop="subject" label="学习科目" width="180"></el-table-column>
        <el-table-column prop="content" label="学习内容" width="180"></el-table-column>
        <el-table-column prop="location" label="学习地点" width="180"></el-table-column>
        <el-table-column label="完成状态" width="180">
            <template slot-scope="scope">
                <el-switch v-model="scope.row.completed" active-text="已完成" inactive-text="未完成"></el-switch>
            </template>
        </el-table-column>
        <el-table-column label="操作" width="180">
            <template slot-scope="scope">
                <el-button type="danger" size="small" @click="deletePlan(scope.$index)" :disabled="!scope.row.completed">删除</el-button>
            </template>
        </el-table-column>
    </el-table>
</div>

<script>
    new Vue({
        el: '#app',
        data() {
            return {
                newPlan: {
                    subject: '',
                    content: '',
                    location: ''
                },
                plans: [],
                rules: {
                    subject: [{ required: true, message: '请输入学习科目', trigger: 'blur' }],
                    content: [{ required: true, message: '请输入学习内容', trigger: 'blur' }],
                    location: [{ required: true, message: '请选择学习地点', trigger: 'change' }]
                }
            }
        },
        methods: {
            addPlan() {
                this.$refs.form.validate(valid => {
                    if (valid) {
                        this.plans.push({ ...this.newPlan, completed: false });
                        this.newPlan = { subject: '', content: '', location: '' };
                    }
                });
            },
            deletePlan(index) {
                this.plans.splice(index, 1);
            }
        }
    });
</script>
</body>
</html>
相关推荐
careybobo12 分钟前
海康摄像头通过Web插件进行预览播放和控制
前端
TDengine （老段）38 分钟前
TDengine 中的关联查询
大数据·javascript·网络·物联网·时序数据库·tdengine·iotdb
杉之2 小时前
常见前端GET请求以及对应的Spring后端接收接口写法
java·前端·后端·spring·vue
喝拿铁写前端2 小时前
字段聚类，到底有什么用？——从系统混乱到结构认知的第一步
前端
再学一点就睡2 小时前
大文件上传之切片上传以及开发全流程之前端篇
前端·javascript
木木黄木木3 小时前
html5炫酷图片悬停效果实现详解
前端·html·html5
zhuyixiangyyds3 小时前
day21和day22学习Pandas库
笔记·学习·pandas
每次的天空3 小时前
Android学习总结之算法篇四（字符串）
android·学习·算法
请来次降维打击！！！3 小时前
优选算法系列（5.位运算）
java·前端·c++·算法
難釋懷4 小时前
JavaScript基础-移动端常见特效
开发语言·前端·javascript
热门推荐
01我决定放弃搞 Java 了02DeepSeek各版本说明与优缺点分析03如何在WPS和Word/Excel中直接使用DeepSeek功能04RAG 实践- Ollama+RagFlow 部署本地知识库05本地化部署AI知识库：基于Ollama+DeepSeek+AnythingLLM保姆级教程06从零安装 LLaMA-Factory 微调 Qwen 大模型成功及所有的坑07如何本地部署AI智能体平台，带你手搓一个AI Agent08苍穹外卖面试总结09DeepSeek RAGFlow构建本地知识库系统10【芯片封测学习专栏 -- D2D 和 C2C 之间的区别】