专栏首页Vue中文社区焕然一新的 Vue3 中文文档来了!

焕然一新的 Vue3 中文文档来了!

新文档地址:vuejs.org[1]

中文版翻译:staging-cn.vuejs.org[2] (官方已标注为新版)

旧版中文版:v3.cn.vuejs.org (官方已标注为旧版)

  1. 了解新文档的新变化
  2. 收获一份 Vue 3 新文档学习笔记(50张思维导图,附原图及原 xmind 文档)

前言

大家好,我是LBJ,最近参与了 Vue 3新文档的翻译和校验工作 (vuejs/docs contributor[3] 和 docs-zh-cn contributor[4])

我们知道 Vue 3 新文档 ( `vuejs.org`[5] ) 已经发布一个多月了,但那是英文版的,不知道你看了没?

没有看,那就有福了!

为什么说它要来了呢?

一是,原 Vue 3 中文文档 ( v3.cn.vuejs.org[6] ) 尤大已经标注:「旧版」

image.png

二是,新文档vuejs.org 对应的中文版翻译已经将 英文版中稳定的页面 翻译完毕!而且前天官方已经将 banner中的移除 「编写中」「仅供预览」 等字样,这意味着新的中文文档已经可以开始供大家阅读了

image.png

因此,「焕然一新的 Vue 3 中文文档它来了」,和我一起先睹为快,看看文档都有哪些新变化吧

以下正文内容将分为两部分:

  1. 新文档的新变化
  2. Vue 3 新文档学习笔记

一、新文档的新变化

一图简单小结了10点主要的变化,如下

新文档的新变化.png

1. 新增了深色模式

image.png

2. 响应式设计

image.png

3. 在指引、教程和范例中新增API风格切换功能(选择Options或者Composition API)

image.png

4. 全新的互动教程

image.png

5. 新增了例子,包括7GUIs的实现

image.png

6. 更快的查找API

image.png

7. 重做了指引

image.png

重写了 TypeScript 指引

image.png

重写了深入响应式系统

image.png

重写了渲染机制

image.png

全新的可组合函数指引

image.png

新的工具链指引

image.png

新的性能指引

image.png

8. 单页面导航+智能预读取视口中的链接

image.png

9. 使用 VitePress 构建

image.png

10. 自动水合部分静态内容

image.png

二、新文档学习笔记

开始

简介

1.1简介.png

快速开始

1.2快速开始.png

基础

创建 Vue 应用

2.1创建 Vue 应用.png

模板语法

2.2模板语法.png

响应式基础

2.3响应式基础.png

计算属性

2.4计算属性.png

类与样式绑定

2.5类与样式绑定.png

条件渲染

2.6条件渲染.png

列表渲染

2.7列表渲染.png

事件处理

2.8事件处理.png

表单输入绑定

2.9表单输入绑定.png

生命周期钩子

2.10生命周期钩子.png

侦听器

2.11侦听器.png

模板 ref

2.12模板 ref.png

组件基础

2.13组件基础.png

深入组件

组件注册

3.1组件注册.png

Props

3.2Props.png

组件事件

3.3组件事件.png

透传 attribute

3.4透传 attribute.png

插槽

3.5插槽.png

依赖注入

3.6依赖注入.png

异步组件

3.7异步组件.png

可重用性

可组合函数

4.1可组合函数.png

自定义指令

4.2自定义指令.png

插件

4.3插件.png

内置组件

Transition

5.1Transition·过渡.png

TransitionGroup

5.2TransitionGroup·过渡组.png

KeepAlive

5.3KeepAlive.png

Teleport

5.4Teleport·传送门.png

Suspense

5.5Suspense.png

升级规模

单文件组件

6.1单文件组件.png

工具链

6.2工具链.png

路由

6.3路由.png

状态管理

6.4状态管理.png

测试

6.5测试.png

服务端渲染 (SSR)

6.6服务端渲染 (SSR).png

最佳实践

生产环境部署

7.1生产环境部署.png

性能

7.2性能.png

无障碍访问

7.3无障碍访问.png

安全

7.4安全.png

与TS

搭配 TypeScript 使用 Vue

8.1搭配 TypeScript 使用 Vue.png

TypeScript 与组合式 API

8.2TypeScript 与组合式 API.png

TypeScript 与选项式 API

8.3TypeScript 与选项式 API.png

进阶

多种方式使用 Vue

9.1多种方式使用 Vue.png

组合式 API FAQ

9.2组合式 API FAQ.png

深入响应式系统

9.3深入响应式系统.png

渲染机制

9.4渲染机制.png

渲染函数 & JSX

9.5渲染函数 & JSX.png

附件

  • 已将上述思维导图原图及原 xmind 文档上传到 github,如有需要可自行下载:传送门[7]

补充说明

看新的中文文档时,可能你会遇到一些问题,比如有些页面未翻译等等。不要诧异,因为中文版非正式上线,可能存在问题,截止目前仅集中翻译了src\guide目录下的文档,正式上线的英文版也还在更新中,所以之后会增加其他稳定页面的翻译和校验,还有很多工作。

结语

以上是本文的所有内容。

文章分享自微信公众号:
Vue中文社区

本文参与 腾讯云自媒体分享计划 ,欢迎热爱写作的你一起参与!

原始发表时间:2022-04-01
如有侵权,请联系 cloudcommunity@tencent.com 删除。
登录 后参与评论
0 条评论

相关文章

  • 焕然一新的 Vue3 中文文档来了!

    大家好,我是LBJ,最近参与了 Vue 3新文档的翻译和校验工作 (vuejs/docs contributor[3] 和 docs-zh-cn contrib...

    前端达人
  • 焕然一新的 Vue 3 中文文档来了

    我们知道 Vue 3 新文档 ( vuejs.org ) 已经发布一个多月了,但那是英文版的,不知道你看了没?

    PHP开发工程师
  • Keras官方中文版文档来了~

    ? 发布三年之后,Keras终于有了官方中文版文档。 今年1月,Keras作者、谷歌AI研究员François Chollet在推特上发出召唤:讲中文的Ker...

    量子位
  • Vue3.0中文文档(Vue3 + TS学习资源路线)

    星宇大前端
  • 「中文翻译」Vue3 的诞生之路

    因时间有限,文中翻译不对的地方还请指出,望海涵。想感受原汁原味还请移步上方链接。致敬尤大!

    童欧巴
  • 中文技术文档的写作规范

    很多人说,不知道怎么写文档,都是凭着感觉写。 网上也很少有资料,教你写文档。这已经影响了中文软件的发展。 ? 英语世界里,文档非常受重视,许多公司和组织都有自己...

    ruanyf
  • 超全的Vue3文档【Vue2迁移Vue3】

    链接:https://juejin.cn/post/6858558735695937544#heading-153

    小丑同学
  • 【大家的项目】Tokio 中文文档

    本人最近在学习Tokio的时候,啃了啃Tokio的官方文档,顺便翻译整理了出来,希望能给同样对Tokio感兴趣的 Rustaceans 的学习带来帮助,大家互相...

    MikeLoveRust
  • 2020最新Gin框架中文文档 asong又捡起来了英语,用心翻译

    哈喽,大家好,我是asong。最近在学习Gin框架。在学习的过程中,一直看英文文档,对于英语渣渣的我来说,很痛苦,就想着给他翻译过来,弄成中文文档,可以提高我们...

    Golang梦工厂
  • JS中文档碎片的理解和使用

    每次对dom的操作都会触发"重排"(重新渲染界面,发生重绘或回流),这严重影响到能耗,一般通常采取的做法是尽可能的减少dom操作来减少"重排"

    用户9914333
  • 随机机制的探索(RandomPicker中文文档)

    RandomPicker?? 最初的灵感来来自音乐随机播放: 权重++ 切歌模式

    冰之角
  • 真正的中文编程来了,可我完全学不懂

    毕竟有易语言在前,有人认为中文可以降低国人学习编程的门槛,也增强汉语的国际地位。然而最近大火的文言文编程语言,让你明白什么叫“中文比英语还难”。

    张凯强
  • PyTorch 1.0 中文文档:Tensor(张量)的属性

    每个 torch.Tensor 对象都有以下几个属性: torch.dtype, torch.device, 和 torch.layout。

    ApacheCN_飞龙
  • Flutter 中文文档:简单的应用状态管理

    现在大家已经了解了 状态管理中的声明式编程思维 和 短时 (ephemeral) 和应用 (app) 状态的区别 之间的区别,现在可以学习如何管理简单的全局应用...

    程序亦非猿
  • Altera官方FPGA电机控制的中文文档

    本文档推荐一种设计流程,它在电机控制设计中利用了 Altera FPGA 强大的适应能力、精度可调 DSP 以及集成系统设计工具。工业电机驱动设备的设计人员可以...

    碎碎思
  • Vue3发布半年我不学,摸鱼爽歪歪,哎~就是玩儿

    是从 Vue 2 开始学基础还是直接学 Vue 3 ?尤雨溪给出的答案是:“直接学 Vue 3 就行了,基础概念是一模一样的。”

    程序员十三
  • npm的package.json字段含义中文文档

    本文档有所有package.json中必要的配置。它必须是真正的json,而不是js对象。

    用户4962466
  • 脑力大挑战!考验你中文水平的时候来了

    知晓君

扫码关注腾讯云开发者

领取腾讯云代金券