前面我们发现Vue中的数据根据数据类型可以调用ES6中的函数方法,所以在这一章,我们会单独开出一个小节讲解新接触到的ES6语法,随着案例的复杂,bugs也逐渐涌现,需要注意的地方一般都是容易出现bugs的地方,所以将注意点和bugs合并,并且添加业务逻辑来帮助从顶端理解思路,这里重点用来概述Vue或相关重要概念
0.业务逻辑
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.表格
二.页面样式
1.整体文字居中
2.细线表格
3.表格居中
三.页面数据
1.学院信息表
2.添加学员信息
3.搜索框信息
四.页面方法
1.添加学员方法
2.删除学员方法
3.搜索方法
五.全局日期过滤器
