html学生管理界面,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