vue3学习日记3 - 组合式API练习小案例

embedded/2025/1/15 16:09:49/

最近发现职场前端用的框架大多为vue，所以最近也跟着黑马程序员vue3的课程进行学习，以下是我的学习记录

视频网址：

Day1-10.组合式API-生命周期函数_哔哩哔哩_bilibili

学习日记：

vue3学习日记1 - 环境搭建-CSDN博客

vue3学习日记2 - 组合式API基础学习-CSDN博客

1、下载git

官网：Git - Downloads (git-scm.com)

下载合适的版本

双击下载好的exe，点击下一步

选择自己的安装路径

直接点击next

创建菜单名称，直接默认，点击next就好

git文件默认编辑器，默认为Vim，可以在下拉框中修改为VsCode、submit等，我直接next下一步

设置新存储库中初始分支名称，我直接默认，点击next

调整path环境，点击next

选择SSH可执行文件，点击next

选择HTTPS后端传输，默认就好，点击next

配置行尾符号转换，默认就好，点击next

配置用于Git Bash的终端模拟器，默认就好，点击next

选择git pull的默认行为，默认就好，点击next

配置凭证管理器

配置额外选项，默认就好，点击install

安装完成

桌面右键有以下图标就代表安装成功

2、下载模板并运行

1、在自己想建立文件的文件夹下，右键，选择“Open Git Bash here”，输入以下命令

git clone http://git.itcast.cn/heimaqianduan/vue3-basic-project.git

运行结果

2、在VsCode打开下载的文件夹，输入“npm install”安装相关依赖

3、查看package.json，确定运行命令

4、输入命令“npm run dev”

5、在浏览器中输入“Vite Appicon-default.png?t=O83Ahttp://localhost:5173/”

3、代码解释

<template><div class="app"><!-- 列表数据 --><el-table :data="[{id: 1,name: 'jack',place: 'none'}]"><!-- label 属性设置列的标题，prop 属性指定列的数据字段 --><el-table-column label="ID" prop="id"></el-table-column><el-table-column label="姓名" prop="name" width="150"></el-table-column><el-table-column label="籍贯" prop="place"></el-table-column><el-table-column label="操作" width="150"><!-- <template #default> 用来插入自定义的内容 --><template #default><el-button type="primary" link>编辑</el-button><el-button type="danger" link>删除</el-button></template></el-table-column></el-table></div><!-- 嵌入了一个 Edit 组件 --><Edit />
</template>

4、查看接口

5、列表渲染功能

<script setup>
import { onMounted, ref } from 'vue'
import Edit from './components/Edit.vue'
// 导入axios
import axios from 'axios'// TODO: 列表渲染
// 1、声明一个响应式对象ref
const list = ref([])
// 2、设置一个getList方法，访问接口，获取数据
const getList = async () => {// 3、访问接口const res = await axios.get('/list')// 4、将获取到的数据赋值给listlist.value = res.data
}
// 5、在挂载时调用方法
onMounted(() => getList())// TODO: 删除功能// TODO: 编辑功能</script><template><div class="app"><!-- 6、修改列表数据--><el-table :data="list"><!-- label 属性设置列的标题，prop 属性指定列的数据字段 --><el-table-column label="ID" prop="id"></el-table-column><el-table-column label="姓名" prop="name" width="150"></el-table-column><el-table-column label="籍贯" prop="place"></el-table-column><el-table-column label="操作" width="150"><!-- <template #default> 用来插入自定义的内容 --><template #default><el-button type="primary" link>编辑</el-button><el-button type="danger" link>删除</el-button></template></el-table-column></el-table></div><!-- 嵌入了一个 Edit 组件 --><Edit />
</template><style scoped>
.app {width: 980px;margin: 100px auto 0;
}
</style>

运行结果：

6、删除功能

<script setup>
import { onMounted, ref } from 'vue'
import Edit from './components/Edit.vue'
// 导入axios
import axios from 'axios'// TODO: 列表渲染
// 1、声明一个响应式对象ref
const list = ref([])
// 2、设置一个getList方法，访问接口，获取数据
const getList = async () => {// 3、访问接口const res = await axios.get('/list')// 4、将获取到的数据赋值给listlist.value = res.data
}
// 5、在挂载时调用方法
onMounted(() => getList())// TODO: 删除功能
// 思路：获取id - 根据id访问后台接口删除数据 - 访问查询数据，更新页面
const onDel = async (id) => {// 调用接口，删除数据await axios.delete(`/del/${id}`)// 更新数据getList()
}// TODO: 编辑功能</script><template><div class="app"><!-- 6、修改列表数据--><el-table :data="list"><!-- label 属性设置列的标题，prop 属性指定列的数据字段 --><el-table-column label="ID" prop="id"></el-table-column><el-table-column label="姓名" prop="name" width="150"></el-table-column><el-table-column label="籍贯" prop="place"></el-table-column><el-table-column label="操作" width="150"><!-- <template #default> 用来插入自定义的内容 --><!-- { row } 是通过插槽传递数据的解构语法 --><template #default = "{ row }"><el-button type="primary" link>编辑</el-button><el-button type="danger" link @click="onDel(row.id)">删除</el-button></template></el-table-column></el-table></div><!-- 嵌入了一个 Edit 组件 --><Edit />
</template><style scoped>
.app {width: 980px;margin: 100px auto 0;
}
</style>

7、编辑功能

思路：
1、父组件打开弹窗弹窗开关由子组件中const dialogVisible = ref(false)控制，父组件要修改子组件内容，需要在子组件中设一个方法open打开开关，然后暴漏给父组件，可以用模板模型ref
2、父组件将内容传给子组件，在子组件中渲染父组件调用子组件open方法时，传递本行参数，并在子组件定义一个响应式对象，将父组件传过来的数据赋值给响应属性，在子组件中用v-model绑定数据
3、修改后点击确认按钮子组件调用接口更新数据，关闭弹窗，父组件更新数据（涉及到子传父通信）

App.vue

<script setup>
import {  onMounted, ref, provide } from 'vue'
import Edit from './components/Edit.vue'
// 导入axios
import axios from 'axios'// TODO: 列表渲染
// 1、声明一个响应式对象ref
const list = ref([])
// 2、设置一个getList方法，访问接口，获取数据
const getList = async () => {// 3、访问接口const res = await axios.get('/list')// 4、将获取到的数据赋值给listlist.value = res.data
}
// 5、在挂载时调用方法
onMounted(() => getList())// TODO: 删除功能
const onDel = async (id) => {// 调用接口，删除数据await axios.delete(`/del/${id}`)// 更新数据getList()
}// TODO: 编辑功能
// 思路：用模板引用获取组件实例对象
const editRef = ref(null)
const open = (row) => {editRef.value.isOpen(row)
}</script><template><div class="app"><!-- 6、修改列表数据--><el-table :data="list"><!-- label 属性设置列的标题，prop 属性指定列的数据字段 --><el-table-column label="ID" prop="id"></el-table-column><el-table-column label="姓名" prop="name" width="150"></el-table-column><el-table-column label="籍贯" prop="place"></el-table-column><el-table-column label="操作" width="150"><!-- <template #default> 用来插入自定义的内容 --><!-- { row } 是通过插槽传递数据的解构语法 --><template #default = "{ row }"><el-button type="primary" link @click="open(row)">编辑</el-button><el-button type="danger" link @click="onDel(row.id)">删除</el-button></template></el-table-column></el-table></div><!-- 嵌入了一个 Edit 组件 --><Edit ref="editRef" @get-list = getList />
</template><style scoped>
.app {width: 980px;margin: 100px auto 0;
}
</style>

Edit.vue

<script setup>
// TODO: 编辑
import axios from 'axios'
import { inject, ref } from 'vue'
// 弹框开关
const dialogVisible = ref(false)// 设置响应式对象
const param = ref({name: '',place: '',id:''
})// 打开开关
const isOpen = (row) => {dialogVisible.value = trueconsole.log(row);param.value.name = row.nameparam.value.place = row.placeparam.value.id = row.id
}// 将open方法暴露给父组件
defineExpose({isOpen
})const emit = defineEmits(['get-list'])// 点击确认，访问接口，修改数据，关闭弹窗，父组件更新数据
const sub = async () => {await axios.patch(`/edit/${param.value.id}`, {name: param.value.name,place: param.value.place,})dialogVisible.value = falseemit("get-list")
}</script><template><el-dialog v-model="dialogVisible" title="编辑" width="400px"><el-form label-width="50px"><el-form-item label="姓名"><el-input placeholder="请输入姓名" v-model="param.name" /></el-form-item><el-form-item label="籍贯"><el-input placeholder="请输入籍贯" v-model="param.place" /></el-form-item></el-form><template #footer><span class="dialog-footer"><el-button @click="dialogVisible = false">取消</el-button><el-button type="primary" @click="sub">确认</el-button></span></template></el-dialog>
</template><style scoped>
.el-input {width: 290px;
}
</style>

运行结果：


http://www.ppmy.cn/embedded/153843.html

相关文章

Python Selenium库入门使用，图文详细。附网页爬虫、web自动化操作等实战操作。

Python Selenium库入门使用，图文详细。附网页爬虫、web自动化操作等实战操作。

文章目录 前言1 创建conda环境安装Selenium库2 浏览器驱动下载&#xff08;以Chrome和Edge为例&#xff09;3 基础使用&#xff08;以Chrome为例演示&#xff09;3.1 与浏览器相关的操作3.1.1 打开/关闭浏览器3.1.2 访问指定域名的网页3.1.3 控制浏览器的窗口大小3.1.4 前进/后…
阅读更多...
机器学习头歌（第二部分）

机器学习头歌（第二部分）

一、朴素贝叶斯简述 任务描述 本关任务&#xff1a;了解朴素贝叶斯的基本概念&#xff0c;完成右侧窗口内的单项选择题。 相关知识 概率的解释 现在我们站在两个统计学派的角度来深入理解什么是概率。 经典统计学认为概率表述的是一件事发生的频率&#xff0c;概率定义为频率…
阅读更多...
持续集成 02|Jenkins介绍与安装、Postman集成Jenkins、代码集成Jenkins

持续集成 02|Jenkins介绍与安装、Postman集成Jenkins、代码集成Jenkins

目录 一、Jenkins介绍与安装 1、Jenkins的安装和启动 2、插件安装介绍 3、系统设置 二、Postman集成Jenkins 1、准备工作&#xff1a;测试newman命令无误 2、使用Jenkins管理-手动构建 3、使用Jenkins管理-自动构建 三、代码集成Jenkins 1、准备工作 2、使用Jenkin…
阅读更多...
AT32 bootloader程序与上位机程序

AT32 bootloader程序与上位机程序

从8051到stm32, 从串口下载到JLINK调试&#xff0c;从keil到arm-none-eabi-gcc,从"Hello wrold"到通信协议&#xff0c;一路起来已学会很多&#xff0c;是时候写一下bootloader了。 基本原理 单片机代码编译完后可以生成".hex"和".bin"文件&…
阅读更多...
浅谈云计算09 | 服务器虚拟化

浅谈云计算09 | 服务器虚拟化

服务器虚拟化基础 一、虚拟化的定义二、系统虚拟化三、服务器虚拟化的核心要义四、典型实现&#xff1a;探索不同路径五、全虚拟化与半虚拟化六、主流服务器虚拟化技术 一、虚拟化的定义 虚拟化是一种将物理资源抽象为逻辑资源的技术&#xff0c;通过在物理硬件与操作系统、应…
阅读更多...
升级 Spring Boot 3 全项目讲解 — 给项目增加聊天对话功能

升级 Spring Boot 3 全项目讲解 — 给项目增加聊天对话功能

学会这款 &#x1f525;全新设计的 Java 脚手架 &#xff0c;从此面试不再怕&#xff01; 1. Spring Boot 3 升级指南 在升级 Spring Boot 3 之前&#xff0c;确保你的项目已经迁移到 Java 17&#xff0c;因为 Spring Boot 3 不再支持 Java 8 和 Java 11。接下来&#xff0c;我…
阅读更多...
RK3399开发板Linux实时性改造

RK3399开发板Linux实时性改造

本次测试基于NanoPC-T4开发板&#xff08;国产化处理器RK3399&#xff09;&#xff0c;4.19.111内核Xenomai实时性改造测试。 Xenomai下载网站&#xff1a;https://xenomai.org/downloads/ NanoPC-T4网站&#xff1a;https://wiki.friendlyarm.com/wiki/index.php/NanoPC-T4/z…
阅读更多...
利用 Java 爬虫从 yiwugo 根据 ID 获取商品详情

利用 Java 爬虫从 yiwugo 根据 ID 获取商品详情

在当今数字化时代&#xff0c;数据是商业决策的关键。对于从事国际贸易的商家来说&#xff0c;精准获取商品的详细信息至关重要。yiwugo 是一个知名的国际贸易平台&#xff0c;拥有海量的商品数据。通过 Java 爬虫技术&#xff0c;我们可以高效地从 yiwugo 根据商品 ID 获取详细…
阅读更多...
最新文章

Copyright @ 2022~2023