组件通信父子双传props父传子 子传父 v-model（双向绑定）表单 12345//用在html标签<input type="text" v-model="username">//用在组件标签上<组件 v-model="username"/> 父传子$refs改变子的玩具 让所有子的书变多 默认插槽 具名插槽 子传父自定义父组件 1<Child @send-toy="toy = $event"/> 子组件 1this.$emit('send-toy', 具体数据) $parent减少父的房产 作用域插槽params 作为对象 祖传孙$attrs provide（配 inject） 孙传组inject（配 provid） 兄弟传mitt安装 1npm i mitt /utils/emitter 12345678//引入mittimport mitt from 'mitt'// 调用 ...

路由 router/index.ts 1234567891011121314151617import { creatRouter, createWebHistory } from 'vue-router'import 自定义名1 from '../pages/组件1.vue'import 自定义名2 from '../pages/组件2.vue'export default createRouter({ history: createWebHistory(), routes:[ { path:'/自定义路由名1' component:/自定义名1, }, { path:'/自定义路由名2' component:/自定义名2, }, ],}) App ...

ScssSass使用Ruby语法 : *没有花括号，没有分号，具有*严格的缩进 基础使用1pnpm install -D sass sass-loader 语法define.scss （一般放在src中的styles文件夹中） 12$--primary-color: #123456;$white-color:$--primary-color-green !default;//这个默认值的优先级降到了最低，当没有其它地方赋值时候，才会选择默认值 vue组件 1234567<style scoped lang="scss">@import '@/styles/define.scss'; .box{ color:$--primary-color; background-color:$white-color; }</style> @mixin可以定义一段代码作为模板样式 123456789@mixin border-radius($radius: 5px, $bor ...

CSS定位元素 grid网格布局新的长度单位：fr 1一般来说 1fr 的意思是“100%的剩余空间”, .25fr 意味着“25%的剩余空间”。当时当 fr 大于 1 的时候，则会重新计算比例来分配。 grid布局1display: grid; 1grid-template-columns: 1fr 1fr 1fr 1fr; 等价于（repeat） 12grid-template-columns: repeat(4, 1fr);grid-template-columns: repeat(4, .25fr); 一般都建议使用 **fr>=1 的情况 响应式设计这里 A 和 D 都是固定的 50px，C 是占总宽度的 20%，剩余空间就可以分配给 B。 1234.grid-container { grid-template-columns: 50px 1fr 20% 50px; column-gap: 10px;} 船新用法3*3的网格 12345678910//网格布局.face { display: grid; gri ...

grid+transform实现页面3D骰子回顾transform1transform-style: preserve-3d;/*所有子元素在3D空间中呈现*/ 偏移1transform: translateX(90px) translateY(90px) translateZ(90px);/*左右 下上 前后*/ 旋转1transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) 实战效果HTML12345678910111213141516171819202122232425262728293031323334353637<div class="container"> <div class="wrap" id="dice"> <div class="face face-grid first-face"> <span class="dot cc-dot red& ...

CSS搭建页面3D空间重磅CSS属性 transform1transform-style: preserve-3d;/*所有子元素在3D空间中呈现*/ 偏移 1transform: translateX(90px) translateY(90px) translateZ(90px);/*左右 下上 前后*/ 旋转 1transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg)

元素区分块元素 div / p / h / ul / li 行内元素 a / span /br 行内块元素 img / input / td 高度塌陷就是外边距margin塌陷 只会发生在垂直方向，只出现在块级元素上 解决：子绝父相 浮动塌陷元素一旦****浮动后，脱离标准流，朝着向左或右方向移动，直到自己的边界紧贴包含块(一般是父元素)或者其他浮动元素的边界为止 clear 12345678div -> display:float span //float: left span //若未设置高度，则span浮动于父元素上方，产生高度塌陷 span span span p -> clear: bothdiv 创建BFC BFC原理详情见文章 “格式化上下文–BFC与IFC” 1http://154.40.44.42:8090/archives/ge-shi-hua-shang-xia-wen--bfcyu-ifc 1234567d ...

源码见仓库 Breezli/WebRTC_Demo: 基于WebRTC技术实现的本地网页端视频通话 为了更好的项目体验，本文的项目引用了三张svg，位于github仓库的public目录下 分为前后端两个文件夹 webrtc-client (客户端) webrtc-server (服务端) 预先准备webrtc-client前端页面绘制 123456依赖下载pnpm create vite@latest webrtc-client -- --template vue-tscd webrtc-clientpnpm install -D tailwindcss@3.4.17 postcss autoprefixerpnpm install socket.io-clientnpx tailwindcss init -p package.json 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616 ...

TS + NodeJS 实现 axios1git clone https://github.com/alexjoverm/typescript-library-starter.git ts-axios 需求 在浏览器端使用 XMLHttpRequest 对象通讯 Promise API 请求响应拦截器 请求数据和响应数据转换 请求的取消 JSON 数据的自动转换 客户端防止 XSRF 框架工具 请求代码axios 最基本的操作 12345678axios({ method: 'get', url: '/simple/get', params: { a: 1, b: 2, },}) 创建入口文件 index.ts 123function axios(config) {}export default axios xhr.ts xhr 函数用于发送 HTTP 请求的工具函数，基于 XMLHttpRequest API 实现，并提供了一个简单的接口来配置和发送请求。 ...