小兔鲜商02

 npm i @vueuse/core -f

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

import XtxSkeleton from '@/components/library/xtx-skeleton'

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

使用插件:router,vuex也是插件,,小兔鲜商02_第1张图片


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


轮播图组件封装: 只封装轮播效果,不管容器大小
具有的功能:

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

vue3使用插槽: 插槽名用#名字,,,默认插槽外面不能包裹template标签,否则不显示小兔鲜商02_第2张图片


vue动画:
小兔鲜商02_第3张图片
进入前显示样式 v-enter-from ,,进入中显示样式v-enter-active ,,进入完成v-enter-to
小兔鲜商02_第4张图片
将要做动画的元素包裹在
小兔鲜商02_第5张图片
如果有多个Transition ,在transition标签加 name属性,, 那么css类名为: 将 小兔鲜商02_第6张图片
v-enter-form 改成 对应name-enter-form

小兔鲜商02_第7张图片
根据name做不同的动画

你可能感兴趣的:(vue3)