v3_update
This commit is contained in:
@@ -1,7 +1,7 @@
|
|||||||
module.exports = {
|
module.exports = {
|
||||||
base: '/vue3_study/', /* 基础虚拟路径 */
|
base: '/vue3_study/', /* 基础虚拟路径 */
|
||||||
dest: 'docs/dist', /* 打包文件基础路径, 在命令所在目录下 */
|
dest: 'docs/dist', /* 打包文件基础路径, 在命令所在目录下 */
|
||||||
title: 'Vue3 快速上手', // 标题
|
title: 'Vue3+TS 快速上手', // 标题
|
||||||
description: '尚硅谷前端研究院', // 标题下的描述
|
description: '尚硅谷前端研究院', // 标题下的描述
|
||||||
themeConfig: { // 主题配置
|
themeConfig: { // 主题配置
|
||||||
logo: '/images/logo.png',
|
logo: '/images/logo.png',
|
||||||
@@ -19,9 +19,9 @@ module.exports = {
|
|||||||
{ text: '全套视频资料', link: 'http://www.gulixueyuan.com/' },
|
{ text: '全套视频资料', link: 'http://www.gulixueyuan.com/' },
|
||||||
],
|
],
|
||||||
sidebar: [ // 左侧导航
|
sidebar: [ // 左侧导航
|
||||||
'列表',
|
'00_课程介绍',
|
||||||
{
|
{
|
||||||
title: 'TypeScript快速上手',
|
title: '一.TypeScript快速上手',
|
||||||
collapsable: false,
|
collapsable: false,
|
||||||
children: [
|
children: [
|
||||||
{
|
{
|
||||||
@@ -48,7 +48,7 @@ module.exports = {
|
|||||||
},
|
},
|
||||||
|
|
||||||
{
|
{
|
||||||
title: '初识 Vue3',
|
title: '二.Vue3快速上手',
|
||||||
collapsable: false,
|
collapsable: false,
|
||||||
children: [
|
children: [
|
||||||
'chapter3/01_认识Vue3',
|
'chapter3/01_认识Vue3',
|
||||||
@@ -56,7 +56,7 @@ module.exports = {
|
|||||||
]
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: 'Composition(组合) API',
|
title: '三.Composition API',
|
||||||
collapsable: false,
|
collapsable: false,
|
||||||
children: [
|
children: [
|
||||||
'chapter4/01_Composition API_常用部分',
|
'chapter4/01_Composition API_常用部分',
|
||||||
@@ -66,15 +66,15 @@ module.exports = {
|
|||||||
]
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: '其它新语法',
|
title: '四.其它新组合和API',
|
||||||
collapsable: false,
|
collapsable: false,
|
||||||
children: [
|
children: [
|
||||||
'chapter5/01_新组件',
|
'chapter5/01_新组件',
|
||||||
'chapter5/02_全局API更新',
|
'chapter5/02_其他新API',
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: 'Vue3版 TODO LIST',
|
title: '五.Vue3综合案例',
|
||||||
collapsable: false,
|
collapsable: false,
|
||||||
children: [
|
children: [
|
||||||
'chapter6/',
|
'chapter6/',
|
||||||
|
|||||||
BIN
docs/.vuepress/public/images/ts.png
Normal file
BIN
docs/.vuepress/public/images/ts.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
BIN
docs/.vuepress/public/images/ts_v3.png
Normal file
BIN
docs/.vuepress/public/images/ts_v3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 177 KiB |
33
docs/00_课程介绍.md
Normal file
33
docs/00_课程介绍.md
Normal file
@@ -0,0 +1,33 @@
|
|||||||
|
# 课程指南
|
||||||
|
<img :src="$withBase('/images/vue3_logo.png')" alt="v3" width="40%" style="float:left">
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<img :src="$withBase('/images/ts.png')" alt="ts" width="40%" style="float:right">
|
||||||
|
|
||||||
|
<div style="clear:both"></div>
|
||||||
|
|
||||||
|
|
||||||
|
课程介绍:Vue是一套用于构建用户界面的**渐进式框架**。Vue.js 3.0 "One Piece" 正式版在2020年9月份发布,经过了2年多开发, 100+位贡献者, 2600+次提交, 600+次PR,同时Vue3也支持Vue2的大多数特性,且,更好的支持了TypeScript,也增加了很多的新特性,如:Composition API,新组件(Fragment/Teleport/Suspense)等等.
|
||||||
|
课程内容如下:
|
||||||
|
|
||||||
|
#### 1.TypeScript 快速上手
|
||||||
|
|
||||||
|
#### 2.Vue3快速上手
|
||||||
|
|
||||||
|
#### 3.Vue3新特性
|
||||||
|
|
||||||
|
#### 4.Vue3综合案例
|
||||||
|
|
||||||
|
#### 5.Vue3 企业级项目(待发布)
|
||||||
|
|
||||||
|
注:由于Vue3中可以更好的支持TypeScript内容,且,课程内容中涉及到TS的内容,鉴于部分学员对于TS并不是很了解,所以,课程内容先从TS开始讲解
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@@ -6,5 +6,5 @@ heroImage: /images/vue3_logo.png
|
|||||||
# 按钮文本
|
# 按钮文本
|
||||||
actionText: 开始学习 →
|
actionText: 开始学习 →
|
||||||
# 按钮点击跳转路径
|
# 按钮点击跳转路径
|
||||||
actionLink: /列表.md
|
actionLink: 00_课程介绍.md
|
||||||
---
|
---
|
||||||
@@ -1,5 +1,7 @@
|
|||||||
# 1. 初识 TypeScript
|
# 1. 初识 TypeScript
|
||||||
|
|
||||||
|

|
||||||
|
|
||||||
## TypeScript 的介绍
|
## TypeScript 的介绍
|
||||||
|
|
||||||
TypeScript是一种由微软开发的开源、跨平台的编程语言。它是JavaScript的超集,最终会被编译为JavaScript代码。
|
TypeScript是一种由微软开发的开源、跨平台的编程语言。它是JavaScript的超集,最终会被编译为JavaScript代码。
|
||||||
@@ -15,7 +17,6 @@ TypeScript是为大型应用的开发而设计,并且可以编译为JavaScript
|
|||||||
TypeScript 是 JavaScript 的一个超集,主要提供了类型系统和对 ES6+ 的支持**,它由 Microsoft 开发,代码开源于 GitHub 上
|
TypeScript 是 JavaScript 的一个超集,主要提供了类型系统和对 ES6+ 的支持**,它由 Microsoft 开发,代码开源于 GitHub 上
|
||||||
|
|
||||||
**TypeScript 是 JavaScript 的一个超集**,主要提供了**类型系统**和**对 ES6+ 的支持**,它由 Microsoft 开发,代码[开源于 GitHub](https://github.com/Microsoft/TypeScript) 上
|
**TypeScript 是 JavaScript 的一个超集**,主要提供了**类型系统**和**对 ES6+ 的支持**,它由 Microsoft 开发,代码[开源于 GitHub](https://github.com/Microsoft/TypeScript) 上
|
||||||

|
|
||||||
|
|
||||||
## TypeScript 的特点
|
## TypeScript 的特点
|
||||||
|
|
||||||
|
|||||||
@@ -4,8 +4,8 @@
|
|||||||
|
|
||||||
- Vue.js 3.0 "One Piece" 正式版在今年9月份发布
|
- Vue.js 3.0 "One Piece" 正式版在今年9月份发布
|
||||||
- 2年多开发, 100+位贡献者, 2600+次提交, 600+次PR
|
- 2年多开发, 100+位贡献者, 2600+次提交, 600+次PR
|
||||||
- ***Vue3支持vue2的大多数特性***
|
- <font color='red'>**Vue3支持vue2的大多数特性**</font>
|
||||||
- ***更好的支持Typescript***
|
- <font color='red'>**更好的支持Typescript**</font>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@@ -14,25 +14,29 @@
|
|||||||
- 打包大小减少41%
|
- 打包大小减少41%
|
||||||
- 初次渲染快55%, 更新渲染快133%
|
- 初次渲染快55%, 更新渲染快133%
|
||||||
- 内存减少54%
|
- 内存减少54%
|
||||||
- ***使用Proxy代替defineProperty实现数据响应式***
|
- <font color='red'>**使用Proxy代替defineProperty实现数据响应式**</font>
|
||||||
- ***重写虚拟DOM的实现和Tree-Shaking***
|
- <font color='red'>**重写虚拟DOM的实现和Tree-Shaking**</font>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
## 3) *Composition(组合) API* Option API
|
## 3) 新增特性
|
||||||
|
|
||||||
|
- <font color='red'>**Composition (组合) API**</font>
|
||||||
- setup
|
- setup
|
||||||
- ref 和 reactive
|
- ref 和 reactive
|
||||||
- computed 和 watch
|
- computed 和 watch
|
||||||
- 新的生命周期函数
|
- 新的生命周期函数
|
||||||
- provide与inject
|
- provide与inject
|
||||||
- ...
|
- ...
|
||||||
|
|
||||||
|
- 新组件
|
||||||
|
|
||||||
|
- Fragment - 文档碎片
|
||||||
|
- Teleport - 瞬移组件的位置
|
||||||
|
- Suspense - 异步加载组件的loading界面
|
||||||
|
|
||||||
## 4) 其它新增特性
|
- 其它API更新
|
||||||
|
|
||||||
- Fragment - 文档碎片
|
- 全局API的修改
|
||||||
- Teleport - 瞬移组件的位置
|
- 将原来的全局API转移到应用对象
|
||||||
- Suspense - 异步加载组件的loading界面
|
- 模板语法变化
|
||||||
- 全局API的修改
|
|
||||||
|
|||||||
@@ -1,4 +1,4 @@
|
|||||||
# 2. 全局API更新
|
# 2. 其他新的API
|
||||||
## 全新的全局API
|
## 全新的全局API
|
||||||
- createApp()
|
- createApp()
|
||||||
- defineProperty()
|
- defineProperty()
|
||||||
@@ -1,6 +0,0 @@
|
|||||||
# 所有技术列表
|
|
||||||
|
|
||||||
- 技术1
|
|
||||||
- 技术2
|
|
||||||
- 技术3
|
|
||||||
- 技术4
|
|
||||||
Reference in New Issue
Block a user