整合營銷服務(wù)商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
vue路由跳轉(zhuǎn)有四種方式
<router-link :to="{name:'home'}">
<router-link :to="{path:'/home'}"> //name,path都行, 建議用name
// 注意：router-link中鏈接如果是'/'開始就是從根路由開始，如果開始不帶'/'，則從當(dāng)前路由開始。this.$router.push('/home')
this.$router.push({name:'home'})
this.$router.push({path:'/home'})<router-link :to="{name:'home', params: {id:1}}">
// params傳參數(shù) (類似post)
// 路由配置 path: "/home/:id" 或者 path: "/home:id"
// 不配置path ,第一次可請求,刷新頁面id會消失
// 配置path,刷新頁面id會保留
// html 取參 $route.params.id
// script 取參 this.$route.params.id
<router-link :to="{name:'home', query: {id:1}}">
// query傳參數(shù) (類似get,url后面會顯示參數(shù))
// 路由可不配置
// html 取參 $route.query.id
// script 取參 this.$route.query.idthis.$router.go(n)
this.router.go(n)this.router.go(n)this.router.go(n) 向前或者向后跳轉(zhuǎn)n個頁面，n可為正整數(shù)或負(fù)整數(shù)在用router-link標(biāo)簽來跳轉(zhuǎn)頁面嗎？
out！ 今天就帶你解鎖 Vue 的編程式導(dǎo)航，用 Javascript 代碼輕松實現(xiàn)頁面跳轉(zhuǎn)，讓你的項目更靈活、更強大！
基本跳轉(zhuǎn)：
1. 導(dǎo)入路由實例：
首先，在你的 Vue 組件中導(dǎo)入 vue-router 實例。
javascriptimport { useRouter } from 'vue-router';
2. 定義路由方法：
使用 useRouter() Hook 獲取路由實例，并定義跳轉(zhuǎn)方法。
3. 點擊按鈕觸發(fā)跳轉(zhuǎn)：
在你的按鈕元素上添加 @click 事件監(jiān)聽器，調(diào)用跳轉(zhuǎn)方法。
示例代碼：
html<template>
<button @click="goToHome">前往首頁</button>
</template>
<script>
import { useRouter } from 'vue-router';
export default {
setup() {
const router = useRouter();
const goToHome = () => {
router.push('/'); //跳轉(zhuǎn)到首頁
};
return {
goToHome
}
}
};
</script>
兩種語法詳解：
1. router.push(location):
2. router.replace(location):
代碼示例：
javascript// 使用字符串路徑跳轉(zhuǎn)
router.push('/profile');
// 使用對象跳轉(zhuǎn)，并傳遞參數(shù)
router.replace({ path: '/products', query: { id: 123 } });
// 使用命名路由跳轉(zhuǎn)
router.push({ name: 'profile' });
編程式導(dǎo)航的優(yōu)勢：
希望這篇文章能幫助你快速上手 Vue 的編程式導(dǎo)航，靈活操控頁面跳轉(zhuǎn)，讓你的應(yīng)用更具交互性！
歡迎在評論區(qū)分享你的導(dǎo)航技巧和創(chuàng)意，一起探索 Vue 的無限可能！
#Java后端需要學(xué)習(xí)哪些技術(shù)#
插入，更新或從DOM中刪除項目時，Vue提供了多種應(yīng)用轉(zhuǎn)換效果的方法。這包括以下工具：
在這個頁面上，我們只會介紹進入，離開和列表轉(zhuǎn)換，但您可以看到管理狀態(tài)轉(zhuǎn)換的下一部分。
過渡單個元素/組件
Vue提供了一個transition包裝組件，允許您在以下上下文中為任何元素或組件添加進入/離開轉(zhuǎn)換：
這就是一個例子：
<div id="demo">
<button v-on:click="show = !show">
Toggle
</button>
<transition name="fade">
<p v-if="show">hello</p>
</transition>
</div>
new Vue({
el: '#demo',
data: {
show: true
}
})
.fade-enter-active, .fade-leave-active {
transition: opacity .5s
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
opacity: 0
}
切換
hello
transition插入或移除組件中包含的元素時，會發(fā)生以下情況：
1. Vue會自動嗅探目標(biāo)元素是否有CSS轉(zhuǎn)換或動畫應(yīng)用。如果是這樣，CSS轉(zhuǎn)換類將在適當(dāng)?shù)臅r機添加/刪除。
2. 如果轉(zhuǎn)換組件提供了JavaScript鉤子，這些鉤子將在適當(dāng)?shù)臅r機調(diào)用。
3. 如果沒有檢測到CSS轉(zhuǎn)換/動畫，并且沒有提供JavaScript鉤子，插入和/或刪除的DOM操作將在下一幀立即執(zhí)行（注意：這是一個瀏覽器動畫框架，與Vue的概念不同nextTick）.Transition ClassesThere有六類申請進入/離開轉(zhuǎn)換。
4. v-enter：輸入的起始狀態(tài)。插入元素之前添加，插入元素后刪除一幀。
5. v-enter-active：輸入的活動狀態(tài)。在整個進入階段應(yīng)用。插入元素之前添加，當(dāng)過渡/動畫完成時刪除。該類可用于定義輸入轉(zhuǎn)換的持續(xù)時間，延遲和緩動曲線。
6. v-enter-to：僅適用于版本2.1.8+。結(jié)束進入狀態(tài)。插入元素后添加一個框架（同時v-enter刪除），當(dāng)轉(zhuǎn)換/動畫完成時刪除。
7. v-leave：開始狀態(tài)請假。當(dāng)離開轉(zhuǎn)換被觸發(fā)時立即添加，在一幀后刪除。
8. v-leave-active：離開的活動狀態(tài)。在整個離開階段應(yīng)用。當(dāng)離開轉(zhuǎn)換被觸發(fā)時立即添加，當(dāng)轉(zhuǎn)換/動畫結(jié)束時刪除。該類可用于定義離開轉(zhuǎn)換的持續(xù)時間，延遲和緩動曲線。
9. v-leave-to：僅適用于版本2.1.8+。結(jié)束離開狀態(tài)。加入一個幀一個離開轉(zhuǎn)換被觸發(fā)（在相同的時間之后v-leave被移除），當(dāng)過渡/動畫完成除去。
這些類將與過渡的名稱為前綴。這里的v-前綴是你使用<transition>沒有名字的元素時的默認(rèn)值。如果你使用<transition name="my-transition">例子，那么這個v-enter類將會是my-transition-enter。v-enter-active和v-leave-active讓您能夠為進入/離開轉(zhuǎn)換指定不同的緩動曲線，您將在下面的部分中看到一個示例.CSS轉(zhuǎn)換一種最常見的轉(zhuǎn)換類型使用CSS轉(zhuǎn)換。下面是一個例子：
<button @click="show = !show"> Toggle render </button> <transition name="slide-fade"> <p v-if="show">hello</p> </transition> </div>new Vue({ el: '#example-1', data: { show: true } })/* Enter and leave animations can use different */ /* durations and timing functions. */ .slide-fade-enter-active { transition: all .3s ease; } .slide-fade-leave-active { transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0); } .slide-fade-enter, .slide-fade-leave-to /* .slide-fade-leave-active below version 2.1.8 */ { transform: translateX(10px); opacity: 0; }
CSS動畫CSS動畫以與CSS轉(zhuǎn)換相同的方式應(yīng)用，區(qū)別在于v-enter不是在插入元素后立即移除，而是在animationend事件中。這里是一個例子，為了簡潔起見，省略了前綴CSS規(guī)則：<div id="example-2"> <button @click="show = !show">Toggle show</button> <transition name="bounce"> <p v-if="show">Look at me!</p> </transition> </div>new Vue({ el: '#example-2', data: { show: true } }).bounce-enter-active { animation: bounce-in .5s; } .bounce-leave-active { animation: bounce-in .5s reverse; } @keyframes bounce-in { 0% { transform: scale(0); } 50% { transform: scale(1.5); } 100% { transform: scale(1); } }
自定義轉(zhuǎn)換類您還可以通過提供以下屬性來指定自定義轉(zhuǎn)換類：
10. enter-class
11. enter-active-class
12. enter-to-class (2.1.8+)
13. leave-class
14. leave-active-class
15. leave-to-class (2.1.8+)
這些將覆蓋傳統(tǒng)的類名稱。當(dāng)您想要將Vue的轉(zhuǎn)換系統(tǒng)與現(xiàn)有的CSS動畫庫（如Animate.css）結(jié)合使用時，此功能特別有用。
這是一個例子：
<link rel="stylesheet" type="text/css">
<div id="example-3">
<button @click="show = !show">
Toggle render
</button>
<transition
name="custom-classes-transition"
enter-active-class="animated tada"
leave-active-class="animated bounceOutRight"
>
<p v-if="show">hello</p>
</transition>
</div>
new Vue({
el: '#example-3',
data: {
show: true
}
})
一起使用轉(zhuǎn)換和動畫
Vue需要附加事件監(jiān)聽器才能知道轉(zhuǎn)換何時結(jié)束。它可以是transitionend或者animationend，取決于所應(yīng)用的CSS規(guī)則的類型。如果您只使用其中一種，Vue可以自動檢測正確的類型。
然而，在某些情況下，您可能希望同時擁有兩個元素，例如由Vue觸發(fā)的CSS動畫，以及懸停時的CSS過渡效果。在這些情況下，您必須在type屬性中明確聲明您想要Vue關(guān)心的類型，其值為animation或transition。
顯式過渡時間
New in 2.2.0+
在大多數(shù)情況下，Vue可以自動計算轉(zhuǎn)換完成的時間。默認(rèn)情況下，Vue等待根轉(zhuǎn)換元素上的第一個transitionend或animationend事件。然而，這可能并不總是需要的 - 例如，我們可能有一個編排的轉(zhuǎn)換序列，其中一些嵌套的內(nèi)部元素具有比根轉(zhuǎn)換元素延遲的轉(zhuǎn)換或更長的轉(zhuǎn)換持續(xù)時間。
在這種情況下，您可以使用組件duration上的prop 指定明確的轉(zhuǎn)換持續(xù)時間（以毫秒為單位）<transition>：
<transition :duration="1000">...</transition>
您還可以為輸入和保留持續(xù)時間指定單獨的值：
<transition :duration="{ enter: 500, leave: 800 }">...</transition>
JavaScript Hooks
你也可以在屬性中定義JavaScript hooks：
<transition
v-on:before-enter="beforeEnter"
v-on:enter="enter"
v-on:after-enter="afterEnter"
v-on:enter-cancelled="enterCancelled"
v-on:before-leave="beforeLeave"
v-on:leave="leave"
v-on:after-leave="afterLeave"
v-on:leave-cancelled="leaveCancelled"
>
<!-- ... -->
</transition>
// ...
methods: {
// --------
// ENTERING
// --------
beforeEnter: function (el) {
// ...
},
// the done callback is optional when
// used in combination with CSS
enter: function (el, done) {
// ...
done()
},
afterEnter: function (el) {
// ...
},
enterCancelled: function (el) {
// ...
},
// --------
// LEAVING
// --------
beforeLeave: function (el) {
// ...
},
// the done callback is optional when
// used in combination with CSS
leave: function (el, done) {
// ...
done()
},
afterLeave: function (el) {
// ...
},
// leaveCancelled only available with v-show
leaveCancelled: function (el) {
// ...
}
}
這些鉤子可以與CSS轉(zhuǎn)換/動畫結(jié)合使用或單獨使用。
當(dāng)使用JavaScript的過渡只，將 需要為回調(diào)和鉤。否則，它們將被同步調(diào)用，并且轉(zhuǎn)換將立即結(jié)束。done enter leave
明確添加v-bind:css="false"僅用于JavaScript的轉(zhuǎn)換也是一個好主意，以便Vue可以跳過CSS檢測。這也可以防止CSS規(guī)則意外干擾轉(zhuǎn)換。
現(xiàn)在我們來看一個例子。這里使用了Velocity.js的JavaScript轉(zhuǎn)換：
<!--
Velocity works very much like jQuery.animate and is
a great option for JavaScript animations
-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"></script>
<div id="example-4">
<button @click="show = !show">
Toggle
</button>
<transition
v-on:before-enter="beforeEnter"
v-on:enter="enter"
v-on:leave="leave"
v-bind:css="false"
>
<p v-if="show">
Demo
</p>
</transition>
</div>
new Vue({
el: '#example-4',
data: {
show: false
},
methods: {
beforeEnter: function (el) {
el.style.opacity = 0
},
enter: function (el, done) {
Velocity(el, { opacity: 1, fontSize: '1.4em' }, { duration: 300 })
Velocity(el, { fontSize: '1em' }, { complete: done })
},
leave: function (el, done) {
Velocity(el, { translateX: '15px', rotateZ: '50deg' }, { duration: 600 })
Velocity(el, { rotateZ: '100deg' }, { loop: 2 })
Velocity(el, {
rotateZ: '45deg',
translateY: '30px',
translateX: '30px',
opacity: 0
}, { complete: done })
}
}
})
初始渲染過渡
如果您還想在節(jié)點的初始渲染上應(yīng)用轉(zhuǎn)場，則可以添加appear屬性：
<transition appear> <!-- ... --> </transition>
默認(rèn)情況下，這將使用為進入和離開指定的轉(zhuǎn)換。但是，如果您想要，也可以指定自定義CSS類：
<transition appear appear-class="custom-appear-class" appear-to-class="custom-appear-to-class" (2.1.8+) appear-active-class="custom-appear-active-class" > <!-- ... --> </transition>
和自定義JavaScript鉤：
<transition appear v-on:before-appear="customBeforeAppearHook" v-on:appear="customAppearHook" v-on:after-appear="customAfterAppearHook" v-on:appear-cancelled="customAppearCancelledHook" > <!-- ... --> </transition>
元素之間的過渡
我們稍后討論組件之間的轉(zhuǎn)換，但也可以使用v-if/ 在各個原始元素之間轉(zhuǎn)換v-else。最常見的兩元素轉(zhuǎn)換之一是在列表容器和描述空列表的消息之間：
<transition> <table v-if="items.length > 0"> <!-- ... --> </table> <p v-else>Sorry, no items found.</p> </transition>
這很有效，但有一點需要注意：
在具有相同標(biāo)簽名稱的元素之間切換時，必須通過為Vue指定唯一key屬性來區(qū)分它們是不同的元素。否則，Vue的編譯器只會替換元素的內(nèi)容以提高效率。即使在技術(shù)上沒有必要，但總是在<transition>組件內(nèi)鍵入多個項目被認(rèn)為是很好的做法。
例如：
<transition> <button v-if="isEditing" key="save"> Save </button> <button v-else key="edit"> Edit </button> </transition>
在這些情況下，您也可以使用該key屬性在同一元素的不同狀態(tài)之間轉(zhuǎn)換。代替使用的v-if和v-else，上述例子可以被重寫為：
<transition>
<button v-bind:key="isEditing">
{{ isEditing ? 'Save' : 'Edit' }}
</button>
</transition>
實際上可以在任意數(shù)量的元素之間進行轉(zhuǎn)換，可以使用多個v-ifs或?qū)蝹€元素綁定到動態(tài)屬性。例如：
<transition> <button v-if="docState === 'saved'" key="saved"> Edit </button> <button v-if="docState === 'edited'" key="edited"> Save </button> <button v-if="docState === 'editing'" key="editing"> Cancel </button> </transition>
這也可以寫成：
<transition>
<button v-bind:key="docState">
{{ buttonMessage }}
</button>
</transition>
// ...
computed: {
buttonMessage: function () {
switch (this.docState) {
case 'saved': return 'Edit'
case 'edited': return 'Save'
case 'editing': return 'Cancel'
}
}
}
過渡模式
但仍然有一個問題。嘗試點擊下面的按鈕：
當(dāng)它在“開啟”按鈕和“關(guān)閉”按鈕之間轉(zhuǎn)換時，兩個按鈕都被渲染 - 一個轉(zhuǎn)換出來，而另一個轉(zhuǎn)換進來。這是<transition>的默認(rèn)行為- 進入和離開同時發(fā)生。
有時候，這很有效，就像轉(zhuǎn)換項目絕對位于彼此之上一樣：
然后也可能翻譯成它們看起來像幻燈片切換：
雖然同時進入和離開轉(zhuǎn)換并不總是需要，所以Vue提供了一些替代轉(zhuǎn)換模式：
現(xiàn)在讓我們用out-in更新我們開/關(guān)按鈕的轉(zhuǎn)換：
<transition name="fade" mode="out-in"> <!-- ... the buttons ... --> </transition>
除了一個屬性外，我們已經(jīng)修復(fù)了原始轉(zhuǎn)換，而無需添加任何特殊樣式。
該in-out模式并不經(jīng)常使用，但有時對于稍微不同的過渡效果有用。讓我們嘗試將它與早先我們所做的幻燈片淡化轉(zhuǎn)換相結(jié)合：
（這種方法）很酷，對吧？
組件之間的轉(zhuǎn)換
組件之間的轉(zhuǎn)換甚至更簡單 - 我們甚至不需要該key屬性。相反，我們包裝一個動態(tài)組件：
<transition name="component-fade" mode="out-in">
<component v-bind:is="view"></component>
</transition>
new Vue({
el: '#transition-components-demo',
data: {
view: 'v-a'
},
components: {
'v-a': {
template: '<div>Component A</div>'
},
'v-b': {
template: '<div>Component B</div>'
}
}
})
.component-fade-enter-active, .component-fade-leave-active {
transition: opacity .3s ease;
}
.component-fade-enter, .component-fade-leave-to
/* .component-fade-leave-active below version 2.1.8 */ {
opacity: 0;
}
列表轉(zhuǎn)換
到目前為止，我們已經(jīng)為以下方面管理過渡：
那么當(dāng)我們有一整套我們想要同時渲染的物品時，例如v-for。在這種情況下，我們將使用該<transition-group>組件。在我們深入研究一個例子之前，有幾件重要的事情要了解這個組件：
列表輸入/離開轉(zhuǎn)場
現(xiàn)在我們來看一個例子，使用我們以前使用過的相同的CSS類來轉(zhuǎn)換進入和離開：
<div id="list-demo">
<button v-on:click="add">Add</button>
<button v-on:click="remove">Remove</button>
<transition-group name="list" tag="p">
<span v-for="item in items" v-bind:key="item" class="list-item">
{{ item }}
</span>
</transition-group>
</div>
new Vue({
el: '#list-demo',
data: {
items: [1,2,3,4,5,6,7,8,9],
nextNum: 10
},
methods: {
randomIndex: function () {
return Math.floor(Math.random() * this.items.length)
},
add: function () {
this.items.splice(this.randomIndex(), 0, this.nextNum++)
},
remove: function () {
this.items.splice(this.randomIndex(), 1)
},
}
})
.list-item {
display: inline-block;
margin-right: 10px;
}
.list-enter-active, .list-leave-active {
transition: all 1s;
}
.list-enter, .list-leave-to /* .list-leave-active below version 2.1.8 */ {
opacity: 0;
transform: translateY(30px);
}
這個例子有一個問題。當(dāng)你添加或刪除一件物品時，它周圍的物品會立即進入新位置，而不是平穩(wěn)過渡。我們稍后會解決這個問題。
列表移動轉(zhuǎn)換
<transition-group>組件還有另一個竅門。它不僅可以動畫進入和離開，而且可以改變位置。您需要知道的使用此功能的唯一新概念是添加了v-move類，該類在項目更改位置時添加。像其他類一樣，它的前綴將與提供的屬性的值匹配，您也可以手動指定具有namemove-class屬性的類。
該類對于指定轉(zhuǎn)換時間和緩動曲線非常有用，如下所示：
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.14.1/lodash.min.js"></script>
<div id="flip-list-demo" class="demo">
<button v-on:click="shuffle">Shuffle</button>
<transition-group name="flip-list" tag="ul">
<li v-for="item in items" v-bind:key="item">
{{ item }}
</li>
</transition-group>
</div>
new Vue({
el: '#flip-list-demo',
data: {
items: [1,2,3,4,5,6,7,8,9]
},
methods: {
shuffle: function () {
this.items = _.shuffle(this.items)
}
}
})
.flip-list-move {
transition: transform 1s;
}
這可能看起來很神奇，但在引擎蓋下，Vue正在使用名為FLIP的動畫技術(shù)，以使用變換平滑地將元素從舊位置過渡到新位置。
我們可以將此技術(shù)與我們之前的實現(xiàn)結(jié)合起來，為每個可能的變化添加動畫。
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.14.1/lodash.min.js"></script>
<div id="list-complete-demo" class="demo">
<button v-on:click="shuffle">Shuffle</button>
<button v-on:click="add">Add</button>
<button v-on:click="remove">Remove</button>
<transition-group name="list-complete" tag="p">
<span
v-for="item in items"
v-bind:key="item"
class="list-complete-item"
>
{{ item }}
</span>
</transition-group>
</div>
new Vue({
el: '#list-complete-demo',
data: {
items: [1,2,3,4,5,6,7,8,9],
nextNum: 10
},
methods: {
randomIndex: function () {
return Math.floor(Math.random() * this.items.length)
},
add: function () {
this.items.splice(this.randomIndex(), 0, this.nextNum++)
},
remove: function () {
this.items.splice(this.randomIndex(), 1)
},
shuffle: function () {
this.items = _.shuffle(this.items)
}
}
})
.list-complete-item {
transition: all 1s;
display: inline-block;
margin-right: 10px;
}
.list-complete-enter, .list-complete-leave-to
/* .list-complete-leave-active below version 2.1.8 */ {
opacity: 0;
transform: translateY(30px);
}
.list-complete-leave-active {
position: absolute;
}
一個重要的提示是，這些FLIP轉(zhuǎn)換不適用于設(shè)置為的元素display: inline。作為替代，您可以display: inline-block在Flex上下文中使用或放置元素。
這些FLIP動畫也不限于單個軸。多維網(wǎng)格中的項目也可以進行轉(zhuǎn)換：
交錯列表轉(zhuǎn)換
通過通過數(shù)據(jù)屬性與JavaScript轉(zhuǎn)換進行通信，也可以在列表中錯開轉(zhuǎn)換：
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"></script>
<div id="staggered-list-demo">
<input v-model="query">
<transition-group
name="staggered-fade"
tag="ul"
v-bind:css="false"
v-on:before-enter="beforeEnter"
v-on:enter="enter"
v-on:leave="leave"
>
<li
v-for="(item, index) in computedList"
v-bind:key="item.msg"
v-bind:data-index="index"
>{{ item.msg }}</li>
</transition-group>
</div>
new Vue({
el: '#staggered-list-demo',
data: {
query: '',
list: [
{ msg: 'Bruce Lee' },
{ msg: 'Jackie Chan' },
{ msg: 'Chuck Norris' },
{ msg: 'Jet Li' },
{ msg: 'Kung Fury' }
]
},
computed: {
computedList: function () {
var vm = this
return this.list.filter(function (item) {
return item.msg.toLowerCase().indexOf(vm.query.toLowerCase()) !== -1
})
}
},
methods: {
beforeEnter: function (el) {
el.style.opacity = 0
el.style.height = 0
},
enter: function (el, done) {
var delay = el.dataset.index * 150
setTimeout(function () {
Velocity(
el,
{ opacity: 1, height: '1.6em' },
{ complete: done }
)
}, delay)
},
leave: function (el, done) {
var delay = el.dataset.index * 150
setTimeout(function () {
Velocity(
el,
{ opacity: 0, height: 0 },
{ complete: done }
)
}, delay)
}
}
})
可重復(fù)使用的轉(zhuǎn)換
轉(zhuǎn)換可以通過Vue的組件系統(tǒng)重用。要創(chuàng)建可重用的轉(zhuǎn)換，您只需將<transition>或<transition-group>組件放在根上，然后將所有子項傳遞給轉(zhuǎn)換組件。
以下是使用模板組件的示例：
Vue.component('my-special-transition', {
template: '\
<transition\
name="very-special-transition"\
mode="out-in"\
v-on:before-enter="beforeEnter"\
v-on:after-enter="afterEnter"\
>\
<slot></slot>\
</transition>\
',
methods: {
beforeEnter: function (el) {
// ...
},
afterEnter: function (el) {
// ...
}
}
})
功能組件特別適合這項任務(wù)：
Vue.component('my-special-transition', {
functional: true,
render: function (createElement, context) {
var data = {
props: {
name: 'very-special-transition',
mode: 'out-in'
},
on: {
beforeEnter: function (el) {
// ...
},
afterEnter: function (el) {
// ...
}
}
}
return createElement('transition', data, context.children)
}
})
動態(tài)轉(zhuǎn)換
是的，甚至Vue中的轉(zhuǎn)換都是數(shù)據(jù)驅(qū)動的！動態(tài)轉(zhuǎn)換的最基本示例將該name屬性綁定到動態(tài)屬性。
<transition v-bind:name="transitionName"> <!-- ... --> </transition>
當(dāng)您使用Vue的過渡類約定定義CSS過渡/動畫并希望在它們之間切換時，這會很有用。
實際上，任何轉(zhuǎn)換屬性都可以動態(tài)綁定。這不僅是屬性。由于事件掛鉤是方法，因此它們可以訪問上下文中的任何數(shù)據(jù)。這意味著取決于組件的狀態(tài)，JavaScript轉(zhuǎn)換可能會有不同的表現(xiàn)。
*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
