Vuetify（数据表格的CRUD）

1. Vue的特点

特点1：变量驱动页面显示

变量的值改变，页面显示也立即跟着改变。

特点2：模板和代码

带尖括号的都是模板。模板有模板的语言，代码有代码的语言。

2. Vuetify的特点

vuetify是建立在vue的基础上的一套界面框架。

3. 网页编程的框架结构

前端-通讯协议-数据库

名词：MVC
页面V-数据M-把数据和页面连在一起的通讯协议C。

Ｍ：数据模型；model
V：页面；view
C：control；

分层次的思考方式不会混乱。

4. 本课作业

• 自学Vuetify的对话框（Dialog）组件
• 把CRUD数据表格中的数据，换为学生（students）的数据。

5. 资源

点击这里下载本课的示范代码。

本课用到的网页资料：

• 菜鸟教程：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/

6. VueJS和VuetifyJS的代码库

如果你无法连接到原装代码库，可以使用开源江湖上的代码库：

原装字体代码库：

<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">

可以把这一行替换为：

<link href="https://fonts.cat.net/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">

原装CSS代码库：

<link href="https://cdn.jsdelivr.net/npm/@mdi/font@6.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">

可以把这两行替换为：

<link href="https://dl.openjianghu.org/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://dl.openjianghu.org/css/vuetify.min.css" rel="stylesheet">

原装JS代码库：

<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>

可以把这两行替换为：

<script src="https://dl.openjianghu.org/js/vue.js"></script>
<script src="https://dl.openjianghu.org/js/vuetify.js"></script>

7. CRUD基础模板下载

点击这里下载基础模板zip文件。其中包括：

VuetifyJS基础模板

• https://dl.openjianghu.org/training/vuetify_cdn.html

原装VuetifyJS的数据表格CRUD模板

• https://dl.openjianghu.org/training/vuetify_datatable_crud.html

VuetifyJS的数据表格CRUD模板 - 易读版

• https://dl.openjianghu.org/training/easy_reading_datatable_crud.html

VuetifyJS的数据表格CRUD模板 - 易读版2

• https://dl.openjianghu.org/training/easy_reading_datatable_crud2.html