showToast、hideToast
摘要：<template> <button @click="show">显示</button> <button @click="hide">隐藏</button> </template> <script setup> const show = () => { uni.showToast({ duratio
阅读全文
posted @ 2025-02-28 23:30
02 2025 档案
uniapp auto-import
摘要：1.安装 npm i unplugin-auto-import 2.创建vite.config.js，并配置 import { defineConfig } from 'vite' import uni from '@dcloudio/vite-plugin-uni' import AutoImpo
阅读全文
posted @ 2025-02-28 18:11
easyCom、tabBar
摘要：1.easyCom：根据固定的路径创建的文件，不需要引入和注册组件，可以直接template使用 安装在项目根目录的components目录下，并符合components/组件名称/组件名称.vue 2.tarBar { "pages": [ //pages数组中第一项表示应用启动页，参考：http
阅读全文
posted @ 2025-02-28 17:30
page.json的pages配置
摘要：{ "pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages { "path": "pages/index/index", // 取的是文件路径 "style": { // 这里都可以单独配置globa
阅读全文
posted @ 2025-02-28 16:15
生命周期onPullDownRefresh、onReacBottom和page.json中的globalStyle
摘要：{ "pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages { "path": "pages/index/index", "style": { "navigationBarTitleText": "u
阅读全文
posted @ 2025-02-28 15:42
rpx
摘要：<template> <view class="rpx"></view> </template> <style lang="scss"> // rpx是屏幕宽度自适应的动态单位，是把屏幕分为750份，750是固定值 // 使用方法是把设计稿改为宽度750，缩放后取对应的宽度的rpx // app端不
阅读全文
posted @ 2025-02-28 14:26
生命周期onLoad、onShow、onReady、onHide、onUnLoad、onPageScroll和App.vue的生命周期
摘要：<template> <text>{{name}}</text> <view ref="v"> <navigator url="/pages/index/index">回到主页面</navigator> </view> <view class=""> <navigator url="/pages/i
阅读全文
posted @ 2025-02-28 11:35
input、button
摘要：<template> <button size="default" type="primary" plain>默认按钮大小，按钮镂空</button> <button size="mini" disabled loading>迷你按钮大小</button> <input type="text" :v
阅读全文
posted @ 2025-02-27 21:42
navigator
摘要：<template> <view class=""> <navigator url="/pages/demo/image" open-type="reLaunch"> 文字跳转写法，open-type是relanuch的时候会把跳过去的页面当初主页，左上角没有返回箭头 </navigator> </
阅读全文
posted @ 2025-02-27 18:26
image
摘要：<template> <swiper :indicator-dots="true" :autoplay="true" circular> <swiper-item> <image src="/static/logo.png" mode="aspectFill"></image> </swiper-i
阅读全文
posted @ 2025-02-27 17:55
swiper
摘要：<template> <swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" indicator-color="#007aff" indicator-active-color="#fff" c
阅读全文
posted @ 2025-02-27 16:42
scrollView
摘要：<template> <scroll-view scroll-y class="scrollView scrollViewY"> <view>相当于一个y轴滚动条的盒子</view> <view>相当于一个y轴滚动条的盒子</view> <view>相当于一个y轴滚动条的盒子</view> <vie
阅读全文
posted @ 2025-02-27 15:28
内置组件view & text、路由创建
摘要：1.创建页面和路由配置 如创建后访问不到该路径，尝试重新启动 2.uniapp组件开发和PC端开发的不同 div等html标签在H5开发中可以使用，小程序不能使用，需要使用uniapp提供的组件 3.view组件：类似div标签，不过有自己的一些属性 4.text组件：类型span标签 <templ
阅读全文
posted @ 2025-02-27 14:50
base
摘要：1.创建 2.运行配置exe文件地址（小程序或者浏览器都需要配置），需开启服务端口
阅读全文
posted @ 2025-02-26 23:49
vue模板编译过程
摘要：Vue 模板的编译过程是 Vue 中非常核心的一部分，它将你在模板中写的 HTML 代码转换成 JavaScript 代码，使得 Vue 能够高效地在页面上渲染和更新数据。Vue 的模板编译过程可以分为几个重要步骤，具体的过程是： Vue 模板编译的过程： 模板解析（Parsing） 抽象语法树生成
阅读全文
posted @ 2025-02-23 21:24
webpack构建过程
摘要：在 Webpack 的打包流程中，模块构建阶段和编译阶段的确是两个不同的概念，它们有各自的独立任务和作用。让我重新整理并澄清每个阶段的职责，特别是它们与 loader 和模块依赖图的关系。 Webpack 打包流程的澄清： 初始化阶段（Initialization） 编译阶段（Compilation
阅读全文
posted @ 2025-02-23 16:09
性能优化：浏览器lighthouse
摘要：1.lighthouse监测项目性能 FCP：首次内容绘制时间，浏览器第一次绘制DOM相关的内容，用户第一次看到页面内容的时间(首次加载白屏时间) Speed Indxe：页面各个可见部分的显示平均时间，页面有轮播图或需要从后端获取内容加载时，这个数据会被影响到 LCP：页面中最大的内容需要绘制的时
阅读全文
posted @ 2025-02-23 16:07
环境变量env
摘要：1.查看环境变量 <template> <div></div> </template> <script setup lang='ts'> // 获取环境变量 console.log(import.meta.env); // 不可直接修改值，因为线上环境是硬编码，是写死的，动态修改无效 const B
阅读全文
posted @ 2025-02-23 01:10
编译宏 definedProps、definedEmits、definedOptions、definedSlot
摘要：<template> <div>{{prop.dataProp}}</div> {{ a }}{{ b }} <div v-for="item in prop.dataProp" :key="String(item)"> {{ item }} <slot :item="item"></slot> <
阅读全文
posted @ 2025-02-22 22:23
pinia 持久化插件
摘要：import { createApp } from 'vue' import './style.css' import App from './App.vue' // import SelfComponent from './study/selfComponent/component.vue' //
阅读全文
posted @ 2025-02-22 19:05
pinia $reset、$subscribe、$onAction
摘要：<template> <div @click="[store.count++,store.increment()]"> 直接通过实例.就可以获取 {{ store.count }} {{ store.sex }} </div> <div @click="reset">恢复</div> </templ
阅读全文
posted @ 2025-02-22 16:46
pinia action和getter
摘要：import {defineStore} from 'pinia' import {StoreName} from './store-name' // StoreName是id，用于区分不同的store，自定义即可 export const useStore = defineStore(StoreN
阅读全文
posted @ 2025-02-22 15:31
pinia 解构state
摘要：<template> <div @click="change"> 直接通过实例.就可以获取 {{ store.count }} {{ store.sex }} </div> {{ count }} </template> <script setup lang='ts'> import { useSt
阅读全文
posted @ 2025-02-22 14:55
pinia 修改state
摘要：<template> <div @click="change"> 直接通过实例.就可以获取 {{ store.count }} {{ store.sex }} </div> </template> <script setup lang='ts'> import { useStore } from '
阅读全文
posted @ 2025-02-22 12:29
pinia基础使用
摘要：import {defineStore} from 'pinia' import {StoreName} from './store-name' // StoreName是id，用于区分不同的store，自定义即可 export const useStore = defineStore(StoreN
阅读全文
posted @ 2025-02-22 11:40
pinia安装介绍
摘要：1.介绍 2.安装 npm i pinia -S import {createPinia} from 'pinia' const store = createPinia() app.use(store)
阅读全文
posted @ 2025-02-22 11:18
unocss原子化
摘要：https://xiaoman.blog.csdn.net/article/details/125650172
阅读全文
posted @ 2025-02-22 00:02
h5 编写postcsstoviewport插件 px->vw和全局修改文字大小
摘要：1.index.html设置meta和清除默认样式 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <link rel="icon" type="image/svg+xml" href="/vite.svg" /> <
阅读全文
posted @ 2025-02-21 23:36
ES6
摘要：1let、const、var 块级作用域：{}，let和const有，var 没有 变量提升/暂时性死区：let和const没声明前不可用，var可用 给全局添加属性：var声明的是全局变量，let const不是 重复声明：var允许，let const不允许 初始值设置：var let可以不用设
阅读全文
posted @ 2025-02-19 22:47
Javascript
摘要：1.JavaScript有哪些类型 栈（先进后出；占据空间小、大小固定、属于被频繁使用的数据）：原始数据类型 undefined、null、boolean、number、string、BigInt 堆（二叉树结构；占据空间大，大小不固定，存储在栈影响性能，把指针存在栈中，指针指向实体位置，取值通过栈
阅读全文
posted @ 2025-02-19 22:43
HTML
摘要：1.src和herf的区别 src是会将指向的资源下载并应用到文档内，并且解析时会暂停其他资源的下载和处理，因此js脚本大多放在底部。 herf是指向网络资源所在的位置，建立和当前元素的连接(不会下载并应用到文档内)，解析时时并行下载资源不会停止对当前文档的的处理，因此建议使用link的方式加载cs
阅读全文
posted @ 2025-02-19 20:52
storage案例
摘要：1.tsconfig.json设置和安装初始化项目 2.思路：1.实现该插件有几种功能
阅读全文
posted @ 2025-02-19 13:16
infer
摘要：// infer 作用是推断泛型参数，必须配合着extends使用,需要跟着变量名 interface User { name: string age: number } // 写一个传入具体泛型的type，然后可以推断其泛型的type // 定义一个具用泛型的type type promiseTy
阅读全文
posted @ 2025-02-19 01:45
泛型工具
摘要：// 泛型工具 interface user { name: string age: number sex: string } interface rUser { name?: string age?: number sex?: string } // Partial<泛型> 把所有属性改为可选属性
阅读全文
posted @ 2025-02-18 23:54
协变、逆变、双向协变
摘要：interface a { name: string } interface b { name: string, age: number } let A:a = { name: '222' } let B:b = { name: '112', age: 88 } // 协变，a作为主类型，b是作为副
阅读全文
posted @ 2025-02-18 17:07
typeof、is
摘要：// 收缩类型:判断是不是属于某个类型 // 使用typeof只对基础类型有效 // const isNum = (num:any) => typeof num 'number' // 使用instanceof可以对引用类型进行区分 const isArrary = (arr:any) => arr
阅读全文
posted @ 2025-02-18 15:26
Proxy、Reflect
摘要：// Proxy是es6新增的拦截器，总共拦截十三种，代理 // Reflect是反射，跟Proxy的方法一样是十三种,对应的参数一模一样 // Proxy是代理引用类型，对象、数组、map、set、函数 let person = {name:'bai',age:14} const personPr
阅读全文
posted @ 2025-02-18 13:47
set、map、weakSet、weakMap
摘要：// set:天然去重属性，引用类型除外 const s:Set<number> = new Set([1,2,2,3]) // console.log(s); //1,2,3 s.add(4) // 添加 s.delete(1) // 删除 s.has(2) // 判断是否有2 s.clear()
阅读全文
posted @ 2025-02-18 12:14
发布订阅模式
摘要：// 发布订阅模式设计模式：跟eventListener思想一样 // 监听器 // function eventFn() { // console.log('e'); // } // document.addEventListener('eee',eventFn) // // 订阅中心 // co
阅读全文
posted @ 2025-02-17 22:08
wepcka：从0搭建ts+vue+wepack以及插件、公共部分、样式分包
摘要：1.构建tsconfig.json tsc --init // tsc需要全局按照typescript工具 2.构建package.json npm init -y 3.创建webpack.config.js文件 4.创建index.html,写html基本配置 5.创建src目录，依次创建App.
阅读全文
posted @ 2025-02-17 20:46
Decorator
摘要：// 要使用装饰器，需要在tsconfig.json中开启 "experimentalDecorators": true, "emitDecoratorMetadata": true // 装饰器就是给对应的类、属性、参数、方法添加前置的功能 import axios from "axios"; /
阅读全文
posted @ 2025-02-17 14:30
函数柯里化
摘要：函数柯里化（Currying） 是一种将多个参数的函数转换为一系列使用一个参数的函数的技术。它通过将一个接收多个参数的函数转化为一系列接收一个参数的函数来逐步处理。 函数柯里化的基本概念： 假设有一个函数 f(a, b, c)，柯里化后的形式是 f(a)(b)(c)，即每个参数逐一传入，而不是一次性
阅读全文
posted @ 2025-02-17 12:08
mixins
摘要：// 对象的混入 type A = { name: string } type B = { age: number } const a9:A = { name: 'xiaobai' } const b9:B = { age: 15 } // 使用扩展运算符此时c9的类型推断 // { // name
阅读全文
posted @ 2025-02-16 17:34
declare module
摘要：// index.d.ts文件是描述该插件如何使用的说明，如果插件缺失该文件import时候会报错 import Axios from 'axios' // 不会报错，通过ctrl+点击会进去该index.d.ts文件 // express缺失index.d.ts直接import会报错 // 方法1
阅读全文
posted @ 2025-02-16 16:54
export
摘要：// import importA from './export' // 导入default可随意命名 // import { exportDemo } from './export' // 解构需要对应名字 // 可以使用as重命名 import { exportDemo as exportDem
阅读全文
posted @ 2025-02-16 15:29
namespace
摘要：// 基础使用导出、嵌套、合并、抽离、简化 namespace Test { let c = 6 export let b = 5 export const f = () => 1 // 嵌套的namespace也是要export,才能被外部引用 export namespace Test1 { e
阅读全文
posted @ 2025-02-16 00:51
泛型T keyof
摘要：// extends function A<T>(a:T,b:T) { // return a+b // 此时提示报错，因为不是任何类型都可以接受+，所以此时加号不安全 } // 通过泛型extends数字类型，number能够接收+，所以不会报错 function B<T extends numb
阅读全文
posted @ 2025-02-15 16:53
泛型T
摘要：// 泛型: 动态类型 // 用泛型整合下面2个函数为一个函数 function A(a:number,b:number):number[] { return [a,b] } function B(a:string,b:string):string[] { return [a,b] } // T是自
阅读全文
posted @ 2025-02-15 15:22
Symbol.iterator
摘要：// 生成器 // 生成器与迭代器使用方法一样 // function* gen() { // yield Promise.resolve('1') // 接同步代码异步代码都可以 // yield '2' // yield '3' // } // const man = gen() // done
阅读全文
posted @ 2025-02-15 01:56
Symbol
摘要：// symbol表示是唯一值，哪怕值一样，也不会相等 let a1:symbol = Symbol(1) let a2:symbol = Symbol(1) // console.log(a1 == a2); // false // Symbol.for是全局搜索传入的值，如果没有就创建一个，如果
阅读全文
posted @ 2025-02-15 01:22
nerve
摘要：// nerve类型代表不可能有这个类型，例如同时是string和number，会推断为nerve type a = string & number // 因为nerve是最底层的类型，前面有了number和void类型会自动忽略nerve类型 type b = number | void | ne
阅读全文
posted @ 2025-02-14 22:42
type
摘要：// ts自带类型推论，此时推论为string，要修改类型推论的话就自定义类型 let str = '456' // str = 456 // 赋值数字会报错 let str1 // 不定义会自动推论为any // type可以自定义名称，指定各种类型 type a = {} type b = []
阅读全文
posted @ 2025-02-14 22:17
枚举
摘要：// 数字枚举 // 自增值 // enum e { // red, // green, // black // } // console.log(e.red,e.green,e.black); // 0,1,2 // 可以设置默认值，没定义的还是会默认自增 // enum e { // red,
阅读全文
posted @ 2025-02-14 13:14
元组
摘要：// 元组 const arr:[string, boolean, number] = ['123', false, 123] arr.push(456) // console.log(arr[3]) // 元组越界之后，虽然可以push，但是实际上访问不到，arr[3]报错 // arr.push
阅读全文
posted @ 2025-02-14 12:04
abstract
摘要：// abstract 抽象类不能实例化，抽象方法不能具体的定义 abstract class Vue { constructor(parameters) { } // 报错 // abstract init() {} abstract init(name:string) :void after()
阅读全文
posted @ 2025-02-14 11:51
class
摘要：interface Options { el: string | HTMLElement } interface VueCls { options: Options init: () => void } interface VNode { tag: string // div session tex
阅读全文
posted @ 2025-02-13 14:42
ecma、dom、bom
摘要：// js内置对象类型 // ecma let num:Number = new Number(1) let data:Date = new Date() let err:Error = new Error('错误') let reg:RegExp = new RegExp(/\w/) let xm
阅读全文
posted @ 2025-02-12 21:49
混合类型| 、交叉类型& 、断言as
摘要：// 联合类型 |, 代表可以传字符串或者数字 // const a = (name: string | number) => { // console.log(name); // } // a('gg') // a(18) // 交叉类型 &, 代表需要满足2个interface // inter
阅读全文
posted @ 2025-02-12 16:55
function
摘要：// 基础使用和箭头函数 // function add(a:number, b:number):number { // return a+b // } // const muti = (a:number, b:number):number => a*b // 参数默认传值、函数可选参数 // co
阅读全文
posted @ 2025-02-12 15:57
数组
摘要：// 基础用法:type[] let arr:number[] = [1,2,3] // 泛型用法：Arrary<type> let arr1:Array<boolean> = [true,true] // interface用法: interface[] interface x { name: s
阅读全文
posted @ 2025-02-12 14:42
interface
摘要：// interface 常用于约束定义返回的数据,interface中定义了，则使用该interface的变量不可以多一个或者少一个 // interface res { // name: string // 不需要逗号隔行 // value: number // } // let result:
阅读全文
posted @ 2025-02-12 11:50
Object、object、{}
摘要：// Object 在原型链中基本类型和引用类型都指向Oject，因此Object是包含所有的类型 let o:Object = 123 let o1:Object = true let o2:Object = '123' let o3:Object = {name: 'aaa'} let o4:O
阅读全文
posted @ 2025-02-12 11:49
any、unknow
摘要：// any: 任意类型 unknow:不知道的类型 // 每个层次会包括下面的所有层级，第一层级的类型包含第二层级的所有类型···类推 // 1.顶级类型 any unknow // 2.Object // 3.Number String Boolean // 4.number string bo
阅读全文
posted @ 2025-02-11 23:52
ts 基础指令和基础语法
摘要：1. 安装 npm i typescript -g 2. 初始化生成tsconfig.json tsc -init 3. 监听ts文件并将ts文件转译多一份.js tsc -w const demo:string = 'demo' let v:void = undefined // let v1:v
阅读全文
posted @ 2025-02-11 23:52
nextTick
摘要：<template> <div style="height: 300px;width: 200px;border: 1px solid #000;overflow-y: auto;" ref="box"> <div v-for="item in chatList" :key="item" style
阅读全文
posted @ 2025-02-11 15:56
event Loop
摘要：<template> <div></div> </template> <script setup lang='ts'> // setTimeout是宏任务，promise是微任务，宏任务和微任务都是队列数据结构，为先进先出 // 事件循环的机制:同步代码先执行，然后处理微任务队列，接着是宏任务队列中
阅读全文
posted @ 2025-02-11 13:27
slotted()、style module、global、style v-bind
摘要：<template> <slotComponent> <template v-slot><div class="demo">789</div></template> </slotComponent> <h1 class="colorBlue">ref变量直接在style中通过v-bind使用</h1
阅读全文
posted @ 2025-02-10 19:19
scope、:deep()
摘要：<script setup lang="ts"> import HelloWorld from './components/HelloWorld.vue' </script> <template> <div> <a href="https://vite.dev" target="_blank"> <
阅读全文
posted @ 2025-02-10 18:22
插件编写
摘要：// 使用页面 <template> <div></div> </template> <script setup lang='ts'> import { ref, reactive } from 'vue' const app = getCurrentInstance() app?.proxy?.$
阅读全文
posted @ 2025-02-10 14:47
全局变量和函数定义和使用
摘要：import { createApp } from 'vue' import './style.css' import App from './App.vue' import SelfComponent from './study/selfComponent/component.vue' impor
阅读全文
posted @ 2025-02-10 12:19
hook封装成库上传到npm库中，下载自己用
摘要：https://www.bilibili.com/video/BV1dS4y1y7vd?spm_id_from=333.788.videopod.episodes&vd_source=ce8f93194a63c57cca08d7e9eb10d3e5&p=41
阅读全文
posted @ 2025-02-10 11:46
hook:toBase64
摘要：<template> <img src="/src/assets/img/demo.png" alt="" width="500" height="600" id="image"> </template> <script setup lang='ts'> import usebase64 from
阅读全文
posted @ 2025-02-09 02:02
手写v-lazy指令
摘要：<template> <div v-for="item in arr" :key="item"> <img v-lazy="item" alt="" width="400" height="800"> </div> </template> <script setup lang='ts'> impor
阅读全文
posted @ 2025-02-09 01:09
简写directive，鉴权指令
摘要：<template> <button v-has-show="'add'">创建</button> <button v-has-show="'delete'">删除</button> </template> <script setup lang='ts'> import type { Directi
阅读全文
posted @ 2025-02-08 17:05
directive的生命周期和简单使用
摘要：<template> <lifeComponent v-demo="{color: 'red'}"></lifeComponent> </template> <script setup lang='ts'> import { ref, reactive } from 'vue' import typ
阅读全文
posted @ 2025-02-08 16:10
v-model深度使用，双向数据流
摘要：<template> <button @click="flag = !flag">改变model值</button> <div>{{ flag }}</div> <div>{{ text }}</div> // 可以定义多个v-model,语法是v-model:自定义变量 // 可以自定义修饰符 <
阅读全文
posted @ 2025-02-08 15:25
autoImport 插件
摘要：1.功能介绍，自动帮你引入所需要使用的工具 2.安装npm i unplugin-auto-import -D 3.config文件配置 import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' import v
阅读全文
posted @ 2025-02-08 14:09
tsx
摘要：<template> <Tsx name="jsx传值" @toEmit="getEmitValue"></Tsx> {{ msg }} </template> <script setup lang='ts'> import Tsx from './index.tsx' import { ref }
阅读全文
posted @ 2025-02-08 01:31
mitt
摘要：<template> <A></A> <B></B> </template> <script setup lang='ts'> import A from './A.vue' import B from './B.vue' // 兄弟组件之间的通信在Vue3中没有bus，通过插件mitt来完成兄弟之
阅读全文
posted @ 2025-02-07 23:08
provide/inject
摘要：<template> <div>爷爷{{ msg }}</div> <father /> <son /> </template> <script setup lang='ts'> import { ref, provide, readonly } from 'vue' import father f
阅读全文
posted @ 2025-02-07 18:02
transtition 数字动态效果
摘要：<template> <div> <input v-model="num.current" type="number" step="20"/> <div>{{ num.tweenedNumber }}</div> </div> </template> <script setup lang='ts'>
阅读全文
posted @ 2025-02-05 21:37
transtition-group 过渡属性
摘要：<template> <button @click="random">随机</button> 通过move-class属性,设置元素移动时的动画效果 <transition-group tag="div" move-class="mm" class="warp"> <div v-for="item
阅读全文
posted @ 2025-02-05 21:14
transition-group
摘要：<template> <div @click="add">add</div> <div @click="pop">pop</div> transition标签,可以对单个元素进行动画处理,并且只是对元素的添加和删除进行动画处理 transition-group标签,可以对多个元素进行动画处理,并且只
阅读全文
posted @ 2025-02-05 16:02
transition appear
摘要：<template> <div @click="flag = !flag">switch</div> <transition appear appear-from-class="from" appear-active-class="active" appear-to-class="to"> <div
阅读全文
posted @ 2025-02-05 15:26
transition生命周期配合gsap
摘要：<template> <div @click="flag = !flag">switch</div> <transition name="fade" @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter" @enter
阅读全文
posted @ 2025-02-05 15:14
transition配合animate.js
摘要：<template> <div @click="flag = !flag">switch</div> 不根据name来设置动画效果,指定自定义的class名 <transition :duration="{ enter: 1000, leave: 5000 }" enter-active-class
阅读全文
posted @ 2025-02-05 13:44
transition
摘要：<template> <div @click="flag = !flag">switch</div> <transition name="fade"> <div v-if="flag" class="box">Hello World</div> </transition> </template> <
阅读全文
posted @ 2025-02-05 13:07
keepAlive
摘要：<template> include是指缓存的组件,如果不写,则所有组件都会被缓存 exclude是指不缓存的组件,如果不写,则所有组件都会被缓存 <keep-alive include="A"> <A v-if="showA" /> <B v-else /> </keep-alive> <butt
阅读全文
posted @ 2025-02-04 22:49
teleport
摘要：<template> <div class="warp"> // body是指将teleport组件挂载到body上,to可以写元素名/类名/ID名 <teleport to='body'> <TeleportComponent /> </teleport> </div> </template> <
阅读全文
posted @ 2025-02-04 22:23
异步组件defineAsyncComponent - 骨架屏
摘要：<template> 实现骨架屏效果 <Suspense> <template #default> <sync /> </template> <template #fallback> <skeleton /> </template> </Suspense> </template> <script s
阅读全文
posted @ 2025-02-04 21:48
slot全家桶
摘要：<template> <SlotComponent> <!-- <template v-slot>123</template> --> <template #default>不同写法</template> <!-- <template v-slot:middle>456</template> -->
阅读全文
posted @ 2025-02-04 17:38
component的is写法优化
摘要：<template> <component :is='component'></component> </template> <script setup lang='ts'> import { ref, shallowRef } from 'vue' import A from './A.vue'
阅读全文
posted @ 2025-02-04 16:38
组件全局注册和递归调用
摘要：import { createApp } from 'vue' import './style.css' import App from './App.vue' import SelfComponent from './study/selfComponent/component.vue' const
阅读全文
posted @ 2025-02-02 20:09
defineProps,defineEmits,defineExport
摘要：<template> <PropsEmitExport ref="propsEmitExportRef" :father="'标题'" @toFatherEmit="getChildData" @toFastherEmits="getChildDataTwo"></PropsEmitExport>
阅读全文
posted @ 2025-02-02 19:21
bem函数
摘要：$name-space: 'study-7bem'; // 例如element的类名中都有el $block-sel: '-'; // 例如el-中的- $element-sel: '———'; //例如element中对元素添加类名的时候使用的是——— $modfier-sle: '--'; //
阅读全文
posted @ 2025-02-02 16:47
