建站
咨詢
售后
建站咨詢
新聞中心
#component
- Props：
is-string | Component
- 用法：
渲染一個(gè)“元組件”為動(dòng)態(tài)組件。依 is 的值，來(lái)決定哪個(gè)組件被渲染。is 的值是一個(gè)字符串，它既可以是 HTML 標(biāo)簽名稱也可以是組件名稱。
- 參考：動(dòng)態(tài)組件
#transition
- Props：
name-string用于自動(dòng)生成 CSS 過(guò)渡類名。例如：name: 'fade'將自動(dòng)拓展為.fade-enter，.fade-enter-active等。appear-boolean，是否在初始渲染時(shí)使用過(guò)渡。默認(rèn)為false。persisted-boolean。如果是 true，表示這是一個(gè)不真實(shí)插入/刪除元素的轉(zhuǎn)換，而是切換顯示/隱藏狀態(tài)。過(guò)渡鉤子被注入，但渲染器將跳過(guò)。相反，自定義指令可以通過(guò)調(diào)用注入的鉤子 (例如v-show) 來(lái)控制轉(zhuǎn)換。css-boolean。是否使用 CSS 過(guò)渡類。默認(rèn)為true。如果設(shè)置為false，將只通過(guò)組件事件觸發(fā)注冊(cè)的 JavaScript 鉤子。type-string。指定過(guò)渡事件類型，偵聽(tīng)過(guò)渡何時(shí)結(jié)束。有效值為"transition"和"animation"。默認(rèn) Vue.js 將自動(dòng)檢測(cè)出持續(xù)時(shí)間長(zhǎng)的為過(guò)渡事件類型。mode-string控制離開(kāi)/進(jìn)入過(guò)渡的時(shí)間序列。有效的模式有"out-in"和"in-out"；默認(rèn)同時(shí)進(jìn)行。duration-number | {enter: number,leave: number }。指定過(guò)渡的持續(xù)時(shí)間。默認(rèn)情況下，Vue 會(huì)等待過(guò)渡所在根元素的第一個(gè)transitionend或animationend事件。enter-from-class-stringleave-from-class-stringappear-class-stringenter-to-class-stringleave-to-class-stringappear-to-class-stringenter-active-class-stringleave-active-class-stringappear-active-class-string
- 事件：
before-enterbefore-leaveenterleaveappearafter-enterafter-leaveafter-appearenter-cancelledleave-cancelled(僅v-show)appear-cancelled
- 用法：
toggled content
toggled content
const app = Vue.createApp({
...
methods: {
transitionComplete (el) {
// 因?yàn)閭鬟f了'el'的DOM元素作為參數(shù)
}
}
...
})
app.mount('#transition-demo')- 參考： 進(jìn)入 & 離開(kāi)過(guò)渡
#transition-group
- Props：
tag-string，默認(rèn)為span。move-class- 覆蓋移動(dòng)過(guò)渡期間應(yīng)用的 CSS 類。- 除了
mode，其他 attribute 和
- 事件：
- 事件和
- 用法：
，可以通過(guò) tag attribute 配置哪個(gè)元素應(yīng)該被渲染。
注意，每個(gè)
name attribute 或配置 move-class attribute 自動(dòng)生成)。如果 CSS transform property 是“可過(guò)渡”property，當(dāng)應(yīng)用移動(dòng)類時(shí)，將會(huì)使用 FLIP 技術(shù)使元素流暢地到達(dá)動(dòng)畫終點(diǎn)。
{{ item.text }}
- 參考： 列表過(guò)渡
#keep-alive
- Props：
include-string | RegExp | Array。只有名稱匹配的組件會(huì)被緩存。exclude-string | RegExp | Array。任何名稱匹配的組件都不會(huì)被緩存。max-number | string。最多可以緩存多少組件實(shí)例。
- 用法：
當(dāng)組件在 activated 和 deactivated 這兩個(gè)生命周期鉤子函數(shù)將會(huì)被對(duì)應(yīng)執(zhí)行。
主要用于保留組件狀態(tài)或避免重新渲染。
注意，v-for 則不會(huì)工作。如果有上述的多個(gè)條件性的子元素，
include和exclude
The include 和 exclude prop 允許組件有條件地緩存。二者都可以用逗號(hào)分隔字符串、正則表達(dá)式或一個(gè)數(shù)組來(lái)表示：
匹配首先檢查組件自身的 name 選項(xiàng)，如果 name 選項(xiàng)不可用，則匹配它的局部注冊(cè)名稱 (父組件 components 選項(xiàng)的鍵值)。匿名組件不能被匹配。
max
最多可以緩存多少組件實(shí)例。一旦這個(gè)數(shù)字達(dá)到了，在新實(shí)例被創(chuàng)建之前，已緩存組件中最久沒(méi)有被訪問(wèn)的實(shí)例會(huì)被銷毀掉。
WARNING
- 參考： 動(dòng)態(tài)組件 - keep-alive
#slot
- Props：
name-string，用于具名插槽
- 用法：
詳細(xì)用法，請(qǐng)參考下面教程的鏈接。
- 參考： 通過(guò)插槽分發(fā)內(nèi)容
#teleport
- Props：
to-string。需要 prop，必須是有效的查詢選擇器或 HTMLElement (如果在瀏覽器環(huán)境中使用)。指定將在其中移動(dòng)
disabled-boolean。此可選屬性可用于禁用
請(qǐng)注意，這將移動(dòng)實(shí)際的 DOM 節(jié)點(diǎn)，而不是被銷毀和重新創(chuàng)建，并且它還將保持任何組件實(shí)例的活動(dòng)狀態(tài)。所有有狀態(tài)的 HTML 元素 (即播放的視頻) 都將保持其狀態(tài)。
- 參考： Teleport 組件
本文名稱：創(chuàng)新互聯(lián)VUE3教程：Vue3.0內(nèi)置組件
當(dāng)前URL：http://m.fisionsoft.com.cn/article/cdeoiio.html
