當前位置：首頁 > 前端技术 > vue >内容正文

vue

VUE内置组件 vue使用插槽分发内容组件缓存实现动画的过渡效果

發布時間：2024/9/30 vue 75 豆豆

生活随笔收集整理的這篇文章主要介紹了 VUE内置组件 vue使用插槽分发内容组件缓存实现动画的过渡效果小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

動態組件

除了允許用戶自定義組件之外，Vue還內置了一些組件，以幫助用戶高效地開發一些功能。本章將帶領大家一起來了解這些內置組件。
某些時候需要動態切換頁面部分區域的視圖，這個時候內置組件component就顯得尤為重要。 component接收一個名為is的屬性，is的值應為在父組件中注冊過的組件的名稱，用法如下：
< !-- view為變量 -->

下面來看一個示例，代碼如下：

效果：

點擊兩個組件會呈現不同的字
定義了Home和Aboat兩個組件，并使用components選項將其注冊到實例vm中，初始時設置is的值為Home:

data () {
return {
view: ‘Home’
}
},

使用插槽分發內容

通過props選項，組件可以接收多態的數據，如何接收多態的DOM結構呢？　實現方法有很多，比如使用props配合v-html等。這里，Vue提供了一種更簡單的選擇，使用內置組件slot（插槽）分發內容。 在定義多個插槽時，我們可以使用name屬性對其進行區分，如果沒有指定name屬性，則Vue會將所有的插槽內容置于默認插槽default中。下面來看一段示例代碼：

<div id="app"><slot-test><p>使用插槽分發內容</p><h1 slot="header">插槽測試!</h1><p>在組件中，沒有指定插槽名稱的元素將被置于默認插槽中</p><p slot="none">指定到不存在的插槽中的內容將不會被顯示</p></slot-test></div><script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.min. js"></script><script type="text/javascript">let SlotTest = {template: '<div>' +'<slot name="header">相當于占位元素，因此這些文字也不會被渲染</slot>' + //具名插槽'<slot></slot>' + // 默認插槽'</div>'}let vm = new Vue({ // Vue實例el: '#app',components: { SlotTest }})</script>

是通過 < slot name=“header”>相當于占位元素，因此這些文字也不會被渲染’ 和 < h1 slot=“header”>插槽測試!
來進行渲染的，可以看到 < p slot=“none”>指定到不存在的插槽中的內容將不會被顯示< /p> 這句話并沒有顯示出來。說明父組件的元素被成功分發導對應插槽中。
VUE還提供了作用域插槽slot-scope(在VUE2.5以下版本為scope,只可用于template元素）我們可以用slot-scope獲取子組件回傳的數據，用來在父組件中執行多態的渲染或響應。

一個實例：

<body> <style>#app {color: #206fbf;font-family: Roboto, sans-serif;}.label {display: inline-block;min-width: 160px;} </style> <style>.tabs {margin: 0;padding: 0;list-style: none;}.per-tab {display: inline-block;width: 120px;line-height: 32px;border-left: 1px solid #583b3b;border-top: 1px solid #e21a1a;}.per-tab:last-child {border-right: 1px solid #7f0303;}.tab-content {height: 240px;border: 1px solid #0f7f8d;} </style> <style>.btn {outline: none;border: none;cursor: pointer;padding: 5px 12px;}.btn-text {color: #409eff;background-color:#42b983;}/*這個backgroundcolor是改變切換標記的背景顏色*/.btn-text:hover {color: #ff66b5;}/*}這個是改變點擊切換標記之后水果顯示的顏色*/. fly-table {width: 400px;text-align: left;line-height: 42px;border: 1px solid #b37f3f;user-select: none;} </style> <div id="app"><h2>Fly Table Component</h2><buttonclass="btn btn-text"title="點擊使數組倒序"@click="handleReverse"> 倒序</button><fly-table:fields=" fields":goods="goods"><template slot-scope="{ row, col }"><span v-if="col.prop !== 'operate'">{{ row[col.prop] }}</span><buttonclass="btn btn-text"v-else@click="handleMarked(row)">切換標記</button></template> </fly-table> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.min.js"></script> <script type="text/javascript">let FlyTable = {props: { // 組件接收從父組件傳入的數據fields: {type: Array,default () {return []}},goods: {type: Array,default () {return []}}},template: function () {return '<table class=" fly-table">\n' +' <tr>\n' +' <th\n' +' v-for="(col, cIndex) in fields"\n' +' :key="cIndex">\n' +' {{ col.label }}\n' +' </th>\n' +' </tr>\n' +' <tr\n' +' v-for="(row, rIndex) in goods"\n' +' :key="rIndex"\n' +' :style="{color: row.isMarked ? \'#ea4335\' : \'\'}">\n' +' <td\n' +' style="border-top: 1px solid #eee"\n' +' v-for="(col, cIndex) in fields"\n' +' :key="cIndex">\n' +// slot應寫在子組件中，用于接收父組件分發的內容' <slot :row="row" :col="col"></slot>\n' +' </td>\n' +' </tr>\n' +' </table>'}()}// 聲明 Vue 實例let vm = new Vue({el: '#app',components: { FlyTable },data () {return {fields: [{label: '名稱',prop: 'name'},{label: '數量',prop: 'quantity'},{label: '價格',prop: 'price'},{label: '',prop: 'operate'}],goods: [{name: '蘋果',quantity: 200,price: 6.8,isMarked: false},{name: '西瓜',quantity: 50,price: 4.8,isMarked: false},{name: '榴蓮',quantity: 0,price: 22.8,isMarked: false}]}},methods: {handleReverse () {this.goods.reverse()},handleMarked (row) {row.isMarked = !row.isMarked}}}) </script></body>

這段代碼中定義了fly-table組件，它接收fields和goods屬性，用以動態顯示表格數據。在調用fly-table時，還提供了倒序數組的功能，并使用slot-scope根據數據的不同進行多態的視圖渲染。顯然，在之前的代碼改造之后，fly-table組件的復用性更好

組件的緩存

keep-alive是一個抽象組件，即它既不渲染任何DOM元素，也不會出現在組件結構樹中。我們可以使用它緩存一些非動態的組件實例（沒有或不需要數據變化），以保留組件狀態或減少重新渲染的開銷。keep-alive應出現在組件被移除之后需要再次掛載的地方，比如使用動態組件時：
　
　

或者使用v-if時：

它還可以接收include和exclude兩個props屬性：
●include字符串或正則表達式。只有匹配的組件會被緩存。 ●exlude字符串或正則表達式。任何被匹配的組件將不會被緩存。
當組件在keep-alive內被切換時，它的activated和deactivated這兩個生命周期鉤子函數將會被執行。

過渡效果

單節點的過渡

Vue提供了標簽為transition的內置組件，在下列情形中，我們可以給任何元素和組件添加進入／離開時的過渡動畫：
　 ●元素或組件初始渲染時
　 ●元素或組件顯示／隱藏時（使用v-if或v-show進行條件渲染時）
　 ●元素或組件切換時 Vue允許用戶使用CSS和JS兩種方式來定義過渡效果。在使用CSS過渡時，我們需要預置符合Vue規則的帶樣式的類名，這些類名用于定義過渡不同階段時的樣式：
　 ●v-enter：定義進入過渡的開始狀態。在元素被插入前生效，被插入后的下一幀移除。
　 ●v-enter-active：定義進入過渡生效時的狀態。在整個進入過渡階段中應用，在元素被插入之前生效，在過渡／動畫完成之后移除。這個類可以用來定義進入過渡的過程時間、延遲和曲線函數等。
　 ●v-enter-to：（Vue 2.1.8及以上版本）定義進入過渡結束時的狀態。在元素被插入后的下一幀生效（此時v-enter被移除），在過渡／動畫完成之后移除。
　 ●v-leave：定義離開過渡的開始狀態。在離開過渡被觸發時立刻生效，下一幀被移除。
　 ●v-leave-active：定義離開過渡生效時的狀態。在整個離開過渡的階段中應用，在離開過渡被觸發時立刻生效，在過渡／動畫完成之后移除。這個類可以被用來定義離開過渡的過程時間、延遲和曲線函數。
　 ●v-leave-to：（Vue 2.1.8版及以上版本）定義離開過渡的結束狀態。在離開過渡被觸發之后下一幀生效（此時v-leave被移除），在過渡／動畫完成之后移除。當實例中存在多個不同的動畫效果時，我們可以使用自定義前綴替換v-，比如使用slide-enter替換v-enter，不過這需要賦予transition元素name屬性。下面來看一個示例，代碼如下：

<body> <style>/* 在此處聲明過渡樣式類，從一個狀態過渡到另一個狀態 */.v-enter,.v-leave-to {opacity: 0;}.v-enter-active,.v-leave-active {transition-property: opacity; /* 過渡屬性 */transition-delay: 100ms; /* 延遲 */transition-duration: 900ms; /* 過渡時長 */transition-timing-function: linear; /* 貝塞爾曲線（動畫速度曲線） */}.rotate-enter,.rotate-leave-to {transform: rotateY(90deg);}.rotate-enter-active,.rotate-leave-active {transform-origin: left;transition: transform 1s linear;}</style><div id="app"><button @click="isHidden = !isHidden"> {{ isHidden?'顯示':'隱藏' }}</button><transition><p v-if="!isHidden">使用默認前綴的過渡</p></transition><transition :name="transtionName"><p v-if="!isHidden">使用rotate前綴的過渡</p></transition></div><script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.min.js"></script><script type="text/javascript">// 聲明 Vue 實例let vm = new Vue({el: '#app',data () {return {isHidden: true,transtionName: 'rotate' /*// 如果在運行時，將transitionName改為v會怎樣？*/}}})</script></body>

效果：

點擊顯示之后，字體慢慢浮現

除了transition之外，我們還可以使用CSS中的animation，或者直接使用第三方動畫庫（如Animate.css）來實現過渡動畫。借助于Animate.css，我們可以用十分簡短的代碼來實現一個酷炫的動畫效果，
由于這些動畫庫有著不同的類名規則，無法與Vue默認的類名規則配合使用，因此Vue為其提供了兼容方案，允許用戶自定義過渡的類名，這些類名的優先級將高于默認的類名。我們可以使用以下特性來自定義過渡類名：
●enter-class
●enter-active-class
●enter-to-class
●leave-class
●leave-active-class
●leave-to-class
下面來看一段示例代碼：

<body> <linkrel="stylesheet"href="https://cdnjs.cloud flare.com/ajax/libs/animate.css/3.5.2/animate.min.css"><script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.min.js"></script><style>.inline-block {display: inline-block;}.rotate-enter-active {animation: selfRotateIn 1s;}.rotate-leave-active {animation: selfRotateOut 1s;}/* 命名避免與Animate.css沖突 */@keyframes selfRotateIn {0% {opacity: 0;transform: rotateZ(-180deg);}100% {opacity: 1;transform: rotateZ(0deg);}}@keyframes selfRotateOut {0% {opacity: 1;transform: rotateZ(0deg);}100% {opacity: 0;transform: rotateZ(180deg);}}</style><div id="app"><button @click="isHidden = !isHidden">{{ isHidden ? '顯示' : '隱藏' }}</button><transition name="rotate"> <span class="inline-block" v-if="!isHidden">自定義的動畫</span></transition><transitionname="custom"enter-active-class="animated rotateIn"leave-active-class="animated rotateOut"><span class="inline-block" v-if="!isHidden">animate.css動畫</span><script type="text/javascript">// 聲明 Vue 實例let vm = new Vue({el: '#app',data () {return {isHidden: true}}})</script></body>

效果:

點擊顯示時字體旋轉浮現

節選自–《vue.js從入門到實戰》

總結

以上是生活随笔為你收集整理的VUE内置组件 vue使用插槽分发内容组件缓存实现动画的过渡效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： python元组字符串字典习题+总
下一篇： npm安装vue 解决VUE无法打开图形