首页 > 其他分享 >Vue 项目实战1-学习计划表

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

时间:2024-08-25 23:23:10浏览次数:14  
标签:实战 el Vue plans form 表单 学习 newPlan 计划表

<iframe allowfullscreen="true" data-mediaembed="csdn" frameborder="0" id="c5O0dNew-1724597389391" src="https://live.csdn.net/v/embed/419907"></iframe>

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实现一个"学习计划表"

<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,这样便于更好偷懒。


<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.模板语法 ,写出项目的结构


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.进行数据渲染


完整代码

<!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>

标签:实战,el,Vue,plans,form,表单,学习,newPlan,计划表
From: https://blog.csdn.net/2301_81807150/article/details/141507320

相关文章

  • 从0到1:React项目中的Webpack配置实战
    公司项目一般都是使用集团封装好的脚手架,脚手架内部实现咱看不到也摸不着,好不容易组内推行新的UI框架,需要自行定义webpack配置,这可是个绝佳的好机会,我对配置过程进行了梳理,把商业项目的成熟配置小跑着送上。初始化首先新建一个空文件夹,执行npminit初始化生成package.json......
  • java毕业设计-基于springboot+vue的在线付费自习室管理系统,基于SpringBoot+Vue的自习
    文章目录前言系统功能演示视频项目架构和内容获取(文末获取)具体实现截图用户前台管理后台架构设计MVC的设计模式基于B/S的架构技术栈具体功能模块设计系统需求分析可行性分析系统测试为什么我?关于我我自己的网站项目开发案例项目相关文件前言博主介绍:✌️码农一枚......
  • 【VUE声明式导航跳转如何传参】router-link查询参数传参&动态路由传参
    VUE声明式导航跳转如何传参文章目录VUE声明式导航跳转如何传参前言一、查询参数传参语法实现步骤1.实现【首页】和【搜索页】的基础点击功能2.实现【首页】向【搜索页】跳转时的传参功能JS中如何获取传值二、动态路由传参语法实现步骤1.实现首页和搜索页的基础功能2.......
  • 大数据开发工程师必懂的Hive调优与实战保姆指南
    目录第一章基于Hadoop的数据仓库Hive基础知识1.1概述一、数据仓库的定义与传统数据仓库的挑战二、Hive的诞生背景与作用三、Hive的主要特点四、Hive的实际应用场景五、Hive在大数据处理和分析领域的重要地位1.2Hive系统架构一、Hive系统架构的组成部分......
  • 第8篇 vue开发环境搭建
    window系统上部署vue的开发环境1.安装nodejs1.1下载并安装node.js在浏览器中打开nodejs官网https://nodejs.org/zh-cn/,选择需要的版本直接点击即可下载,可以选择长期支持的版本【自由选择】然后就是一系列的“下一步”2.检查nodejs是否安装成功打开cmd,输入命令n......
  • 基于java+springboot+vue的刷题系统微信小程序
    ......
  • Chapter 03 Vue指令(下)
    欢迎大家订阅【Vue2+Vue3】入门到实践专栏,开启你的Vue学习之旅!文章目录前言一、v-on指令二、v-for指令三、v-bind指令四、v-model指令前言在Vue.js中,指令是带有v-前缀的特殊属性,不同属性对应不同的功能。通过学习不同的指令,我们能够灵活应对多种业务场景......
  • 【实战经验】在ubuntu系统更新DNS服务
    最近遇到了一个问题,就是在安装的时候没有配置好DNS服务,导致系统安装后无法上网。一、DNS部署介绍说明:在Linux上实现DNS服务配置,可以使用以下步骤:安装DNS服务器软件:在Linux上有多种DNS服务器软件可选择,比如BIND、dnsmasq等。选择其中一种安装,并确保软件已被正确安装。配......
  • Pulsar 入门实战(2)--特性及架构
    本文主要介绍Pulsar的特性及架构,对应的pulsar版本为3.3.x。1、Pulsar特性Pulsar实例原生支持多个集群,并且在集群之间实现了无缝的地理复制消息。极低的发布和端到端延迟。无缝扩展至超过一百万个主题。简单的客户端API,支持Java、Go、Python和C++语言。多种订阅......
  • 基于springboot+vue.js的牙科就诊管理系统附带文章源码部署视频讲解等
    文章目录前言详细视频演示具体实现截图核心技术介绍后端框架SpringBoot前端框架Vue持久层框架MyBaits为什么选择我代码参考数据库参考测试用例参考源码获取前言......