【Vue3】知识汇总,附详细定义和源码详解,后续出微信小程序项目(3)

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

前情提要

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


vue

  • 前情提要
  • Vite
  • uni-app交互反馈showToast的用法
  • showLoading加载和showModal模态框
      • 示例代码片段
        • showLoading 实现
        • showModal 实现

Vite

Vite 是一个现代的前端构建工具,它提供了快速的冷启动和即时热模块替换(HMR)。在 Vite 项目中,vite.config.js 文件用于配置项目的各种选项。以下是一个基本的 vite.config.js 示例:

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';export default defineConfig({plugins: [vue()],server: {port: 3000, // 开发服务器端口open: true, // 自动打开浏览器},build: {outDir: 'dist', // 输出目录minify: 'terser', // 压缩器,'terser' 或 'esbuild'sourcemap: false, // 是否生成 source map},resolve: {alias: {'@': '/src', // 路径别名},},
});
  1. 插件:

    • plugins: [vue()]: 使用 Vue 插件来处理 .vue 文件。
  2. 开发服务器:

    • server.port: 设置开发服务器的端口号。
    • server.open: 设置为 true 时,启动后会自动打开浏览器。
  3. 构建配置:

    • build.outDir: 指定构建输出的目录。
    • build.minify: 选择压缩器,可以是 'terser''esbuild'
    • build.sourcemap: 是否生成 source map 文件。
  4. 路径解析:

    • resolve.alias: 配置路径别名,例如将 @ 映射到 /src 目录。

你可以根据项目需求进一步自定义 vite.config.js 文件。例如,添加 CSS 预处理器、配置环境变量等。

但是呢,我个人不太建议使用这个插件,最好还是自己import比较好喔!


uni-app交互反馈showToast的用法

在这里插入图片描述

它有好几种用法呢,比如显示消息提示框、加载动画和模态弹窗。显示消息提示框用uni.showToast,能设置标题、图标、是否防触摸穿透和显示时间。加载动画用uni.showLoading,可以显示一个加载动画,一般用于请求时间比较久的操作,比如文件上传。还有模态弹窗用uni.showModal,可以只有一个确定按钮,也可以同时有确认和取消按钮哦。

  • 操作成功
uni.showToast({title:"操作成功"
})

在这里插入图片描述

  • 操作失败
uni.showToast({title:"失败",icon: "errer"
})

在这里插入图片描述

想这些类似的,以下便是总结:
在这里插入图片描述


showLoading加载和showModal模态框

showLoadingshowModal 模态框,这些通常用于前端开发中的用户界面交互。具体来说:

  1. showLoading

    • 这是一个常见的方法,用于在页面上显示一个加载指示器(loading spinner)。当页面正在处理数据请求或者执行耗时操作时,通常会调用这个方法来告知用户当前正在加载。
    • 例如,在发起 AJAX 请求之前调用 showLoading,在请求完成后调用 hideLoading 隐藏加载指示器。
  2. showModal 模态框

    • 模态框是一种常用的 UI 组件,用于显示重要信息、提示用户输入或进行确认操作。模态框会覆盖在主内容之上,要求用户必须与之交互才能继续其他操作。
    • 模态框可以包含各种内容,如表单、警告信息、成功消息等。

示例代码片段

假设使用的是 JavaScript 和 HTML 来实现这两个功能,以下是一些简单的示例代码:

uni.showLoading({title: '加载中...',mask: true //当进行加载的时候不允许实行后面的任务
});
setTimeout(()=> {uni.hideLoading()
},2000)

在这里插入图片描述

<template><view class="">分类页面<button @click="remove">删除</button></view>
</template><script setup>
function remove(){uni.showModal({title: '是否删除?',		});
}

在这里插入图片描述

showLoading 实现
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Show Loading Example</title><style>#loading {display: none;position: fixed;left: 50%;top: 50%;transform: translate(-50%, -50%);z-index: 9999;}</style>
</head>
<body><div id="loading">Loading...</div><button onclick="showLoading()">Show Loading</button><script>function showLoading() {document.getElementById('loading').style.display = 'block';}function hideLoading() {document.getElementById('loading').style.display = 'none';}</script>
</body>
</html>
showModal 实现
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Show Modal Example</title><style>/* The Modal (background) */.modal {display: none; /* Hidden by default */position: fixed; /* Stay in place */z-index: 1; /* Sit on top */left: 0;top: 0;width: 100%; /* Full width */height: 100%; /* Full height */overflow: auto; /* Enable scroll if needed */background-color: rgba(0,0,0,0.4); /* Black w/ opacity */}/* Modal Content/Box */.modal-content {background-color: #fefefe;margin: 15% auto; /* 15% from the top and centered */padding: 20px;border: 1px solid #888;width: 80%; /* Could be more or less, depending on screen size */}</style>
</head>
<body><button onclick="showModal()">Show Modal</button><div id="myModal" class="modal"><div class="modal-content"><span onclick="hideModal()" style="float:right; cursor:pointer;">&times;</span><p>This is a modal!</p ></div></div><script>function showModal() {document.getElementById("myModal").style.display = "block";}function hideModal() {document.getElementById("myModal").style.display = "none";}</script>
</body>
</html>

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

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

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

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

相关文章

模型减肥秘籍:模型压缩技术 CNN基础

这里是Datawhale的组队学习活动&#xff0c;主要介绍的是模型压缩技术。后续将以CNN网络为基础点&#xff0c;带领大家领略模型压缩的魅力。首先是回顾一下一些关于CNN的基础知识。 参考链接&#xff1a; 模型减肥秘籍&#xff1a;模型压缩技术-课程详情 | Datawhale datawh…

Ollama的安装以及大模型下载教程

简介 Ollama是一个开源的大型语言模型服务工具&#xff0c;它帮助用户快速在本地运行大模型。通过简单的安装指令&#xff0c;用户可以执行一条命令就在本地运行开源大型语言模型&#xff0c; Ollama极大地简化了在Docker容器内部署和管理LLM的过程&#xff0c;使得用户能够快…

Mysql前言

文章目录 Mysql 数据库简介SQL 基础语法什么是 SQL语句SQL 的作用SQL 语句的分类SQL 通用语法查询状态 &#x1f3e1;作者主页&#xff1a;点击&#xff01; &#x1f916;Mysql专栏&#xff1a;点击&#xff01; ⏰️创作时间&#xff1a;2024年11月12日18点20分 SQL是数据库…

Spring Boot编程训练系统:设计与实现要点

5系统详细实现 5.1 管理员模块的实现 5.1.1 用户信息管理 管理员对用户信息修改删除以及查询操作。具体界面的展示如图5.1所示。 图5.1 用户信息管理界面 5.1.2 题库资源管理 系统管理员可以对题库资源信息进行添加&#xff0c;修改&#xff0c;删除以及查询操作。具体界面如…

Xcode 16 使用 pod 命令报错解决方案

原文请点击这个跳转 一、问题现象&#xff1a; 有人会遇到 Xcode 升级到 16 后&#xff0c;新建应用然后使用 pod init 命令会报错如下&#xff1a; Stack Ruby : ruby 3.3.5 (2024-09-03 revision ef084cc8f4) [x86_64-darwin23]RubyGems : 3.5.22Host : macOS 15.0 (24A335…

hive中windows子句的使用

概述 1&#xff0c;windows子句是对窗口的结果做更细粒度的划分 2、windows子句中有两种方式 rows &#xff1a;按照相邻的几行进行开窗 range&#xff1a;按照某个值的范围进行开窗 使用方式 (rows | range) between (UNBOUNDED | [num]) PRECEDING AND ([num] PRECEDING…

Unet++改进24:添加DualConv||轻量级深度神经网络的双卷积核

本文内容:添加DualConv 目录 论文简介 1.步骤一 2.步骤二 3.步骤三 4.步骤四 论文简介 卷积神经网络(CNN)架构通常对内存和计算要求很高,这使得它们在硬件资源有限的嵌入式系统中不可行。 我们提出了双卷积核(DualConv)来构建轻量级深度神经网络。DualConv结合3 3和1…

【Vue3】知识汇总,附详细定义和源码详解,后续出微信小程序项目(4)

快速跳转&#xff1a; 我的个人博客主页&#x1f449;&#xff1a;Reuuse博客 新开专栏&#x1f449;&#xff1a;Vue3专栏 参考文献&#x1f449;&#xff1a;uniapp官网 免费图标&#x1f449;&#xff1a;阿里巴巴矢量图标库 ❀ 感谢支持&#xff01;☀ 前情提要 &#x…

微信小程序_小程序视图与逻辑_day3

一、目标 A. 能够知道如何实现页面之间的导航跳转 B. 能够知道如何实现下拉刷新效果 C. 能够知道如何实现上拉加载更多效果 D. 能够知道小程序中常用的生命周期 二、目录 A. 页面导航 B. 页面事件 C. 生命周期 D. WXS脚本 E. 案例-本地生活&#xff08;列表页面&#xff09;…

springboot社团服务系统的设计与实现,计算机毕业设计项目源码316,计算机毕设程序(LW+开题报告、中期报告、任务书等全套方案)

摘 要 社会发展日新月异&#xff0c;用计算机应用实现数据管理功能已经算是很完善的了&#xff0c;但是随着移动互联网的到来&#xff0c;处理信息不再受制于地理位置的限制&#xff0c;处理信息及时高效&#xff0c;备受人们的喜爱。本次开发一套社团服务系统有管理员&#x…

Linux服务管理-kerberos

Kerberos 官网文档‘&#xff1a;Kerberos&#xff1a;网络身份验证协议 (mit.edu) 基本概念&#xff1a;Kerberos基本概念及原理汇总-腾讯云开发者社区-腾讯云 (tencent.com) kerberos概述 Kerberos是一种计算机网络认证协议&#xff0c;由麻省理工学院&#xff08;MIT&#x…

区块链技术在游戏行业的应用

&#x1f493; 博客主页&#xff1a;瑕疵的CSDN主页 &#x1f4dd; Gitee主页&#xff1a;瑕疵的gitee主页 ⏩ 文章专栏&#xff1a;《热点资讯》 区块链技术在游戏行业的应用 区块链技术在游戏行业的应用 区块链技术在游戏行业的应用 引言 区块链技术概述 定义与原理 发展历程…

MooseFS (MFS) 分布式对象存储

一、MFS 优越特性 Free (GPL): 通用文件系统&#xff0c;开源免费。在线扩容: 体系架构具有极强的可伸缩性&#xff0c;支持在线扩容。部署简单。高可用性: 支持设置任意文件冗余(数据分区)程度&#xff0c;提供比RAID10更高的冗余级别&#xff0c;同时不会影响读写性能&#…

【常见问题解答】远程桌面无法复制粘贴的解决方法

提示:文中提出了“远程桌面无法复制粘贴文件到本地”问题的三种解决方法,其中“方法 3:重启 RDP 剪贴板监视程序”亲测有效。 目录 一、问题描述二、解决方法1.方法1:设置远程桌面连接(1)打开远程桌面连接,点击【显示选项】(2)勾选“剪贴板”,并点击【详细信息】(3)…

探索光耦:达林顿光耦的特点与应用

在现代电子设备中&#xff0c;光耦作为信号隔离和传输的核心元件之一&#xff0c;扮演着至关重要的角色。达林顿光耦凭借其独特的电流放大能力和可靠性&#xff0c;在众多应用中脱颖而出。本文将探讨达林顿光耦的特点及其广泛的应用。 达林顿光耦的主要特点 高电流放大倍数&a…

河南省的一级科技查新机构有哪些?

科技查新&#xff0c;简称查新&#xff0c;是指权威机构对查新项目的新颖性作出文献评价的情报咨询服务。这一服务在科研立项、成果鉴定、项目申报等方面发挥着至关重要的作用。河南省作为中国的重要科技和教育基地&#xff0c;拥有多个一级科技查新机构&#xff0c;为本省及全…

数据结构 ——— 层序遍历链式二叉树

目录 链式二叉树示意图​编辑 何为层序遍历 手搓一个链式二叉树 实现层序遍历链式二叉树 链式二叉树示意图 何为层序遍历 和前中后序遍历不同&#xff0c;前中后序遍历链式二叉树需要利用递归才能遍历 而层序遍历是非递归的形式&#xff0c;如上图&#xff1a;层序遍历的…

【故障解决】麒麟系统右下角网络图标取消显示叹号

原文链接&#xff1a;【故障解决】麒麟系统右下角网络图标取消显示叹号 Hello&#xff0c;大家好啊&#xff01;今天给大家带来一篇关于如何在麒麟系统中解决网络图标出现感叹号问题的文章。在日常使用麒麟系统的过程中&#xff0c;我们在内网或公网环境下&#xff0c;有时会遇…

Spring boot 集成 nacos、redis、mysql

1&#xff0c;准备好nacos环境&#xff0c;准备ncc.yml配置&#xff1a; 在配置添加 test: haha 2&#xff0c;添加依赖 在pom.xml 文件中添加Nacos 客户端的依赖&#xff0c;样例使用Spring Cloud Alibaba 版本使用2023.x 分支&#xff0c;详情可查看 版本发布说明-阿里云S…

力扣 LeetCode 206. 反转链表(Day2:链表)

解题思路&#xff1a; pre &#xff0c;cur双指针 需要通过tmp暂存cur的下一个位置&#xff0c;以方便cur的下一步移动 class Solution {public ListNode reverseList(ListNode head) {ListNode pre null;ListNode cur head;while (cur ! null) {ListNode tmp cur.next;c…