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>
相关推荐
Ting-yu7 分钟前
零基础学习Redis(10) -- zset类型命令使用
数据库·redis·学习
小黄酥1 小时前
Python学习笔记--列表、字典、集合、元组
笔记·python·学习
Arms2061 小时前
gradle 学习备忘
学习
加勒比海涛1 小时前
掌握 JavaScript ES6+：现代编程技巧与模块化实践
开发语言·javascript·es6
Zhen (Evan) Wang1 小时前
vs code: pnpm : 无法加载文件 C:\Program Files\nodejs\pnpm.ps1，因为在此系统上禁止运行脚本
vue.js·vscode·npm·node.js·angular
爆更小小刘2 小时前
Python基础语法(2)
开发语言·前端·python
再不会python就不礼貌了2 小时前
一步步教你利用大模型开发个性化AI应用，告别‘人工智障’！
人工智能·学习·算法·oracle·llama
互联网女工人2 小时前
大学生必备10个AI工具网站，辅助完成辩论/开题/实践/形势政策报告、创新创业计划书、思想汇报、心得感悟等作业，提升学习效率和学术表现！
学习
网安kk2 小时前
2024网络安全与黑客技术：零基础自学手册
网络·学习·安全·web安全·网络安全·php
暴富暴富暴富啦啦啦2 小时前
el-table 的单元格 + 图表 + 排序
javascript·vue.js·elementui
热门推荐
01RAG 实践- Ollama+RagFlow 部署本地知识库022024年高教社杯数学建模国赛C题超详细解题思路分析03【2024数模国赛赛题思路公开】国赛B题思路丨附可运行代码丨无偿自提04yolov8实战第五天——yolov8+ffmpg实时视频流检测并进行实时推流——（推流，保姆教学）05【2024高教社杯全国大学生数学建模竞赛】B题 生产过程中的决策问题——解题思路 代码 论文062024 高教社杯 数学建模国赛 （A题）深度剖析|“板凳龙” 闹元宵|数学建模完整代码+建模过程全解全析07Codeforces 969 div2[A~E] 个人题解082024数学建模国赛高教社杯C题:农作物的种植策略 思路代码文章助攻手把手保姆级092024年高教杯国赛（C题）数学建模竞赛解题思路|完整代码论文集合10组基轨迹建模 GBTM的介绍与实现（Stata 或 R）