VuetifyJS数据表格组件

学习目标

• 深入分析Vuetify的数据表格组件
• 理解数据表格组件中的各个部分
• 套用甜品列表的例子，改写为学生列表或顾客列表

学习资料：

• 甜品列表代码：示例2-Vuetify甜品列表.html
• 学生的数据、顾客的数据（JSON）
• 参考文档：

示范：分析甜品列表的代码

• 定义数据和表头
• 前端：数据表格、数据表单、增删改按钮
• 函数：重置数据、增加新数据、修改数据、删除数据

总结：任何一个增删改查的页面，都是这几个部分，没有太大差别

示范：仿照甜品列表，写出学生列表

• 在数据库里查看学生列表，认识结构
• Navicat导出JSON、把JSON在前端页面显示出来
• 示例3-1-Vuetify学生列表
• 学生列表.json

示范：仿照甜品列表，写出顾客列表

• Navicat导出JSON、把JSON在前端页面显示出来
• 示例3-2-Vuetify顾客列表
• 顾客列表.json

本课小结

• 任何一个增删改查的页面，都是这几个部分，没有太大差别
• 写新的页面就是在旧的页面的基础上修改
• 学习方法：不要被自己看不懂的代码吓住