日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

#component

• Props：

• is - string | Component

• 用法：

渲染一個“元組件”為動態(tài)組件。依 is 的值，來決定哪個組件被渲染。is 的值是一個字符串，它既可以是 HTML 標簽名稱也可以是組件名稱。

• 參考：動態(tài)組件

#transition

• Props：

• name - string 用于自動生成 CSS 過渡類名。例如：name: 'fade' 將自動拓展為 .fade-enter，.fade-enter-active 等。
• appear - boolean，是否在初始渲染時使用過渡。默認為 false。
• persisted - boolean。如果是 true，表示這是一個不真實插入/刪除元素的轉(zhuǎn)換，而是切換顯示/隱藏狀態(tài)。過渡鉤子被注入，但渲染器將跳過。相反，自定義指令可以通過調(diào)用注入的鉤子 (例如 v-show) 來控制轉(zhuǎn)換。
• css - boolean。是否使用 CSS 過渡類。默認為 true。如果設(shè)置為 false，將只通過組件事件觸發(fā)注冊的 JavaScript 鉤子。
• type - string。指定過渡事件類型，偵聽過渡何時結(jié)束。有效值為 "transition" 和 "animation"。默認 Vue.js 將自動檢測出持續(xù)時間長的為過渡事件類型。
• mode - string 控制離開/進入過渡的時間序列。有效的模式有 "out-in" 和 "in-out"；默認同時進行。
• duration - number | { enter : number, leave : number }。指定過渡的持續(xù)時間。默認情況下，Vue 會等待過渡所在根元素的第一個 transitionend 或 animationend 事件。
• enter-from-class - string
• leave-from-class - string
• appear-class - string
• enter-to-class - string
• leave-to-class - string
• appear-to-class - string
• enter-active-class - string
• leave-active-class - string
• appear-active-class - string

• 事件：

• before-enter
• before-leave
• enter
• leave
• appear
• after-enter
• after-leave
• after-appear
• enter-cancelled
• leave-cancelled (僅 v-show)
• appear-cancelled

• 用法：

元素作為單個元素/組件的過渡效果。 只會把過渡效果應(yīng)用到其包裹的內(nèi)容上，而不會額外渲染 DOM 元素，也不會出現(xiàn)在可被檢查的組件層級中。

  
  
    
toggled content
  

  
  
  
    
  

  
  
  

    
      
toggled content
    
  

  const app = Vue.createApp({
    ...
    methods: {
      transitionComplete (el) {
        // 因為傳遞了'el'的DOM元素作為參數(shù)
      }
    }
    ...
  })

  
  app.mount('#transition-demo')

• 參考： 進入 & 離開過渡

#transition-group

• Props：

• tag - string，默認為 span。
• move-class - 覆蓋移動過渡期間應(yīng)用的 CSS 類。
• 除了 mode，其他 attribute 和 相同。

• 事件：

• 事件和 相同。

• 用法：

元素作為多個元素/組件的過渡效果。 渲染一個真實的 DOM 元素。默認渲染 ，可以通過 tag attribute 配置哪個元素應(yīng)該被渲染。

注意，每個 的子節(jié)點必須有獨立的 key，動畫才能正常工作

支持通過 CSS transform 過渡移動。當一個子節(jié)點被更新，從屏幕上的位置發(fā)生變化，它會被應(yīng)用一個移動中的 CSS 類 (通過 name attribute 或配置 move-class attribute 自動生成)。如果 CSS transform property 是“可過渡”property，當應(yīng)用移動類時，將會使用 FLIP 技術(shù)使元素流暢地到達動畫終點。

  
    

      {{ item.text }}
    
  

• 參考： 列表過渡

#keep-alive

• Props：

• include - string | RegExp | Array。只有名稱匹配的組件會被緩存。
• exclude - string | RegExp | Array。任何名稱匹配的組件都不會被緩存。
• max - number | string。最多可以緩存多少組件實例。

• 用法：

包裹動態(tài)組件時，會緩存不活動的組件實例，而不是銷毀它們。和 相似， 是一個抽象組件：它自身不會渲染一個 DOM 元素，也不會出現(xiàn)在組件的父組件鏈中。

當組件在 內(nèi)被切換，它的 activated 和 deactivated 這兩個生命周期鉤子函數(shù)將會被對應(yīng)執(zhí)行。

主要用于保留組件狀態(tài)或避免重新渲染。

注意， 是用在其一個直屬的子組件被切換的情形。如果你在其中有 v-for 則不會工作。如果有上述的多個條件性的子元素， 要求同時只有一個子元素被渲染。

• include 和 exclude

The include 和 exclude prop 允許組件有條件地緩存。二者都可以用逗號分隔字符串、正則表達式或一個數(shù)組來表示：

匹配首先檢查組件自身的 name 選項，如果 name 選項不可用，則匹配它的局部注冊名稱 (父組件 components 選項的鍵值)。匿名組件不能被匹配。

• max

最多可以緩存多少組件實例。一旦這個數(shù)字達到了，在新實例被創(chuàng)建之前，已緩存組件中最久沒有被訪問的實例會被銷毀掉。

WARNING

不會在函數(shù)式組件中正常工作，因為它們沒有緩存實例。

• 參考： 動態(tài)組件 - keep-alive

#slot

• Props：

• name - string，用于具名插槽

• 用法：

元素作為組件模板之中的內(nèi)容分發(fā)插槽。 元素自身將被替換。

詳細用法，請參考下面教程的鏈接。

• 參考： 通過插槽分發(fā)內(nèi)容

#teleport

• Props：

• to - string。需要 prop，必須是有效的查詢選擇器或 HTMLElement (如果在瀏覽器環(huán)境中使用)。指定將在其中移動 內(nèi)容的目標元素

• disabled - boolean。此可選屬性可用于禁用 的功能，這意味著其插槽內(nèi)容將不會移動到任何位置，而是在您在周圍父組件中指定了 的位置渲染。

請注意，這將移動實際的 DOM 節(jié)點，而不是被銷毀和重新創(chuàng)建，并且它還將保持任何組件實例的活動狀態(tài)。所有有狀態(tài)的 HTML 元素 (即播放的視頻) 都將保持其狀態(tài)。

• 參考： Teleport 組件

文章標題：創(chuàng)新互聯(lián)VUE3教程：Vue3.0內(nèi)置組件
文章地址：http://www.dlmjj.cn/article/cdeoiio.html