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

【淘宝】限时满 30 减 3http:// http://e.tb.cn/h.gKCRmt2LEXHBX3l?tk=SxHh3SfCNbj CZ3458「黑神话悟空地图 攻略 路线推荐 支线、隐藏 Boss 全标记 拒绝迷路」n 点击链接直接打开 或者 淘宝搜索直接打开

一、大致实现思路

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

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

    
        

            
 学习计划表 
        
        
            
                
                    
                        
                    
                
                
                    
                        
                    
                
                
                    
                        
                            
                            
                            
                        
                        
                             添加 
                        
                    
                
            
        
    
    
        
        
        
        
            
        
        
            
        
    

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

完整代码

    
    
    
    
    



    
        

            
 学习计划表 
        
        
            
                
                    
                        
                    
                
                
                    
                        
                    
                
                
                    
                        
                            
                            
                            
                        
                        
                             添加