一文搞定Vue3组件传值
1. 父传子 defineProps父组件传值给子组件主要是由父组件通过v-bind绑定数值,而后传给子组件;子组件则通过defineProps 接收使用。
父组件
1234567891011121314151617181920<template> <div class="fu"> <p>我是父组件</p> <son :toSomMeg="toSomMeg"></son> </div></template><script setup lang="ts">import { ref } from "vue";import son from "./son.vue";const toSomMeg = ref("给子组件的消息");</script><style>.fu { width: 100% ...
uni-app+vue3+vite+uni-ui+pinia微信小程序项目搭建
0. 前言
最近在把一个uni-app项目从原来的vue2重构到vue3上,趁这次机会记录一下这个项目打搭建方便自己后面再次用到就可以直接拉代码了。
这篇文章很多实现和思路都是参考其他大佬的,如果有哪里不对欢迎大家指出。
1. 项目初始化1.1 通过vue-cli命令创建
全局安装vue-cli
1npm i -g @vue/cli
使用Vue3/Vite版
创建以 typescript 开发的工程(如命令行创建失败,请直接访问 gitee 下载模板)
1npx degit dcloudio/uni-preset-vue#vite uniapp-vue3-vite
tips:
Vue3/Vite版要求 node 版本^14.18.0 || >=16.0.0
1.2 ESLint12# 根据提示和项目情况选择y/nnpx eslint --init
配置参考文章
vs-code安装和配置ESLint
1.3 prettier1npm i prettier eslint-config-prettier eslint-plugin-prettier -D
...
vite项目配置:后端希望能任意更改打包后的接口请求地址
0. 前言目前项目上领导提出一个需求:前端项目打包的时候,希望项目线上接口地址不要写死。可以根据上线时候的情况去修改接口地址而不需要前端再次打包代码。
根据网上搜索加自己实践得出以下几种方法:
1. 解决方案我这边是uniapp的项目,在根目录下static文件夹内的内容默认不会压缩(vue中默认public文件夹),那就就在static文件夹内创建一个config.js文件。
12// /static/config.jshttpUrl = 'www.xxx.com/';
1.1 方案一在index.html中新增script标签,window对象上挂载请求路径,后端想要修改地址就在html中修改即可。
123456789101112131415161718<!--index.html--><!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <link rel=&qu ...
【踩坑记事】关于我被switch语句折腾的3小时
0. 前言记一次这周在项目上遇到的一个问题,为解决这个问题我和朋友研究了大概两三个小时。我们都是第一次遇到这种问题,请大佬勿喷,下面我来讲一下这个问题的成因和解决的办法。
直接说结果[问题结论](#4. 问题解决)
1. 问题来源在目前这个项目中有一个函数需要根据后端返回返回的数据,分别进行不同操作。因为要执行不同的操作的判断有点多,所以决定使用switch语句来进行判断。
一般来说switch语句是长这样的:
12345678910111213141516171819202122switch (expr) { case "Oranges": console.log("Oranges are $0.59 a pound."); break; case "Apples": console.log("Apples are $0.32 a pound."); break; case "Bananas": console.log("Ba ...
vs-code安装和配置ESLint
安装ESLint
全局安装: npm install -g eslint
项目安装: npm install eslint --save-dev
如果你想你所有项目都使用eslint,请全局安装;如果你想当前项目使用,请局部安装。
局部安装时请使用 –save-dev,因为 eslint 是适用于开发环境(Software Development Environment,SDE)的插件,请不要添加到生产环境中。
初始化ESLint
eslint --init
1234? How would you like to use ESLint? (Use arrow keys) // 你想怎样使用eslint To check syntax only // 只检查语法> To check syntax and find problems // 检查语法、发现问题 To check syntax, find problems, and enforce code style // 检查语法、发现问题并执行代码样式
1234? What type of modules d ...
mklink命令创建软硬目录链接与删除链接
1. mklink链接的创建“mklink” 命令在 Windows 系统中用于创建硬链接、符号链接和目录链接。以下是 “mklink” 命令的常用参数:
/D:用于创建目录软链接。当使用该参数时,需要指定目标目录的路径。
/H:用于创建硬链接(硬链接只适用于文件)。当使用该参数时,需要指定目标文件的路径。
/J:用于创建目录链接。与 /D 相似,但它创建的是一个目录联接,而不是目录软链接。
/I:用于创建符号链接(默认为符号链接)。当使用该参数时,需要指定目标文件或目录的路径。
/Y:在创建链接之前,自动确认覆盖现有目标。
下面是一些示例:
创建文件软链接:
1mklink 软链接文件 目标文件
创建目录软链接:
1mklink /D 软链接目录 目标目录
创建符号链接(默认):
1mklink 软链接 目标文件或目录
创建硬链接:
1mklink /H 硬链接 目标文件
创建目录链接:
1mklink /J 目录链接 目标目录
请注意,在创建链接时,确保 “mklink” 命令的参数和路径正确无误,并具有足够的权限。
2. 软链接、硬链接、目录链接区别软链接、硬链接和目 ...
【杂谈】浅谈社会公信力的丧失
0. 前言:在开始之前我想先说说什么是社会公信力。社会公信力是指一个个体、组织或机构在社会中获得的信任和声誉程度。它反映了人们对其行为、承诺和道德准则的信任程度。社会公信力是建立在诚信、透明度和责任感基础上的,它对于个人、企业、政府和其他组织来说都非常重要。
一个具有良好社会公信力的个体或者组织,通常表现出以下几个特征:
诚信和守信:他们言行一致,信守承诺,不欺骗他人。
诚信和守信:他们言行一致,信守承诺,不欺骗他人。
透明度:他们公开信息,对外界保持开放和公正。
责任感:他们对自己的行为负责,并愿意承担应有的责任和后果。
反馈和改进能力:他们重视他人的反馈和意见,积极改进自身不足之处。
社会参与:他们积极参与社会公益事业,关注社会问题并为之做出贡献。
1. 群众里面有坏人啊其实我对社会公信力逐渐丧失有比较直观的感受是在19年疫情开始的时候。
【算法】JS实现斐波那契数列
斐波那契数列,又称黄金分割数列,是一种递归的数列,以它的递推公式和美丽的数学性质得到了广泛的应用。本文将介绍使用 JS 实现斐波那契数列的几种方法,包括递归和循环,以及优化方案等。
1. 斐波那契数列定义斐波那契数列(Fibonacci sequence)是一种递归的数列,以它的递推公式和美丽的数学性质得到了广泛的应用。它的定义如下:F(0)=0,F(1)=1,F(n)=F(n-1)+F(n-2)(n>=2,n∈N*)。也就是说,第 n 个斐波那契数就是第 n-1 个和第 n-2 个斐波那契数之和。通常用 F(n)表示斐波那契数列中的第 n 个数。斐波那契数列是一个由 0 和 1 开始,后续的每一项都是前两项之和的数列。
2. 以终为始——递归实现2.1 普通递归对于普通递归我的总结就是:以终为始,套娃计算,适时终止。
以始为终:用倒推的方式来思考。
套娃计算:找到套娃的公式。
适时终止:递归到能直接得到结果的地方就停并返回结果。
下面我们来开始倒推。从后往前倒推就是 :
123456f(n) = f(n-1) + f(n-2)f(n-1) = f(n-2) - ...
WebSockets的简单使用
0. 前言:自从HTML5里的WebSocket出现后,彻底改变了以往Web端即时通讯技术的基础通道这个“痛点”(在此之前,开发者们不得不弄出了诸如:短轮询、长轮询、Comet、SSE等技术,可谓苦之久矣…),如今再也不用纠结到底该用“轮询”还是“Comet”技术来保证数据的实时性了。
1. 什么是WebSocketWebSocket 协议在2008年诞生,2011年成为国际标准,所有浏览器都已经支持了。其是基于TCP的一种新的网络协议,是 HTML5 开始提供的一种在单个TCP连接上进行全双工通讯的协议,它实现了浏览器与服务器全双工(full-duplex)通信——允许服务器主动发送信息给客户端。
WebSocket特点:
WebSocket可以在浏览器里使用
支持双向通信
使用简单
支持扩展。ws协议定义了扩展,用户可以扩展协议,或者实现自定义的子协议。(比如支持自定义压缩算法等)
较少的控制开销。连接创建后,ws客户端、服务端进行数据交换时,协议控制的数据包头部较小。
协议标识符是ws(如果加密,则为wss),服务器网址就是 URL。
与 HTTP 协议有着良好的兼容性。默 ...
彻底搞懂HTTP缓存策略
0. 前言:在web中,http请求一般都是浏览器发起的,所以我们这里所说的http的缓存策略,其实也就是浏览器端的缓存策略,因为http本身只是一种协议,真正实现缓存还是要靠浏览器(其实就是浏览器指定存储在硬盘下。)
我们使用 HTTP 缓存,通过复用缓存资源,减少了客户端等待时间和网络流量,同时也能缓解服务器端的压力。可以显著的提升我们网站和应用的性能。虽然 HTTP 缓存不是必须的,但重用缓存的资源通常是必要的,HTTP 缓存是一个 web 性能优化的重要手段。
要想实现一个完整的缓存,需要考虑很多因素。例如:
请求的资源发生改变的时候,如何让浏览器去获取新的资源。
设置缓存失效时间之后,如果服务器资源没有发生改变,浏览器如何判断。
什么样的HTTP响应会被客户端缓存?
默认情况下,请求方法如 GET、HEAD的响应内容是可缓存的,在包含新鲜度信息的情况下,POST的响应内容也可以被缓存;
默认情况下,响应码如 200、206、300、301、302、404 等的响应内容可以被缓存;
响应头和请求头没有指明不使用缓存,如 Cache-Control: no-stor ...