Open PaulChess opened 2 years ago
vue3: defineProps({}) defineEmists()
vue3的 v-model
:
let props = defineProps({
modelValue: Number
})
let emits = defineEmits(['update:modelValue'])
// emit
function update(num) {
emits('update:modelValue', num);
}
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
}
前端 Knowledge 一览: