【Vue3】知识汇总，附详细定义和源码详解，后续出微信小程序项目（5）

====================
快速跳转：
我的个人博客主页👉：Reuuse博客
新开专栏👉：Vue3专栏
参考文献👉：uniapp官网
免费图标👉：阿里巴巴矢量图标库
❀ 感谢支持！☀
==================

前情提要

🔺因为最近学习的vue语言，发现有很多细节的碎块需要汇总，所以就有了本次系列的开始。❀❀❀
⭐总结的知识会包含总结定义，和源代码解析，可以当作类似于英语单词一样瞄几眼，大概知道即可
那么话不多说我们开始吧在这里插入图片描述

vue

  • 前情提要
  • uni.request发起网络请求3种回调结果调用
      • 详细说明：
  • 异步和同步有什么区别?
  • CSS选择前前面.区别
      • 带 `.` 的选择器
      • 不带 `.` 的选择器
      • 更详细的区别
      • 示例
      • 结果解读
      • 总结
  • emit的声明触发事件
  • onShow和onHide钩子的对比和执行顺序
    • onlode 、onshow和onready有什么区别？

uni.request发起网络请求3种回调结果调用

在使用 uni.request 发起网络请求时，你可以处理三种回调结果：成功、失败和完成。以下是如何实现这三种回调的示例代码：

uni.request({url: 'https://example.com/api', // 替换为你的API地址method: 'GET', // 或者 'POST'，根据需要选择data: {// 发送的数据key1: 'value1',key2: 'value2'},success: function (res) {// 请求成功的回调函数console.log('请求成功:', res);// 在这里处理成功的逻辑},fail: function (err) {// 请求失败的回调函数console.error('请求失败:', err);// 在这里处理失败的逻辑},complete: function () {// 请求完成的回调函数（无论成功或失败都会执行）console.log('请求完成');// 在这里处理完成的逻辑}
});

详细说明：

  1. success: 当请求成功时调用此回调函数。res 参数包含服务器返回的数据。
  2. fail: 当请求失败时调用此回调函数。err 参数包含错误信息。
  3. complete: 无论请求成功还是失败，都会调用此回调函数。通常用于清理操作或更新UI状态。

通过这种方式，你可以分别处理请求成功、失败和完成的情况，确保应用在不同情况下都能做出适当的响应。

异步和同步有什么区别?

它俩的区别嘛，主要是执行方式和应用场景啦！同步API呢，就像排队买票，得一个一个来，前面的搞定了后面的才能动。异步API就不一样啦，它像是同时开好几个窗口，大家可以一起买，不用等前面的人哦。这样，程序运行起来就更高效啦！

  • 异步同步化
    是指通过某种方式将异步操作的结果以同步的方式返回。例如，在一个Web应用中，服务器需要从数据库获取数据然后返回给客户端。如果使用同步调用，服务器会等待数据库操作完成后再继续执行后续代码。但如果使用异步操作，服务器可以在等待数据库响应的同时处理其他任务。当数据库操作完成时，通过回调函数或通知机制将结果返回给服务器，这样即使操作是异步的，最终的效果却像是同步的。

CSS选择前前面.区别

在 CSS 中，选择器前面加上 . 和不加上 . 有本质上的区别，因为它们选择完全不同的元素类型。

带 . 的选择器

  • 意义：选择器前面加 . 表示这是一个类选择器（class selector），用于选中具有特定类属性的元素。

  • 用法：类选择器前加上 .，其后的名称是元素的 class 属性值。

  • 示例：

    .input {/* 这里的样式将应用于 class="input" 的所有元素上 */color: red;
}

    <input class="input" type="text" />
<div class="input">这是一个 div 元素，但有 class 属性值为 "input"</div>

    在这个例子中，任何有 class="input" 的元素都会应用到 .input 类定义的样式。

不带 . 的选择器

  • 意义：不带 . 的选择器是标签选择器（element selector），用于选择所有特定类型的 HTML 元素。

  • 用法：直接使用标签名称来作为选择器。

  • 示例：

    input {/* 这里的样式将应用于所有 <input> 元素上 */color: blue;
}

    <input type="text" />
<input type="password" />

    在这个例子中，页面上的所有 <input> 元素都会应用到 input 标签定义的样式。

更详细的区别

  1. 选择器类型：

    • 类选择器（带 .）：用于选中特定的 class 属性值的元素，可以选择多个不同类型的元素。
    • 标签选择器（不带 .）：用于选中特定类型的 HTML 标签元素（如 div, span, input 等），会应用于所有这种标签的元素。

  2. 使用场景：

    • 类选择器：常用于需要重复使用的样式定义。例如，为了一致性地设置多个不同标签的样式。
    • 标签选择器：常用于为某一类型的 HTML 标签设置全局样式。

示例

为了帮助理解，这里有一个包括两种选择器的完整示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSS Selector Example</title><style>/* 类选择器 */.input {color: red; /* 设置字体颜色为红色 */border: 2px solid red; /* 设置红色边框 */}/* 标签选择器 */input {background-color: lightyellow; /* 设置背景颜色为浅黄色 */padding: 10px; /* 设置内边距 */}</style>
</head>
<body><input type="text" class="input" value="这是一个带有类属性的输入框"><input type="password" value="这是一个普通的输入框"><div class="input">这是一个有类属性的 div 元素</div><p class="input">这是一个有类属性的 p 元素</p>
</body>
</html>

结果解读

  • 类选择器 .input：

    • 红色字体、红色边框将应用于所有 class="input" 的元素上，包括 input、div、p 等标签。

  • 标签选择器 input：

    • 浅黄色背景和内边距将应用于所有 input 标签上，包括有和没有 class="input" 属性的 input 元素。

总结

  • 类选择器（.input）：用来选中具有特定类属性的所有元素。
  • 标签选择器（input）：用来选中所有特定类型的 HTML 标签。

emit的声明触发事件

emit就是用来触发自定义事件的。子组件通过$emit方法触发事件，父组件用v-on（缩写为@）来监听这些事件。这样，父子组件之间就能通信啦！

========= xxx-child ========<template><view>子组件<view>1.$为关键字  -（自定义事件名称，传值） = 自定义一个add事件发送123</view><view class="one">当点击按钮的时候，组件就会向demo3发送事件带有随机值</view><!-- <button @click="$emit('add',Math.random())">按钮</button> --><!-- 在这里，子组件的信息就可以传给父，发送了一个事件传给父 --><button @click="onClick">按钮</button><view>==========================</view><input type="text" @input="onInput"/></view>
</template><script setup>
const emit = defineEmits(["add","change"])
function onClick(){emit("add",Math.random())
}
function onInput(e){console.log(e.detail.value);emit("change",e.detail.value);// 事件change传值
}</script><style lang="scss" scoped>
.one{background: pink;
}
input{border:1px solid #cfcfcf;height:40px;
}
</style>==========   demo 3 ============<template><view class=""><!-- @add在这里使用click没有任何区别 --><xxm-child @add="onAdd" @change="onChange"></xxm-child><view class="box" :style="{background:color,fontSize:size+'px'}">num:{{num}}</view></view>
</template><script setup>
import {ref} from "vue"
const num = ref(0);
const color = ref('#ccc');
const size = ref(12);
const onAdd = function(e){console.log(e);// 这里就可以接受传过来的 123num.value = e;color.value = "#" + String(e).substring(3,6);
}
const onChange = function(e){console.log(e); size.value = e;
}
</script><style lang="scss" scoped> 
.box{width: 200px;height: 200px;}
</style>

onShow和onHide钩子的对比和执行顺序

onShow和onHide是React组件生命周期中的钩子函数，它们分别在组件即将显示和隐藏时执行。

  1. onShow：当组件即将显示时调用，通常用于在组件显示前进行一些初始化操作，如加载数据、设置状态等。
  2. onHide：当组件即将隐藏时调用，通常用于在组件隐藏前进行一些清理操作，如释放资源、保存数据等。

执行顺序：

  • 当组件从隐藏状态变为显示状态时，先执行onShow钩子函数，然后执行组件的渲染。
  • 当组件从显示状态变为隐藏状态时，先执行组件的卸载，然后执行onHide钩子函数。
========== demo6=============
<template><view class="">name: {{name}} - {{age}}<scroll-view scroll-y="true" ref="scroll" ><view></view></scroll-view><navigator url="/pages/demo5/demo5">跳转到demo5</navigator><view>==============</view><view>计数：{{counts}}</view></view>
</template><script setup>
import {onBeforeMount, onMounted,ref} from "vue"
import {onLoad,onReady,onShow,onHide} from "@dcloudio/uni-app"
const name = ref("张三")
const age = ref("18")
const scroll = ref(null)
const counts = ref(0)let time= setInterval(()=>{counts.value++
},50)onLoad((e)=>{// onload 有一个回调函数console.log("onload函数")console.log(e)name.value = e.nameage.value = e.age
})onShow(()=>{// 先执行onlode 再执行onshow//无论是跳转页面还是返回页面,都会触发onShowconsole.log("onShow函数");time= setInterval(()=>{counts.value++},50)
})onHide(()=>{console.log("onHide函数");clearInterval(time)//切走页面会停下来
})onReady(()=>{console.log("onReady函数");// 监听页面初次渲染完成，此时组件已挂载完成，// DOM 树($el)已可用，注意如果渲染速度快，// 会在页面进入动画完成前触发
})onBeforeMount(()=>{console.log("onBeforeMount函数")
})onMounted(()=>{console.log("onMounted函数")
})
</script><style lang="scss" scoped> 
</style>===================================

onlode 、onshow和onready有什么区别？

它们在触发时机、执行次数和用途上有所不同。以下是具体分析：

  1. 触发时机

    • onLoad：页面加载时触发，即当页面被创建并准备加载时。
    • onShow：页面显示或切入前台时触发。
    • onReady：页面初次渲染完成时触发。

  2. 执行次数

    • onLoad：只触发一次，即首次打开页面时调用，之后页面再次打开（如通过页面跳转返回）则不会再次触发。
    • onShow：每次打开页面（包括首次打开和从其他页面返回）都会调用。
    • onReady：每个页面在其生命周期内只会调用一次。

  3. 用途

    • onLoad：通常用于页面的数据初始化，如从服务器获取数据、设置页面的初始状态等。
    • onShow：常用于页面显示时的数据更新、页面刷新、用户信息获取、数据统计和埋点等。
    • onReady：用于在页面初次渲染完成后执行某些操作，如操作DOM、设置定时器、调用API等。

综上所述，onLoad适合用于数据初始化和页面状态设置等需要在页面加载时完成的操作；onShow适合用于页面显示时的数据更新、页面刷新、用户信息获取等需要在页面每次显示时进行的操作；而onReady确保了在页面初次渲染完成后执行代码，但需要注意异步数据可能还未加载完成。

🌼那么今天就到这里吧！
▲这次的知识汇总框架只是一次尝试，后续会陆续跟新vue系列。再后来会逐渐成熟，向大家展现更简洁明了的知识汇总！

一个小小的赞是对我最大的鼓励！
感谢你们看到这里，下次见~
在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.xdnf.cn/news/14966.html

如若内容造成侵权/违法违规/事实不符，请联系一条长河网进行投诉反馈，一经查实，立即删除！

相关文章

5ire：开源AI工具的新纪元

5ire：开源AI工具的新纪元

抖知书老师推荐&#xff1a; 在AI技术飞速发展的今天&#xff0c;5ire作为一款开源的AI工具&#xff0c;已经悄然改变了我们对传统AI工具的认知。那些曾对AI技术抱有疑虑的人们&#xff0c;现在可以更加自信地拥抱这一变革。原本担心工作会被AI取代的忧虑逐渐平息&#xff0c;…
阅读更多...
Unity图形学之Shader2.0矩阵变换

Unity图形学之Shader2.0矩阵变换

1.将物体坐标系 变换 到世界坐标系&#xff1a; Unity3D里面矩阵是左乘的 P(世界) M(物体到世界的变换矩阵) * P(物体) 规律&#xff1a;3D变换 首先将物体坐标系变换到世界 2.将 世界坐标 变换 到相机坐标 P(相机) M(世界到相机的变换矩阵) * P(世界) using System.Col…
阅读更多...
网上商城系统设计与Spring Boot框架

网上商城系统设计与Spring Boot框架

3 系统分析 当用户确定开发一款程序时&#xff0c;是需要遵循下面的顺序进行工作&#xff0c;概括为&#xff1a;系统分析–>系统设计–>系统开发–>系统测试&#xff0c;无论这个过程是否有变更或者迭代&#xff0c;都是按照这样的顺序开展工作的。系统分析就是分析系…
阅读更多...
JavaWeb-JSP

JavaWeb-JSP

可以写java代码也前端代码 jsp本来就是Serclet jsp脚本 EL表达式 要将jsp获取的东西放到域中 转发到/el-demo.jsp中 jsp中用&#xffe5;{}获取域中的信息 JSTL标签 c&#xff1a;if标签 jsp中 c:forEach标签 MVC 查询所有 在service层实现 Servlet代码&#xff1a;1.创建Br…
阅读更多...
Area-Composition模型部署指南

Area-Composition模型部署指南

一、介绍 本模型可以通过输入不同的提示词&#xff0c;然后根据各部分提示词进行融合生成图片。如下图&#xff1a; 此图像包含 4 个不同的区域&#xff1a;夜晚、傍晚、白天、早晨 二、部署 环境要求&#xff1a; 最低显存&#xff1a;10G 1. 部署ComfyUI 本篇的模型部署…
阅读更多...
经典文献阅读之--DROID-SLAM(完美的深度学习slam框架)

经典文献阅读之--DROID-SLAM(完美的深度学习slam框架)

0. 简介 深度学习和SLAM现在结合越来越紧密了&#xff0c;但是实际上很多时候深度学习只会作为一个block放在slam系统中。而很多深度学习slam算法&#xff0c;在slam这边的性能都不是太好&#xff0c;尤其是回环和全局优化这块。因为有一些深度学习的工作就不太适合做回环检测…
阅读更多...
【windows 下使用 tree】

【windows 下使用 tree】

windows git bash 下使用 tree 下载tree二进制文件 https://gnuwin32.sourceforge.net/packages/tree.htm 解压缩找到 tree.exe 扔进git bash的命令目录 C:\Program Files\Git\usr\bin 打开测试
阅读更多...
GxtWaitCursor：Qt下基于RAII的鼠标等待光标类

GxtWaitCursor：Qt下基于RAII的鼠标等待光标类

有时我们需要以阻塞的方式执行一点耗时的操作&#xff0c;这时需要主窗口光标呈现忙状态&#xff0c;GxtWaitCursor正是为此设计&#xff1b;重载的构造函数&#xff0c;可以让光标呈现忙状态一定时间后自动恢复。 GxtWaitCursor.h #pragma once#include <QObject>// // …
阅读更多...
通过Python，Tkinter，文本文件，Openpyxl。实现【图书馆管理系统实现技术】

通过Python，Tkinter，文本文件，Openpyxl。实现【图书馆管理系统实现技术】

图书馆管理系统 目录 项目概述类定义 -Book类 -Library类书籍管理功能 -添加书籍 -查找书籍 -借阅书籍 -归还书籍 -列出所有书籍数据持久化 -保存书籍 -加载书籍操作日志记录图形用户界面（GUI） -界面设计 -功能实现代码原理总结实现界面 ![](https://i-blog.csdnimg.cn/dire…
阅读更多...
飞牛私有云访问外网

飞牛私有云访问外网

飞牛私有云 fnOS NAS 是一款有着卓越的性能以及强大的兼容性和智能化的管理界面&#xff0c;它之所以能在 NAS 市场中脱颖而出&#xff0c;是因为 fnOS 基于最新的 Linux 内核&#xff08;Debian发行版&#xff09;深度开发&#xff0c;不仅兼容主流 x86 硬件&#xff0c;还支持…
阅读更多...
HTML之表单学习记录

HTML之表单学习记录

如果一个页面仅仅供用户浏览&#xff0c;那就是静态页面。如果这个页面还能实现与服务器进行数据交互&#xff08;像注册登录、话费充值、评论交流&#xff09;​&#xff0c;那就是动态页面。表单是我们接触动态页面的第一步。其中表单最重要的作用就是&#xff1a;在浏览器端…
阅读更多...
redis 原理篇 30 redis内存回收 过期key处理

redis 原理篇 30 redis内存回收 过期key处理

三十分&#xff0c;又是一个长视频&#xff0c;挺好&#xff0c;但是从标题来看&#xff0c;内容应该很简单&#xff0c;或者说&#xff0c;是他能讲简单的类型&#xff0c;本来还想再搞一篇&#xff0c;但是三十分钟的话&#xff0c;五点五十了&#xff0c;算了&#xff0c;下…
阅读更多...
【STM32F1】——无线收发模块RF200与串口通信

【STM32F1】——无线收发模块RF200与串口通信

【STM32F1】——无线收发模块RF200与串口通信 一、简介 本篇主要对调试无线收发模块RF200的过程进行总结，实现了以下功能。 串口普通收发：使用STM32F103C8T6的USART2串口接收中断，实现两个无线收发模块RF200间的通信。二、RF200介绍 电压：3.4-5.5V工作频率：418~455MHz发…
阅读更多...
【MySQL从入门到放弃】InnoDB磁盘结构(二)

【MySQL从入门到放弃】InnoDB磁盘结构(二)

前言 前面我们解析了InnoDB磁盘结构中的表空间、数据字典、双写缓冲区。 本文我们继续探究磁盘结构中剩余的几个核心组件：重做日志（redo log）、撤销日志（undo log）、二进制日志（binlog） 一、重做日志 ( redo log ) WAL（Write-Ahead Logging）机制 WAL 的全称是…
阅读更多...
Python 绘图工具详解：使用 Matplotlib、Seaborn 和 Pyecharts 绘制散点图

Python 绘图工具详解：使用 Matplotlib、Seaborn 和 Pyecharts 绘制散点图

目录 数据可视化1.使用 matplotlib 库matplotlib 库 2 .使用 seaborn 库seaborn 库 3 .使用 pyecharts库pyecharts库 注意1. 确保安装了所有必要的库2. 检查Jupyter Notebook的版本3. 使用render()方法保存为HTML文件4. 使用IFrame在Notebook中显示HTML文件5. 检查是否有其他输…
阅读更多...
用vscode编写verilog时，如何有信号定义提示、信号定义跳转（go to definition）、模块跳转这些功能

用vscode编写verilog时，如何有信号定义提示、信号定义跳转（go to definition）、模块跳转这些功能

&#xff08;一&#xff09;安装插件SystemVerilog - Language Support 安装一个vscode插件即可&#xff0c;插件叫SystemVerilog - Language Support。虽然说另一个插件“Verilog-HDL/SystemVerilog/Bluespec SystemVerilog”也有信号提示及定义跳转功能&#xff0c;但它只能提…
阅读更多...
LLM RAG系列：一文详解RAG，看完这篇你必会（文末福利）

LLM RAG系列：一文详解RAG，看完这篇你必会（文末福利）

RAG系列 本文介绍了RAG以及RAG pipeline的整个流程&#xff0c;包括请求转换、路由和请求构造、索引和检索、生成和评估等&#xff0c;其中引用了大量有价值的论文。 参考Advanced RAG Series: Generation and Evaluation中的5篇文章&#xff0c;并丰富了相关内容。 请求转换…
阅读更多...
服务器硬件介绍

服务器硬件介绍

计算机介绍 现在的人们几乎无时无刻都在使用电脑&#xff01;而且已经离不开电脑了。像桌上的台式电脑(桌机)、笔记本电脑(笔电)、平板电脑、智能手机等等&#xff0c;这些东西都算是电脑。 台式机电脑介绍 计算机又被称为电脑。台式机电脑主要分为主机和显示器两个部分&…
阅读更多...
docker启动mysql数据库镜像，开启大小写不敏感，开启不区分大小写，挂载数据库日志文件，挂载数据库文件

docker启动mysql数据库镜像，开启大小写不敏感，开启不区分大小写，挂载数据库日志文件，挂载数据库文件

docker启动mysql数据库镜像，开启大小写不敏感，开启不区分大小写，挂载数据库日志文件，挂载数据库文件 查询数据库是否区分大小写 SHOW VARIABLES LIKE lower_case_table_names;查询数据库是否支持大小写lower_case_table_names 被设置为 1，即表名不区分大小写。如果值为 1…
阅读更多...
SpringBoot 打造图片阅后即焚功能

SpringBoot 打造图片阅后即焚功能

阅后即焚”&#xff08;Snapchat-like feature&#xff09;是指一种社交媒体或信息传递功能&#xff0c;用户在阅读某条信息或查看某张图片后&#xff0c;该信息或图片会自动销毁&#xff0c;无法再次查看。这种功能的主要目的是保护用户的隐私和信息安全&#xff0c;防止敏感信…
阅读更多...
最新文章

Copyright @ 2022~2023