[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） 第二部分 - 约束泛型
- 泛型第三部分 - 泛型在类和接口中的使用
- 类型别名，字面量 和 交叉类型
- 声明文件
- 内置类型
- 总结