[TOC]
>[success] # 使用 transition 標簽實現單元素組件的過渡和動畫效果
接下來講解一下 **vue** 里面關于 **動畫** 和 **過渡效果** 的一些 **封裝** ,使用這些**封裝** , 能讓我們更加的方便去編寫 **vue** 里面的 **動畫** 和 **過渡效果** 。
>[success] ## 單組件的入場 / 出場動畫(過渡效果)
**單元素** 或 **單組件** 的 **入場 / 出場** 動畫,只控制一個 **元素(或組件)** ,的**顯示隱藏** 狀態,就叫做 **單元素** 或 **單組件** ,元素從 **展示變成隱藏這就叫做出場** ,從 **隱藏變成展示就叫做入場** , **vue** 給我們提供了 **transition** 標簽,我們可以通過 **transition** 標簽來做 **入場、出場動畫** 。
**transition** 需要配合著一些 **樣式** 才會好用,具體需要哪些樣式呢,如下:
| class類名 | 說明 |
| --- | --- |
| **入場動畫**:| |
| .v-enter-from | 入場效果, **最初展示的模樣** |
| .v-enter-active | 入場動畫的 **過渡(過程)** |
| .v-enter-to | 入場 **動畫結束** 時候 |
| **出場動畫**: | |
| .v-leave-from | 出場效果 |
| .v-leave-active | 出場動畫的過渡(過程) |
| .v-leave-to | 入場 **動畫結束** 時候 |
使用案例如下:
**index.html**
~~~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>單組件的入場 / 出場動畫</title>
<style>
/* --------------------入場動畫----------------------- */
/* 入場效果*/
.v-enter-from {
opacity: 0;
}
/* 入場動畫的過渡(過程) */
/* .v-enter-active {
transition: opacity 3s ease-out; // 單獨寫可以自定義過渡效果的不同
}*/
/* 結束時候 */
.v-enter-to {
opacity: 1;
}
/* --------------------出場動畫----------------------- */
/* 出場效果(可以不寫,因為出場動畫出現的一瞬間本身就是顯示的狀態)*/
.v-leave-from {
opacity: 1;
}
/* 出場動畫的過渡(過程) */
/* .v-leave-active {
transition: opacity 3s ease-in; // 單獨寫可以自定義過渡效果的不同
} */
/* 結束時候 */
.v-leave-to {
opacity: 0;
}
/* --------------------上面的.v-enter-active .v-leave-active 可以放在一起寫----------------------- */
.v-enter-active,
.v-leave-active{
transition: opacity 3s ease-out;
}
</style>
<!-- 通過cdn方式引入vue -->
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="root"></div>
</body>
<script>
// 單元素,單組件的入場出場動畫
const app = Vue.createApp({
data(){
return {
show: false
}
},
methods: {
handleClick(){
this.show = !this.show
}
},
template: `
<div>
<transition>
<div v-if="show">hello world</div>
</transition>
<button @click="handleClick">切換</button>
</div>`
})
const vm = app.mount('#root')
</script>
</html>
~~~
>[success] ## 動畫效果
動畫只需要依賴 **.v-enter-active** 與 **.v-leave-active** 以及一個寫好的 **@keyframes** 關鍵幀動畫,即可完成一個動畫的效果。
**index.html**
~~~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>動畫效果</title>
<style>
/* 關鍵幀 */
@keyframes shake {
0% {
transform: translateX(-100px);
}
50% {
transform: translateX(-50px);
}
100% {
transform: translateX(50px);
}
}
/* --------------------入場動畫----------------------- */
/* 入場動畫的過渡(過程) */
.v-enter-active {
animation: shake 3s;
}
/* --------------------出場動畫----------------------- */
/* 出場動畫的過渡(過程) */
.v-leave-active {
animation: shake 3s;
}
</style>
<!-- 通過cdn方式引入vue -->
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="root"></div>
</body>
<script>
// 單元素,單組件的入場出場動畫
const app = Vue.createApp({
data(){
return {
show: false
}
},
methods: {
handleClick(){
this.show = !this.show
}
},
template: `
<div>
<transition>
<div v-if="show">hello world</div>
</transition>
<button @click="handleClick">切換</button>
</div>`
})
const vm = app.mount('#root')
</script>
</html>
~~~
>[success] ## 給class重命名
上面的 **動畫類名** 都是 **.v-enter-to** 或 **v-enter-from**,都是以 **v** 開頭 ,其實我們是可以給這個 **class 重命名** 的,只需要給 **transition標簽** , 添加一個 **name屬性** 即可。
**index.html**
~~~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>給class重命名</title>
<style>
/* 關鍵幀 */
@keyframes shake {
0% {
transform: translateX(-100px);
}
50% {
transform: translateX(-50px);
}
100% {
transform: translateX(50px);
}
}
/* --------------------入場動畫----------------------- */
/* 入場動畫的過渡(過程) */
.hello-enter-active {
animation: shake 3s;
}
/* --------------------出場動畫----------------------- */
/* 出場動畫的過渡(過程) */
.hello-leave-active {
animation: shake 3s;
}
</style>
<!-- 通過cdn方式引入vue -->
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="root"></div>
</body>
<script>
// 單元素,單組件的入場出場動畫
const app = Vue.createApp({
data(){
return {
show: false
}
},
methods: {
handleClick(){
this.show = !this.show
}
},
template: `
<div>
<transition name="hello">
<div v-if="show">hello world</div>
</transition>
<button @click="handleClick">切換</button>
</div>`
})
const vm = app.mount('#root')
</script>
</html>
~~~
注意: 上面的動畫不僅可以使用 **v-if** 來控制, 也可以使用 **v-show** 。
>[success] ## 自定義class
同時這個 **transition標簽** 的 **class** 也支持 **自定義class** ,自己來依自己的習慣叫自己喜歡的名字,例如想修改 **.v-enter-active** 這個類名,只需要在 **transition標簽** 上添加 **enter-active-class** 屬性來自定義類名即可
**index.html**
~~~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>自定義class</title>
<style>
/* 關鍵幀 */
@keyframes shake {
0% {
transform: translateX(-100px);
}
50% {
transform: translateX(-50px);
}
100% {
transform: translateX(50px);
}
}
/* --------------------入場動畫----------------------- */
/* 入場動畫的過渡(過程) */
.hello {
animation: shake 3s;
}
/* --------------------出場動畫----------------------- */
/* 出場動畫的過渡(過程) */
.bay {
animation: shake 3s;
}
</style>
<!-- 通過cdn方式引入vue -->
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="root"></div>
</body>
<script>
// 單元素,單組件的入場出場動畫
const app = Vue.createApp({
data(){
return {
show: false
}
},
methods: {
handleClick(){
this.show = !this.show
}
},
template: `
<div>
<transition
enter-active-class="hello"
leave-active-class="bay"
>
<div v-if="show">hello world</div>
</transition>
<button @click="handleClick">切換</button>
</div>`
})
const vm = app.mount('#root')
</script>
</html>
~~~
>[success] ## 自定義class結合animate.css使用
**animate.css** 的具體使用教程,請[點擊這里](https://animate.style/)
首先 **通過cdn** 的方式引入 **animate.css** ,在使用**animate.css**中的 **任何class動畫類名** 都需要與 **animate__animated** 類名一同使用,而且配合使用 **自定義class** ,可以很方便的 **和第三方的動畫庫相結合** ,例子如下:
**index.html**
~~~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>自定義class結合animate.css使用</title>
<!-- 引入animate.css -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
<!-- 通過cdn方式引入vue -->
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="root"></div>
</body>
<script>
// 單元素,單組件的入場出場動畫
const app = Vue.createApp({
data(){
return {
show: false
}
},
methods: {
handleClick(){
this.show = !this.show
}
},
template: `
<div>
<transition
enter-active-class="animate__animated animate__backInDown"
leave-active-class="animate__animated animate__flash"
>
<div v-if="show">hello world</div>
</transition>
<button @click="handleClick">切換</button>
</div>`
})
const vm = app.mount('#root')
</script>
</html>
~~~
>[success] ## 過渡與動畫同時觸發
有些時候我們 **不僅希望只有在顯示隱藏元素的瞬間有過渡的效果,我們同時希望有動畫的效果** ,我們可能還想讓 **字體顏色** 也有改變的效果,或者 **坐標位置** 有所改變,等等一系列更多的效果,下面的代碼在有 **過渡** 的同時候也改變了 **字體顏色** 。
**index.html**
~~~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>過渡與動畫同時觸發</title>
<style>
/* 關鍵幀 */
@keyframes shake {
0% {
transform: translateX(-100px);
}
50% {
transform: translateX(-50px);
}
100% {
transform: translateX(50px);
}
}
/* --------------------入場動畫----------------------- */
/* 入場效果*/
.v-enter-from{
color: red;
}
/* 入場動畫的過渡(過程) */
.v-enter-active {
animation: shake 3s;
transition: color 3s ease-in;
}
/* --------------------出場動畫----------------------- */
/* 出場動畫的過渡(過程) */
.v-leave-active {
color: red;
animation: shake 3s;
transition: all 3s ease-in;
}
</style>
<!-- 通過cdn方式引入vue -->
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="root"></div>
</body>
<script>
// 單元素,單組件的入場出場動畫
const app = Vue.createApp({
data(){
return {
show: false
}
},
methods: {
handleClick(){
this.show = !this.show
}
},
template: `
<div>
<transition>
<div v-if="show">hello world</div>
</transition>
<button @click="handleClick">切換</button>
</div>`
})
const vm = app.mount('#root')
</script>
</html>
~~~
>[success] ## 根據animation或transition來決定動畫執行時間
接下來看我們的代碼中 **animation** 的過渡效果是 **10s** , **transition** 的動畫效果是 **3s**,這樣動畫就會出現 **3s** 的先執行結束,然后漫長的等 **10s** 的過渡效果
**index.html**
~~~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>根據animation或transition來決定動畫執行時間</title>
<style>
/* 關鍵幀 */
@keyframes shake {
0% {
transform: translateX(-100px);
}
50% {
transform: translateX(-50px);
}
100% {
transform: translateX(50px);
}
}
/* --------------------入場動畫----------------------- */
/* 入場效果*/
.v-enter-from{
color: red;
}
/* 入場動畫的過渡(過程) */
.v-enter-active {
animation: shake 10s;
transition: color 3s ease-in;
}
/* --------------------出場動畫----------------------- */
/* 出場動畫的過渡(過程) */
.v-leave-active {
color: red;
animation: shake 10s;
transition: all 3s ease-in;
}
</style>
<!-- 通過cdn方式引入vue -->
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="root"></div>
</body>
<script>
// 單元素,單組件的入場出場動畫
const app = Vue.createApp({
data(){
return {
show: false
}
},
methods: {
handleClick(){
this.show = !this.show
}
},
template: `
<div>
<transition>
<div v-if="show">hello world</div>
</transition>
<button @click="handleClick">切換</button>
</div>`
})
const vm = app.mount('#root')
</script>
</html>
~~~
假如我們有一個需求,想讓 **過渡時間與動畫時間相同,或動畫時間與過渡時間相同** ,該怎么做呢? 我們只需要在 **transition標簽** 上添加一個 **type** 屬性, **type** 屬性等于 **transition** 時,就是 **以過渡效果的時間為準** , **type** 屬性等于 **animation** 時,就是 **以動畫效果的時間為準** ,代碼如下:
**index.html**
~~~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>根據animation或transition來決定動畫執行時間</title>
<style>
/* 關鍵幀 */
@keyframes shake {
0% {
transform: translateX(-100px);
}
50% {
transform: translateX(-50px);
}
100% {
transform: translateX(50px);
}
}
/* --------------------入場動畫----------------------- */
/* 入場效果*/
.v-enter-from{
color: red;
}
/* 入場動畫的過渡(過程) */
.v-enter-active {
animation: shake 3s;
transition: color 10s ease-in;
}
/* --------------------出場動畫----------------------- */
/* 出場動畫的過渡(過程) */
.v-leave-active {
color: red;
animation: shake 3s;
transition: color 10s ease-in;
}
</style>
<!-- 通過cdn方式引入vue -->
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="root"></div>
</body>
<script>
// 單元素,單組件的入場出場動畫
const app = Vue.createApp({
data(){
return {
show: false
}
},
methods: {
handleClick(){
this.show = !this.show
}
},
template: `
<div>
<transition type="animation">
<div v-if="show">hello world</div>
</transition>
<button @click="handleClick">切換</button>
</div>`
})
const vm = app.mount('#root')
</script>
</html>
~~~
>[success] ## duration(持續時間)屬性
像上面的 **根據animation或transition來決定動畫執行時間例子** 很不易懂,我們通過使用 **duration屬性實現同樣的效果**
**index.html**
~~~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>duration(持續時間)屬性</title>
<style>
/* 關鍵幀 */
@keyframes shake {
0% {
transform: translateX(-100px);
}
50% {
transform: translateX(-50px);
}
100% {
transform: translateX(50px);
}
}
/* --------------------入場動畫----------------------- */
/* 入場效果*/
.v-enter-from{
color: red;
}
/* 入場動畫的過渡(過程) */
.v-enter-active {
animation: shake 3s;
transition: color 10s ease-in;
}
/* --------------------出場動畫----------------------- */
/* 出場動畫的過渡(過程) */
.v-leave-active {
color: red;
animation: shake 3s;
transition: color 10s ease-in;
}
</style>
<!-- 通過cdn方式引入vue -->
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="root"></div>
</body>
<script>
// 單元素,單組件的入場出場動畫
const app = Vue.createApp({
data(){
return {
show: false
}
},
methods: {
handleClick(){
this.show = !this.show
}
},
template: `
<div>
<transition :duration="1000">
<div v-if="show">hello world</div>
</transition>
<button @click="handleClick">切換</button>
</div>`
})
const vm = app.mount('#root')
</script>
</html>
~~~
**:duration="1000"** 的意思就是不論是 **過渡時間** 還是 **動畫時間** ,都執行 **1000毫秒(1秒)** ,雖然 **css樣式** 中寫了 **3s** 與 **10s** ,我只執行 **duration** 屬性設置的 **1s** 。
**duration屬性** 的值也可以設置為 **對象形式** ,**:duration="{ enter:1000, leave: 3000 }"** 意思是 **入場動畫1秒,出場動畫3秒** 。
**index.html**
~~~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>duration(持續時間)屬性</title>
<style>
/* 關鍵幀 */
@keyframes shake {
0% {
transform: translateX(-100px);
}
50% {
transform: translateX(-50px);
}
100% {
transform: translateX(50px);
}
}
/* --------------------入場動畫----------------------- */
/* 入場效果*/
.v-enter-from{
color: red;
}
/* 入場動畫的過渡(過程) */
.v-enter-active {
animation: shake 3s;
transition: color 10s ease-in;
}
/* --------------------出場動畫----------------------- */
/* 出場動畫的過渡(過程) */
.v-leave-active {
color: red;
animation: shake 3s;
transition: color 10s ease-in;
}
</style>
<!-- 通過cdn方式引入vue -->
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="root"></div>
</body>
<script>
// 單元素,單組件的入場出場動畫
const app = Vue.createApp({
data(){
return {
show: false
}
},
methods: {
handleClick(){
this.show = !this.show
}
},
template: `
<div>
<transition :duration="{ enter:1000, leave: 3000 }">
<div v-if="show">hello world</div>
</transition>
<button @click="handleClick">切換</button>
</div>`
})
const vm = app.mount('#root')
</script>
</html>
~~~
>[success] ## 用 js 做動畫
我們上面講解的,還是 **使用css做動畫** ,那我們如何使用 **js** 去做動畫呢,首先在 **transition標簽** 上添加 **:css="false"** ,意思就是 不使用 **transition** 來做 **css動畫** ,然后做 **js動畫**的話, **vue** 提供給了我們一些 **鉤子(某些時刻會自動調用的函數)** ,如下表格:
| 鉤子名稱 | 鉤子說明 | 回調參數說明 |
| --- | --- | --- |
| **入場動畫鉤子**: | |
| @before-enter | 進入入場動畫之前時 | **參數1:el:vue返回的dom元素** |
| @enter | 開始執行入場動畫時 | **參數1:el:vue返回的dom元素<br>參數2:done: done方法可以停止動畫** |
| @after-enter | 入場動畫結束時 | **參數1:el:vue返回的dom元素** |
| **出場動畫鉤子**: | |
| @before-leave | 出場動畫之前時 | **參數1:el:vue返回的dom元素** |
| @leave | 開始執行出場動畫時 | **參數1:el:vue返回的dom元素<br>參數2:done: done方法可以停止動畫** |
| @after-leave | 出場動畫結束時 | **參數1:el:vue返回的dom元素** |
具體例子使用方法如下:
**index.html**
~~~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>duration(持續時間)屬性</title>
<style>
/* 關鍵幀 */
@keyframes shake {
0% {
transform: translateX(-100px);
}
50% {
transform: translateX(-50px);
}
100% {
transform: translateX(50px);
}
}
/* --------------------入場動畫----------------------- */
/* 入場效果*/
.v-enter-from{
color: red;
}
/* 入場動畫的過渡(過程) */
.v-enter-active {
animation: shake 3s;
transition: color 10s ease-in;
}
/* --------------------出場動畫----------------------- */
/* 出場動畫的過渡(過程) */
.v-leave-active {
color: red;
animation: shake 3s;
transition: color 10s ease-in;
}
</style>
<!-- 通過cdn方式引入vue -->
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="root"></div>
</body>
<script>
// 單元素,單組件的入場出場動畫
const app = Vue.createApp({
data(){
return {
show: false
}
},
methods: {
handleClick(){
this.show = !this.show
},
/**
* 進入入場動畫之前時
* @param {Object} el - vue傳遞過來的dom元素
*/
// ------------------------入場動畫---------------------------
handleBeforeEnter(el){
el.style.color = 'red'
},
/**
* 開始執行入場動畫時
* @param {Object} el - vue傳遞過來的dom元素
* @param {Funcion} done - done方法可以停止動畫
*/
handleEnterActive(el, done){
// 執行動畫
const animate = setInterval(() => {
const color = el.style.color
if(color === 'red') {
el.style.color = 'green'
} else {
el.style.color = 'red'
}
}, 1000);
// 3秒后清除動畫
setTimeout(() => {
clearInterval(animate)
// 1. 注意:如果不主動調用done方法,程序不會知道動畫是否結束,
// 也不會去走【動畫結束的鉤子函數】
done()
}, 3000);
},
/**
* 入場動畫結束時
*/
handleEnterEnd(){
// 2. 上面的方法中調用【done】后,才會執行該方法中的邏輯
alert('入場動畫結束時')
},
// ------------------------出場動畫---------------------------
/**
* 出場動畫之前時
* @param {Object} el - vue傳遞過來的dom元素
*/
handleBeforeLeave(el){
alert('出場動畫之前')
},
/**
* 開始執行出場動畫時
* @param {Object} el - vue傳遞過來的dom元素
* @param {Funcion} done - done方法可以停止動畫
*/
handleLeaveActive(el, done){
alert('開始執行出場動畫')
done()
},
/**
* 出場動畫結束時
*/
handleLeaverEnd(el){
alert('出場動畫結束')
}
},
template: `
<div>
<transition
:css="false"
@before-enter="handleBeforeEnter"
@enter="handleEnterActive"
@after-enter="handleEnterEnd"
@before-leave="handleBeforeLeave"
@leave="handleLeaveActive"
@after-leave="handleLeaverEnd"
>
<div v-if="show">hello world</div>
</transition>
<button @click="handleClick">切換</button>
</div>`
})
const vm = app.mount('#root')
</script>
</html>
~~~
- vue 26課
- Vue-cli3.0項目搭建
- Vue-ui 創建cli3.0項目
- Vue-ui 界面詳解
- 項目目錄詳解
- public文件夾
- favicon.ico
- index.html
- src文件夾
- api文件夾
- assets文件夾
- components文件夾
- config文件夾
- directive文件夾
- lib文件夾
- mock文件夾
- mock簡明文檔
- router文件夾
- store文件夾
- views文件夾
- App.vue
- main.js
- .browserslistrc
- .editorconfig
- .eslintrc.js
- .gitignore
- babel.config.js
- package-lock.json
- package.json
- postcss.config.js
- README.en.md
- README.md
- vue.config.js
- Vue Router
- 路由詳解(一)----基礎篇
- 路由詳解(二)----進階篇
- Vuex
- Bus
- Vuex-基礎-state&getter
- Vuex-基礎-mutation&action/module
- Vuex-進階
- Ajax請求
- 解決跨域問題
- 封裝axios
- Mock.js模擬Ajax響應
- 組件封裝
- 從數字漸變組件談第三方JS庫使用
- 從SplitPane組件談Vue中如何【操作】DOM
- 渲染函數和JSX快速掌握
- 遞歸組件的使用
- 登陸/登出以及JWT認證
- 響應式布局
- 可收縮多級菜單的實現
- vue雜項
- vue遞歸組件
- vue-cli3.0多環境打包配置
- Vue+Canvas實現圖片剪切
- vue3系統入門與項目實戰
- Vue語法初探
- 初學編寫 HelloWorld 和 Counter
- 編寫字符串反轉和內容隱藏功能
- 編寫TodoList功能了解循環與雙向綁定
- 組件概念初探,對 TodoList 進行組件代碼拆分
- Vue基礎語法
- Vue 中應用和組件的基礎概念
- 理解 Vue 中的生命周期函數
- 常用模版語法講解
- 數據,方法,計算屬性和偵聽器
- 樣式綁定語法
- 條件渲染
- 列表循環渲染
- 事件綁定
- 表單中雙向綁定指令的使用
- 探索組件的理念
- 組件的定義及復用性,局部組件和全局組件
- 組件間傳值及傳值校驗
- 單向數據流的理解
- Non-Props 屬性是什么
- 父子組件間如何通過事件進行通信
- 組件間雙向綁定高級內容
- 使用匿名插槽和具名插槽解決組件內容傳遞問題
- 作用域插槽
- 動態組件和異步組件
- 基礎語法知識點查缺補漏
- Vue 中的動畫
- 使用 Vue 實現基礎的 CSS 過渡與動畫效果
- 使用 transition 標簽實現單元素組件的過渡和動畫效果
- 組件和元素切換動畫的實現
- 列表動畫
- 狀態動畫
- Vue 中的高級語法
- Mixin 混入的基礎語法
- 開發實現 Vue 中的自定義指令
- Teleport 傳送門功能
- 更加底層的 render 函數
- 插件的定義和使用
- 數據校驗插件開發實例
- Composition API
- Setup 函數的使用
- ref,reactive 響應式引用的用法和原理
- toRef 以及 context 參數
- 使用 Composition API 開發TodoList
- computed方法生成計算屬性
- watch 和 watchEffect 的使用和差異性
- 生命周期函數的新寫法
- Provide,Inject,模版 Ref 的用法
- Vue 項目開發配套工具講解
- VueCLI 的使用和單文件組件
- 使用單文件組件編寫 TodoList
- Vue-Router 路由的理解和使用
- VueX 的語法詳解
- CompositionAPI 中如何使用 VueX
- 使用 axios 發送ajax 請求
- Vue3.0(正式版) + TS
- 你好 Typescript: 進入類型的世界
- 什么是 Typescript
- 為什么要學習 Typescript
- 安裝 Typescript
- 原始數據類型和 Any 類型
- 數組和元組
- Interface- 接口初探
- 函數
- 類型推論 聯合類型和 類型斷言
- class - 類 初次見面
- 類和接口 - 完美搭檔
- 枚舉(Enum)
- 泛型(Generics) 第一部分
- 泛型(Generics) 第二部分 - 約束泛型
- 泛型第三部分 - 泛型在類和接口中的使用
- 類型別名,字面量 和 交叉類型
- 聲明文件
- 內置類型
- 總結