文章目录
- 1 App.vue的数据表格
-
- 1.1 template部分
-
- 1.1.1 div标签
- 1.1.2 h1标签
- 1.1.3 el-button标签
- 1.1.4 el-table标签
- 1.1.5 el-table-column标签
- 1.1.6 表格中放置按钮
- 1.2 script部分
-
- 1.2.1 加载库和函数
- 1.2.2 创建响应式数组
- 1.2.3 创建getBooks函数
- 1.2.4 onMounted函数
- 1.2.5 创建handleDelete函数
- 2 App.vue的添加图书弹框
-
- 2.1 template部分
-
- 2.1.1 el-dialog标签
- 2.1.2 el-form标签
- 2.1.3 el-form-item标签
- 2.1.4 el-input标签
- 2.1.5 el-button标签
- 2.2 script部分
-
- 2.2.1 创建响应式变量(ref)
- 2.2.2 创建响应式变量(reactive)
- 2.2.3 创建submitForm函数
- 2.2.4 创建resetForm函数
- 2.2.5 创建handleClose函数
- 3 App.vue编辑图书弹框
-
- 3.1 template部分
- 3.2 script部分
- 4 关键代码
-
- 4.1 v-model和:model
- 4.2 ref和reactive
- 5 flask服务
1 App.vue的数据表格
一个Vue文件通常由以下三部分组成，分别对应 template、script和style 标签：
(1)template：定义组件的HTML结构，描述用户界面的呈现方式。这部分使用的是类HTML的语法，可以嵌套各种标签，并结合Vue的指令(如v-if、v-for、@click等)实现动态交互。
(2)script：定义组件的逻辑部分，包含数据、方法、生命周期钩子等。这部分使用 JavaScript 或 TypeScript 编写，负责处理业务逻辑、数据绑定和事件响应。
(3)style：定义组件的样式，用于控制组件的外观。可以通过 scoped 属性限制样式仅作用于当前组件，避免全局污染。
1.1 template部分
这段代码实现了一个简单的图书管理系统前端界面，功能包括：
(1)显示图书管理系统的标题。
(2)提供“添加图书”按钮，点击后显示添加对话框。
