22-Vue学生管理界面

前面我们发现Vue中的数据根据数据类型可以调用ES6中的函数方法,所以在这一章,我们会单独开出一个小节讲解新接触到的ES6语法,随着案例的复杂,bugs也逐渐涌现,需要注意的地方一般都是容易出现bugs的地方,所以将注意点和bugs合并,并且添加业务逻辑来帮助从顶端理解思路,这里重点用来概述Vue或相关重要概念

效果图.gif

0.业务逻辑

学生管理界面.png

1.ES6

1.数组.forEach(回调函数名称(当前对象,当前索引))
2.数组.splice(要删除元素开始索引,要删除元素个数)
3.var 第一个查询到元素的索引=数组.indexOf(查询元素)
4.var 满足条件对象的索引=数组.findIndex(回到函数(当前对象))
5.var 满足条件对象组成的数据=数组.filter(回调函数(当前对象))
6.布尔值=字符串.includes("字符串")

2.Vue

1.v-for指令:v-for="(user,index) in 数组(返回数组的函数())"
2.v-text指令:v-text="标签中的内容"

3.html

1.细线表格:
table style="background:"#000""
td style="background:"#fff""

4.bugs

1.搜索框用的是双向数据绑定data加键盘enter监听,表格详情是通过遍历data显示
这样会发现enter一旦执行修改data,原始的data就会遗失
搜索框不进行键盘enter监听
表格详情遍历search函数返回的数据
2.添加点击事件由于表单元素button和a标签有默认的点击事件,所以添加的点击事件无法正确执行
给@click添加.prevent修饰符
3.没有通过script.src引入Vue文件
4.在全局函数内部通过this.data获取VM数据是错误的
在数组.filter(回调函数(当前对象))的回调函数中使用this.dataName获取数据,这里filter是window的方法,要在函数外部通过var self=this,保留Vue的数据属性,再在函数内部通过self.dataName调用

5.重点

Vue是数据驱动界面,数据发生改变,页面上的数据就会重新渲染

一.页面结构

1.提交表单元素
2.表格

image.png

image.png

二.页面样式

1.整体文字居中
2.细线表格
3.表格居中

image.png

三.页面数据

1.学院信息表
2.添加学员信息
3.搜索框信息

image.png

四.页面方法

1.添加学员方法
2.删除学员方法
3.搜索方法

五.全局日期过滤器

image.png

image.png