TypeScript(一)
1.什么是TS
2.ts的优势
3.ts版本选择没有选择最新版，而是按照教程一致选择tsc 5.1.6
可以使用ts-node 运行ts文件
4.数据类型4.1 八种数据类型
4.2 any类型和unknown类型区别any 类型表示没有任何限制，该类型的变量可以赋予任意类型的值。
12345let x: any;x = 1; // 正确x = "foo"; // 正确x = true; // 正确
变量类型一旦设为any，TypeScript 实际上会关闭这个变量的类型检查。即使有明显的类型错误，只要句法正确，都不会报错。
1234let x: any = "hello";x(1); // 不报错x.foo = 100; // 不报错
实际开发中，any类型主要适用以下两个场合。
（1）出于特殊原因，需要关闭某些变量的类型检查，就可以把该变量的类型设为any。
（2）为了适配以前老的 JavaScript 项目，让代码快速迁移到 TypeScript，可以把变量类型设为any。有些年代很久的大型 JavaScript 项目，尤其是别人的代 ...
Vue实战项目_Github案例
组织结构：
1.Search组件
2.List列表组件
源码：
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566List.vue<template> <div class="row"> <!-- 展示用户列表 --> <div v-show="info.users.length" class="card" v-for="user in info.users" :key="user.login"> <a :href="user.html_url" target="_blank"> <img :src="user.avatar_url" style= ...
Swiper
Swiper基本使用Swiper 使用方法1.首先加载插件，需要用到的文件有swiper-bundle.min.js和swiper-bundle.min.css文件，不同Swiper版本用到的文件名略有不同。可下载Swiper文件或使用CDN。
123456789101112<!DOCTYPE html><html><head> ... <link rel="stylesheet" href="dist/css/swiper-bundle.min.css"></head><body> ... <script src="dist/js/swiper-bundle.min.js"></script> ...</body></html>
2.添加HTML内容。Swiper7的默认容器是’.swiper’，Swiper6之前是’.swiper-container’。
123456789 ...
网络基础(二)
TCP/IPTCP/IP网络模型有哪几层？这个是一个测试
为什么要有 TCP/IP 网络模型？
对于同一台设备上的进程间通信，有很多种方式，比如有管道、消息队列、共享内存、信号等方式，而对于不同设备上的进程间通信，就需要网络通信，而设备是多样性的，所以要兼容多种多样的设备，就协商出了一套通用的网络协议。
这个网络协议是分层的，每一层都有各自的作用和职责。
#应用层最上层的，也是我们能直接接触到的就是应用层（Application Layer），我们电脑或手机使用的应用软件都是在应用层实现。那么，当两个不同设备的应用需要通信的时候，应用就把应用数据传给下一层，也就是传输层。
所以，应用层只需要专注于为用户提供应用功能，比如 HTTP、FTP、Telnet、DNS、SMTP等。
应用层是不用去关心数据是如何传输的，就类似于，我们寄快递的时候，只需要把包裹交给快递员，由他负责运输快递，我们不需要关心快递是如何被运输的。
而且应用层是工作在操作系统中的用户态，传输层及以下则工作在内核态。
#传输层应用层的数据包会传给传输层，传输层（Transport Layer ...
你不知道的CSS
CSS定位css有四种定位方式，分别是相对定位，绝对定位，固定定位，粘性定位
相对定位：12position: relative;top: 40px; left: 40px;
相对定位是参考位置是自己原来的位置，在css布局中，父元素经常被设定为相对定位，子元素被设定为绝对定位，这被称为“父相子绝”
相对定位特点：
不会脱离文档流，元素位置的变化，只是视觉效果上的变化，不会对其他元素产生任何影响。就算出现覆盖了，也只是视觉上的覆盖，层级还是在这一层级，并没有出现浮动。
都发生定位的两个元素，后写的元素会盖在先写的元素之上。
left 不能和 right 一起设置， top 和 bottom 不能一起设置。
相对定位，经常会与绝对定位配合使用。
不推荐对相对定位的元素进行浮动和用margin调整位置
绝对定位：12position: absolute;top: 40px; left: 40px;
绝对定位的参考点是它的包含块
绝对定位元素的特点：
脱离文档流，会对后面的兄弟元素、父元素有影响。这点与相对定位对比
left 不能和 right 一起设置， top 和 bo ...
你不知道的JavaScript
你不知道的JavaScript短路运算的妙用:||会把为真的值a赋给f，先看||左边的是否为真，再看||右边的是否为真
若是不输入性别，则||左边为假，右边为真，若输入性别，则先选择||左边的
1234<script> let sex =prompt("请输入性别")||"保密" console.log(sex); </script>
123let a = 6 b = 0let f = a || b //6
&& 和 ||&& 如果表达式1 结果为真 则返回表达式2 如果表达式1为假 那么返回表达式1
123456789 console.log(123 && 456); // 456 console.log(0 && 456); // 0 console.log(0 && 1 + 2 && 456 * 56789); // 0 console.log('' ...
网络基础(三)
键入网址到网页显示，期间发生了什么？HTTP
对 URL 进行解析
浏览器做的第一步工作就是要对 URL 进行解析，从而生成发送给 Web 服务器的请求信息。
要是上图中的蓝色部分 URL 元素都省略了，那应该是请求哪个文件呢？
当没有路径名时，就代表访问根目录下事先设置的默认文件，也就是 /index.html 或者 /default.html 这些文件
生产 HTTP 请求信息
对 URL 进行解析之后，浏览器确定了 Web 服务器和文件名，接下来就是根据这些信息来生成 HTTP 请求消息了。
DNS-真实地址查询通过浏览器解析 URL 并生成 HTTP 消息后，需要委托操作系统将消息发送给 Web 服务器。
但在发送之前，还有一项工作需要完成，那就是查询服务器域名对应的 IP 地址，因为委托操作系统发送消息时，必须提供通信对象的 IP 地址。
比如我们打电话的时候，必须要知道对方的电话号码，但由于电话号码难以记忆，所以通常我们会将对方电话号 + 姓名保存在通讯录里。
所以，有一种服务器就专门保存了 Web 服务器域名与 IP 的对应关系，它就是 DNS 服务器。
...
再识Vue2(二)
vuex
在vue中,我们想要实现父子组件中的传值,通过props和自定义事件可以可轻松的办到,如果是两个没有关联的组件,通过$bus事件公交也能实现兄弟子件的传值,但是在大型项目中,使用$bus容易导致代码繁琐,且不容易阅读.这个时候,vuex的出现可以很好的帮助我们解决我们这种问题
vuex是一个专为 Vue.js 应用程序开发的状态管理模式， 采用集中式存储管理应用的所有组件的状态，解决多组件数据通信。(简单来说就是管理数据的,相当于一个仓库,里面存放着各种需要共享的数据,所有组件都可以拿到里面的数据)
Vuex的核心概念包括state（状态）、getters（获取器）、mutations（突变）和actions（动作）。State代表应用程序的状态数据，Getters用于从state中派生出一些新的状态，Mutations是用于修改state的方法，而Actions则是用于提交mutations的方法，可以包含任意异步操作。
使用Vuex的好处在于，它可以帮助开发者更好地组织和管理应用程序的状态，避免了状态分散在各个组件中导致的混乱和 ...
Vue2实战项目_尚品汇
尚品汇项目配置
在后面加 –open可以使网页自动打开
项目的其他配置
v-if和v-show选择v-show和v-if是Vue中用于条件渲染的两个指令，它们的作用是根据条件来控制元素的显示和隐藏。虽然它们最终都能实现类似的效果，但它们的工作原理有所不同。
v-show指令会根据条件来切换元素的CSS属性”display”，当条件为true时，元素显示；当条件为false时，元素隐藏。这意味着无论条件如何变化，元素始终保留在DOM中，只是通过改变CSS属性来控制显示和隐藏。
v-if指令则是真正的条件渲染，当条件为true时，元素被渲染到DOM中；当条件为false时，元素从DOM中移除。这意味着当条件变化时，v-if会销毁或重新创建元素，而不仅仅是改变CSS属性。
一般来说，如果需要频繁切换元素的显示和隐藏，可以使用v-show；如果条件在运行时不经常变化，可以使用v-if。另外，v-if还可以与v-else和v-else-if结合，实现更复杂的条件逻辑。
路由元信息
路由传参在 Vue Router 中，有两种主要的参数传递方式：params 参数和 query 参数。
1 ...
Less
什么是Less？Less是一种更加简洁的样式代码，它非常像CSS，但又不太一样，它让编写样式变得更容易
下面是css代码和Less代码的对比，他们都表达了一样的含义
node环境Less代码虽好，但它无法被浏览器识别，因此需要一个工具将其转换为血统纯正的css代码
由于node环境具有读写文件的能力，于是在node环境中可以轻松的完成文件的转换
npm上有一个包叫做less,它运行在node环境中，通过它可以完成对Less代码的转换
node环境在前端工程化中，充当了一个辅助的角色，它并不直接运行前端代码，而是让我们编写前端代码更加舒适便利
转换代码，称之为编译(compile),转换代码的工具，称之为编译器(compiler)
Less的核心语法Less提供了非常多的功能，帮助我们更加轻松的编写css代码
其中，我们最常用的功能有下面3个:
变量
嵌套
混合
另外，你需要关注Less的特殊注释