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
随笔分类 - vue3 / learn
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
