JianghuJS
Search
⌘
K
江湖生态
JianghuJS框架
Jianghu财务
Jianghu进销存
Jianghu智慧校园
Jianghu人资
Jianghu在线教学
Jianghu知识付费
Jianghu内容管理
Jianghu面板
Jianghu网站流量分析
Jianghu客服
江湖培训
江湖脚手架
江湖应用
关于我们
Visitor
Login
江湖生态
JianghuJS框架
Jianghu财务
Jianghu进销存
Jianghu智慧校园
Jianghu人资
Jianghu在线教学
Jianghu知识付费
Jianghu内容管理
Jianghu面板
Jianghu网站流量分析
Jianghu客服
江湖培训
江湖脚手架
江湖应用
关于我们
Login
Change Password
Old Password
New Password
New Password Again
Search
Cancel
Menu
On this page
000-首页
系列目录
203-中级-数据管理
01
课-数据仓库
02
课-数据仓库-同步机制
03
课-数据对比工具之diff
04
课-数据库性能提升
05
课-数据库备份之Xtrabackup
06
课-数据迁移
07
课-数据库上线&迭代上线
202-中级-应用开发
01
课-JianghuJS项目结构
02
课-页面UI库-Vuetify
03
课-深入了解Vuetify数据表格各组件
04
课-Vuetify表格CRUD操作简化 - 函数
05
课-Vuetify表格CRUD操作简化-模板
06
课-为数据表格配置页面和接口协议(2)
07
课-在数据库里配置通信协议
08
课-从无到有逐步搭建前端和后端的增删改查操作
09
课-复杂页面开发
10
课-案例:制作点菜页面
11
课-JianghuJS代码规范
12
课-Debug-问题排查
13
课-错误处理
14
课-常用第三方库
15
课-使用Git管理代码
16
课-多应用开发之enterprise
17
课-国际化i18n
18
课-页面二次认证
19
课-复习:将数据表格与数据库连起来
20
课-复习:搭建简单的数据表格
204-中级-系统运维
01
课-江湖面板常用功能详解
02
课-江湖面板常用脚本工具详解
03
课-Linux常用命令讲解
04
课-Docker项目部署实战
05
课-ElasticSearch部署
06
课-Npm镜像服务部署
07
课-Gitea部署
08
课-Seatale部署
09
课-Seafile部署
201-中级-软件工程
01
课-为什么选择江湖JS?
02
课-如何有效地测试软件
03
课-促成发布的成功
04
课-软件部署步骤
05
课-软件发布后要做什么
Vuetify表格CRUD操作简化 - 函数
Vuetify数据表格CRUD操作:简化函数的写法
数据表格CRUD的函数部分可以被进一步简化。
简化的原则:
按照功能,不同的模板分开写,不同的函数也分开写,不要混在一起。
变量的名字、函数的名字,要有意义,不要起没有意义的名字,不然不好懂。
页面点击的操作,都调用同一个函数,将点击操作的类型传入作为参数,这样所有的操作函数都会被放在一起,功能和结构就会清楚了。
作业:
读简化版数据表格CRUD的代码,强化前面提到的这些概念。
理解新增、修改和删除操作都调用了哪些函数,分别完成了哪些功能。
点击这里下载简化版数据表格CRUD的代码
。
参考资料
菜鸟教程:VueJS
教程:
https://www.runoob.com/vue2/vue-tutorial.html
Vuetify:
安装 - CDN:
https://vuetifyjs.com/zh-Hans/getting-started/installation/#cdn-768475286cd5
数据表格 - 基本:
https://vuetifyjs.com/zh-Hans/components/data-tables/
数据表格 - CRUD操作:
https://vuetifyjs.com/zh-Hans/components/data-tables/#crud-64cd4f5c
对话框:
https://vuetifyjs.com/zh-Hans/components/dialogs/
## Vuetify数据表格CRUD操作:简化函数的写法 数据表格CRUD的函数部分可以被进一步简化。 简化的原则: - 按照功能,不同的模板分开写,不同的函数也分开写,不要混在一起。 - 变量的名字、函数的名字,要有意义,不要起没有意义的名字,不然不好懂。 - 页面点击的操作,都调用同一个函数,将点击操作的类型传入作为参数,这样所有的操作函数都会被放在一起,功能和结构就会清楚了。 ## 作业: - 读简化版数据表格CRUD的代码,强化前面提到的这些概念。 - 理解新增、修改和删除操作都调用了哪些函数,分别完成了哪些功能。 [点击这里下载简化版数据表格CRUD的代码](https://dl.openjianghu.org/training/download-code-it-training-level02-lesson02-2022-06-09.zip "点击这里下载简化版数据表格CRUD的代码")。 ## 参考资料 - 菜鸟教程:VueJS - 教程:https://www.runoob.com/vue2/vue-tutorial.html - Vuetify: - 安装 - CDN:https://vuetifyjs.com/zh-Hans/getting-started/installation/#cdn-768475286cd5 - 数据表格 - 基本:https://vuetifyjs.com/zh-Hans/components/data-tables/ - 数据表格 - CRUD操作:https://vuetifyjs.com/zh-Hans/components/data-tables/#crud-64cd4f5c - 对话框:https://vuetifyjs.com/zh-Hans/components/dialogs/