小兔鲜商02

js 复制代码
 npm i @vueuse/core -f

vue插件使用: 许多公用的全局组件,,可以通过插件注册进去,就不用一个一个导入组件,,

js 复制代码
import XtxSkeleton from '@/components/library/xtx-skeleton'

export default {
  install (app) {
    // 导入组件
    app.component(XtxSkeleton.name, XtxSkeleton)
  }
}

使用插件:router,vuex也是插件,,


git checkout . : 已经提交的代码,不想要了,回退


轮播图组件封装: 只封装轮播效果,不管容器大小

具有的功能:

  • 自动轮播
  • 鼠标移入停止轮播,鼠标移出开始轮播
  • 指示器修改
  • next,prev 按钮
  • 销毁组件的时候,清空定时器 onUnmounted钩子
    注意:每次执行autoplay之前,,先将之前的定时器清空,,再重新设置自动轮播的定时器

vue3使用插槽: 插槽名用#名字,,,默认插槽外面不能包裹template标签,否则不显示


vue动画:

进入前显示样式 v-enter-from ,,进入中显示样式v-enter-active ,,进入完成v-enter-to

将要做动画的元素包裹在<Transition>

如果有多个Transition ,在transition标签加 name属性,, 那么css类名为: 将

v-enter-form 改成 对应name-enter-form

根据name做不同的动画

相关推荐
Jinuss8 小时前
Vue3源码reactivity响应式篇Reflect和Proxy详解
前端·vue3
知识分享小能手3 天前
Vue3 学习教程,从入门到精通,Axios 在 Vue 3 中的使用指南(37)
前端·javascript·vue.js·学习·typescript·vue·vue3
伍哥的传说3 天前
Mitt 事件发射器完全指南:200字节的轻量级解决方案
vue.js·react.js·vue3·mitt·组件通信·事件管理·事件发射器
尚学教辅学习资料3 天前
Vue3从入门到精通:5.2 Vue3构建工具与性能优化深度解析
性能优化·vue3·入门到精通
加班是不可能的,除非双倍日工资4 天前
css预编译器实现星空背景图
前端·css·vue3
har01d8 天前
【CSS3】录音中。。。
前端·css·vue.js·vue·vue3·css3
知识分享小能手9 天前
Vue3 学习教程,从入门到精通,Vue 3 + Tailwind CSS 全面知识点与案例详解(31)
前端·javascript·css·vue.js·学习·typescript·vue3
青柠代码录17 天前
【ElementPlus】深入探索ElementPlus:前端界面的全能组件库
前端·vue3·elementplus
知识分享小能手19 天前
Vue3 学习教程,从入门到精通,Vue3 中使用 Axios 进行 Ajax 请求的语法知识点与案例代码(23)
前端·javascript·vue.js·学习·ajax·vue·vue3
咔咔一顿操作20 天前
Vue 3 入门教程7 - 状态管理工具 Pinia
前端·javascript·vue.js·vue3