Geek Time

[PaulChess]

前端 Knowledge 一览:

[PaulChess]

vue3: defineProps({}) defineEmists()

[PaulChess]

vue3的 v-model:

let props = defineProps({ 
  modelValue: Number
})
let emits = defineEmits(['update:modelValue'])

// emit
function update(num) {
  emits('update:modelValue', num);
}

[PaulChess]

[PaulChess]

vue 动画

<transition name="fade">
  <h1 v-if="showTitle">你好 Vue3</h1>
</transition>

这里的 v 就是我们设置的 name 属性，
标签在进入和离开的时候，会有 fade-enter-active 和 fade-leave-active 的 class，进入的开始和结束会有 fade-enter-from 和 face-enter-to 两个 class。

/* 过程类 */
.fade-enter-active,
.fade-leave-active {
  transition: opacity .5s linear;
}

/* 关键节点类 */
.fade-enter-from,
.fade-leave-to {
  opacity: 0;  
}

vue 路由动效 basic code:

<router-view v-slot="{ Component }">
  <transition name="fade" mode="out-in">
    <component :is="Component" />
  </transition>
</router-view>

.fade-enter-active,
.fade-leave-active {
  transition: opacity .5s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0
}

4 个 Vue 路由过渡动效