Skip to content
This repository has been archived by the owner on Aug 8, 2022. It is now read-only.

Commit

Permalink
chore: fix conflict docs-bold branch
Browse files Browse the repository at this point in the history
  • Loading branch information
veaba committed Sep 16, 2020
2 parents 42e4673 + 5aff52f commit e56ad3a
Show file tree
Hide file tree
Showing 15 changed files with 39 additions and 39 deletions.
2 changes: 1 addition & 1 deletion src/.vuepress/config.js
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,7 @@ const sidebar = {
]
},
{
title: '高级指南',
title: '高阶指南',
collapsable: false,
children: [{
title: '响应式',
Expand Down
2 changes: 1 addition & 1 deletion src/api/basic-reactivity.md
Original file line number Diff line number Diff line change
Expand Up @@ -120,7 +120,7 @@ console.log(isReactive(bar.foo)) // false
当渲染具有不可变数据源的大列表时,跳过代理转换可以提高性能。


它们被认为是高级的,因为原始选择退出仅在根级别,因此,如果将嵌套的、未标记的原始对象设置为响应式对象,然后再次访问它,则可以得到代理版本。这可能会导致**本源危害**——即执行依赖于对象本身但同时使用同一对象的原始版本和代理版本的操作:
它们被认为是高阶的,因为原始选择退出仅在根级别,因此,如果将嵌套的、未标记的原始对象设置为响应式对象,然后再次访问它,则可以得到代理版本。这可能会导致**本源危害**——即执行依赖于对象本身但同时使用同一对象的原始版本和代理版本的操作:

```js
const foo = markRaw({
Expand Down
2 changes: 1 addition & 1 deletion src/api/global-api.md
Original file line number Diff line number Diff line change
Expand Up @@ -163,7 +163,7 @@ createApp({
})
```

对于高级用法`defineAsyncComponent` 可以接受对象:
对于高阶用法`defineAsyncComponent` 可以接受对象:

`defineAsyncComponent` 方法还可以返回以下格式的对象:

Expand Down
2 changes: 1 addition & 1 deletion src/api/instance-properties.md
Original file line number Diff line number Diff line change
Expand Up @@ -140,7 +140,7 @@

- **详细**

包含了父作用域中不作为组件 [props](./options-data.html#props)[自定义事件](./options-data.html#emits)。当一个组件没有声明任何 prop 时,这里会包含所有父作用域的绑定,并且可以通过 `v-bind="$attrs"` 传入内部组件——在创建高级别的组件时非常有用
包含了父作用域中不作为组件 [props](./options-data.html#props)[自定义事件](./options-data.html#emits)。当一个组件没有声明任何 prop 时,这里会包含所有父作用域的绑定,并且可以通过 `v-bind="$attrs"` 传入内部组件——在创建高阶的组件时非常有用

- **参考**
- [非 Prop Attributes](../guide/component-attrs.html)
2 changes: 1 addition & 1 deletion src/api/options-data.md
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@

- **详细**

props 可以是数组或对象,用于接收来自父组件的数据。props 可以是简单的数组,或者使用对象作为替代,对象允许配置高级选项,如类型检测、自定义验证和设置默认值。
props 可以是数组或对象,用于接收来自父组件的数据。props 可以是简单的数组,或者使用对象作为替代,对象允许配置高阶选项,如类型检测、自定义验证和设置默认值。

你可以基于对象的语法使用以下选项:

Expand Down
2 changes: 1 addition & 1 deletion src/guide/a11y-standards.md
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@

### Web 可访问性倡议——可访问的富互联网应用程序 (WAI-ARIA)

W3C 的 WAI-ARIA 为如何构建动态内容和高级用户界面控件提供了指导
W3C 的 WAI-ARIA 为如何构建动态内容和高阶用户界面控件提供了指导

- [可访问的富 Internet 应用程序 (WAI-ARIA) 1.2](https://www.w3.org/TR/wai-aria-1.2/)
- [WAI-ARIA 创造实践 1.2](https://www.w3.org/TR/wai-aria-practices-1.2/)
6 changes: 3 additions & 3 deletions src/guide/contributing/writing-guide.md
Original file line number Diff line number Diff line change
Expand Up @@ -25,9 +25,9 @@
- 提供一个不到 30 分钟的项目解决的问题和如何解决的概述,包括何时和为什么使用项目以及一些简单的代码示例。最后,链接到安装页面和要点指南的开头。

- **指南**:让用户感到聪明、强大、好奇,然后保持这种状态,让用户保持不断学习的动力和认知能力。指南页是按顺序阅读的,因此通常应该从最高到最低的功率/工作比排序。
- **要点**:阅读要领的时间不应超过 5 个小时,但越短越好。它的目标是提供 20%的知识来帮助用户处理 80%的用例。Essentials 可以链接到更高级的指南和 API,不过,在大多数情况下,你应该避免此类链接。当它们被提供时,你还需要提供一个上下文,以便用户知道他们是否应该在第一次阅读时遵循这个链接。否则,许多用户最终会耗尽他们的认知能力,跳转链接,试图在继续之前全面了解一个功能的各个方面,结果是,永远无法完成第一次通读的要领。记住,通顺的阅读比彻底的阅读更重要。我们想给人们提供他们需要的信息,以避免令人沮丧的经历,但他们总是可以回来继续阅读,或者在谷歌遇到一个不太常见的问题。
- **要点**:阅读要领的时间不应超过 5 个小时,但越短越好。它的目标是提供 20%的知识来帮助用户处理 80%的用例。Essentials 可以链接到更高阶的指南和 API,不过,在大多数情况下,你应该避免此类链接。当它们被提供时,你还需要提供一个上下文,以便用户知道他们是否应该在第一次阅读时遵循这个链接。否则,许多用户最终会耗尽他们的认知能力,跳转链接,试图在继续之前全面了解一个功能的各个方面,结果是,永远无法完成第一次通读的要领。记住,通顺的阅读比彻底的阅读更重要。我们想给人们提供他们需要的信息,以避免令人沮丧的经历,但他们总是可以回来继续阅读,或者在谷歌遇到一个不太常见的问题。

- **高阶**:虽然要点帮助人们处理大约 80%的用例,但后续的指南帮助用户了解 95%的用例,以及关于非基本特性 (例如转换、动画)、更复杂的便利特性 (例如 mixin、自定义指令) 和开发人员体验改进 (例如 JSX、插件) 的更详细信息。最后 5%的用例是更利基的、更复杂的和/或更容易被滥用的,将留给烹饪书和 API 参考,它们可以从这些高级指南链接到
- **高阶**:虽然要点帮助人们处理大约 80%的用例,但后续的指南帮助用户了解 95%的用例,以及关于非基本特性 (例如转换、动画)、更复杂的便利特性 (例如 mixin、自定义指令) 和开发人员体验改进 (例如 JSX、插件) 的更详细信息。最后 5%的用例是更利基的、更复杂的和/或更容易被滥用的,将留给烹饪书和 API 参考,它们可以从这些高阶指南链接到
- **引用/API**:提供功能的完整列表,包括类型信息,每个要解决的问题的描述,选项的每种组合的示例以及指向指南,食谱的食谱以及提供更多详细信息的其他内部资源的链接。与其他页面不同,此页面无意自上而下阅读,因此可以提供大量详细信息。这些参考资料还必须比指南更容易浏览,因此格式应比指南的讲故事格式更接近字典条目。
- **迁移**
- **版本**:当进行了重要的更改时,包含一个完整的更改列表是很有用的,包括对为什么进行更改以及如何迁移其项目的详细解释。
Expand All @@ -51,7 +51,7 @@


- **几乎总是避免幽默 (对于英文文档)**, 尤其是讽刺和通俗文化的引用,因为它在不同文化之间的翻译并不好。
- **永远不要假设比你必须的更高级的上下文**
- **永远不要假设比你必须的更高阶的上下文**
- **在大多数情况下,比起在多个部分中重复相同的内容,更喜欢在文档的各个部分之间建立链接**。在内容上有些重复是不可避免的,甚至是学习的必要条件。然而,过多的重复也会使文档更难维护,因为 API 的更改将需要在许多地方进行更改,而且很容易遗漏某些内容。这是一个很难达到的平衡。
- **具体的比一般的好**例如,一个 `<BlogPost>` 组件例子比 `<ComponentA>` 更好。
- **相对胜于晦涩**。例如,一个 `<BlogPost>` 组件例子比 `<CurrencyExchangeSettings>` 更好。
Expand Down
6 changes: 3 additions & 3 deletions src/guide/events.md
Original file line number Diff line number Diff line change
Expand Up @@ -295,8 +295,8 @@ Vue 为最常用的键提供了别名:

你可能注意到这种事件监听的方式违背了关注点分离 (separation of concern) 这个长期以来的优良传统。但不必担心,因为所有的 Vue.js 事件处理方法和表达式都严格绑定在当前视图的 ViewModel 上,它不会导致任何维护上的困难。实际上,使用 `v-on``@` 有几个好处:

1.扫一眼 HTML 模板便能轻松定位在 JavaScript 代码里对应的方法。
1. 扫一眼 HTML 模板便能轻松定位在 JavaScript 代码里对应的方法。

2.因为你无须在 JavaScript 里手动绑定事件,你的 ViewModel 代码可以是非常纯粹的逻辑,和 DOM 完全解耦,更易于测试。
2. 因为你无须在 JavaScript 里手动绑定事件,你的 ViewModel 代码可以是非常纯粹的逻辑,和 DOM 完全解耦,更易于测试。

3.当一个 ViewModel 被销毁时,所有的事件处理器都会自动被删除。你无须担心如何清理它们。
3. 当一个 ViewModel 被销毁时,所有的事件处理器都会自动被删除。你无须担心如何清理它们。
2 changes: 1 addition & 1 deletion src/guide/installation.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

## 发布版本说明

最新 beta 版本:3.0.0-rc.9
最新 beta 版本:![beta](https://img.shields.io/npm/v/vue/next.svg)

每个版本的详细发行说明可在 [GitHub](https://github.com/vuejs/vue-next/releases) 上找到。

Expand Down
2 changes: 1 addition & 1 deletion src/guide/introduction.md
Original file line number Diff line number Diff line change
Expand Up @@ -350,4 +350,4 @@ app.mount('#todo-list-app')

## 准备好了吗?

我们刚才简单介绍了 Vue 核心最基本的功能——本教程的其余部分将更加详细地涵盖这些功能以及其它高级功能,所以请务必读完整个教程!
我们刚才简单介绍了 Vue 核心最基本的功能——本教程的其余部分将更加详细地涵盖这些功能以及其它高阶功能,所以请务必读完整个教程!
2 changes: 1 addition & 1 deletion src/guide/migration/async-components.md
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ badges:
const asyncPage = () => import('./NextPage.vue')
```

或者,对于带有选项的更高级组件语法
或者,对于带有选项的更高阶组件语法

```js
const asyncPage = {
Expand Down
4 changes: 2 additions & 2 deletions src/guide/migration/introduction.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
很高兴你这么问!答案是不。我们已经尽了很大的努力来确保大部分 API 是相同的,核心概念没有改变。它很长,因为我们喜欢提供非常详细的解释和包括很多例子。放心。**这不是你必须从头开始阅读的东西**

我们最大的改变可能是新的 [Composition API](/guide/composition-api-introduction.html),这完全是附加的-前面的选项 API 将继续受到支持,因为组合 API 是一个高级特性
我们最大的改变可能是新的 [Composition API](/guide/composition-api-introduction.html),这完全是附加的-前面的选项 API 将继续受到支持,因为组合 API 是一个高阶特性

## 概览

Expand Down Expand Up @@ -59,7 +59,7 @@ Vue 3 中需要关注的一些新功能包括:

> 迁移助手仍在开发中
1. 从运行迁移助手 (还在开发中) 在当前项目。我们仔细缩小了一个高级 Vue dev 并将其压缩到一个简单的命令行界面中。每当他们发现一个过时的功能,他们会让你知道,提供建议,并提供更多信息的链接。
1. 从运行迁移助手 (还在开发中) 在当前项目。我们仔细缩小了一个高阶 Vue dev 并将其压缩到一个简单的命令行界面中。每当他们发现一个过时的功能,他们会让你知道,提供建议,并提供更多信息的链接。

2. 之后,在侧边栏中浏览此页面的目录。如果你看到一个可能会影响你的主题,但是迁移帮助程序没有捕捉到,请查看它。

Expand Down
4 changes: 2 additions & 2 deletions src/guide/single-file-component.md
Original file line number Diff line number Diff line change
Expand Up @@ -52,15 +52,15 @@

### 针对刚接触 JavaScript 模块开发系统的用户

有了 `.vue` 组件,我们就进入了高级 JavaScript 应用领域。如果你没有准备好的话,意味着还需要学会使用一些附加的工具:
有了 `.vue` 组件,我们就进入了高阶 JavaScript 应用领域。如果你没有准备好的话,意味着还需要学会使用一些附加的工具:

- **Node Package Manager (NPM)**: 阅读 [Getting Started guide](https://docs.npmjs.com/packages-and-modules/getting-packages-from-the-registry) 中关于如何从注册地 (registry) 获取包的章节。

- **Modern JavaScript with ES2015/16**:阅读 Babel 的 [Learn ES2015 guide](https://babeljs.io/docs/en/learn)。你不需要立刻记住每一个方法,但是你可以保留这个页面以便后期参考。

在你花一天时间了解这些资源之后,我们建议你参考 [Vue CLI](https://cli.vuejs.org/)。只要遵循指示,你就能很快地运行一个带有 `.vue` 组件、ES2015、webpack 和热重载 (hot-reloading) 的 Vue 项目!

### 针对高级用户
### 针对高阶用户

CLI 会为你搞定大多数工具的配置问题,同时也支持细粒度自定义[配置项](https://cli.vuejs.org/config/)

Expand Down
36 changes: 18 additions & 18 deletions src/guide/transitions-enterleave.md
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
# 进入过渡 & 离开过渡

在插入、更新或从DOM中移除项时,Vue提供了多种应用转换效果的方法。这包括以下工具:
在插入、更新或从 DOM 中移除项时,Vue 提供了多种应用转换效果的方法。这包括以下工具:

- 自动为CSS转换和动画应用class
- 集成第三方CSS动画库,例如 [animate.css](https://animate.style/)
- 在过渡钩子期间使用JavaScript直接操作DOM
- 集成第三方JavaScript动画库
- 自动为 CSS 转换和动画应用 class
- 集成第三方 CSS 动画库,例如 [animate.css](https://animate.style/)
- 在过渡钩子期间使用 JavaScript 直接操作 DOM
- 集成第三方 JavaScript 动画库

在这里,我们只会讲到进入、离开和列表的过渡,你也可以看下一节的[管理过渡状态](transitions-state.html)

Expand Down Expand Up @@ -152,7 +152,7 @@ Vue.createApp(Demo).mount('#demo')

CSS 动画用法同 CSS 过渡,区别是在动画中 `v-enter-from` 类名在节点插入 DOM 后不会立即删除,而是在 `animationend` 事件触发时删除。

下面是一个例子,为了简洁起见,省略了带前缀的CSS规则
下面是一个例子,为了简洁起见,省略了带前缀的 CSS 规则

```html
<div id="example-2">
Expand Down Expand Up @@ -206,7 +206,7 @@ Vue.createApp(Demo).mount('#demo')
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

### 自定义过渡class类名
### 自定义过渡 class 类名

我们可以通过以下 attribute 来自定义过渡类名:

Expand Down Expand Up @@ -351,7 +351,7 @@ methods: {

当只用 JavaScript 过渡的时候,在 **`enter``leave` 钩中必须使用 `done` 进行回调**。否则,它们将被同步调用,过渡会立即完成。推荐对于仅使用 JavaScript 过渡的元素添加 `:css="false"`,Vue 会跳过 CSS 的检测。这也可以避免过渡过程中 CSS 的影响。

现在让我们来看一个例子。下面是一个使用 [GreenSock](https://greensock.com/) 的JavaScript 过渡:
现在让我们来看一个例子。下面是一个使用 [GreenSock](https://greensock.com/) 的 JavaScript 过渡:

```html
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.4/gsap.min.js"></script>
Expand Down Expand Up @@ -439,7 +439,7 @@ Vue.createApp(Demo).mount('#demo')

## 多个元素的过渡

我们之后讨[论多个组件的过渡](#transitioning-between-components),对于原生标签可以使用 `v-if`/`v-else`。最常见的多标签过渡是一个列表和描述这个列表为空消息的元素:
我们之后讨论[多个组件的过渡](#transitioning-between-components),对于原生标签可以使用 `v-if`/`v-else`。最常见的多标签过渡是一个列表和描述这个列表为空消息的元素:

```html
<transition>
Expand All @@ -450,10 +450,10 @@ Vue.createApp(Demo).mount('#demo')
</transition>
```

实际上,通过使用多个 `v-if` 或将单个元素绑定到一个动态property,可以在任意数量的元素之间进行过渡。例如:
实际上,通过使用多个 `v-if` 或将单个元素绑定到一个动态 property,可以在任意数量的元素之间进行过渡。例如:


TODO: 重写示例并放入codepen示例
TODO: 重写示例并放入 codepen 示例

```html
<transition>
Expand Down Expand Up @@ -503,9 +503,9 @@ computed: {
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

在“on”按钮和“off”按钮的过渡中,两个按钮都被重绘了,一个离开过渡的时候另一个开始进入过渡。这是 `<transition>` 的默认行为 - 进入和离开同时发生。
在“on”按钮和“off”按钮的过渡中,两个按钮都被重绘了,一个离开过渡的时候另一个开始进入过渡。这是 `<transition>` 的默认行为 —— 进入和离开同时发生。

有时这很有效,例如当过渡项绝对位于彼此的top时
有时这很有效,例如当过渡项绝对位于彼此的 top 时

<p class="codepen" data-height="300" data-theme-id="39028" data-default-tab="result" data-user="Vue" data-slug-hash="abdQgLr" data-preview="true" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Transition Modes Button Problem- positioning">
<span>See the Pen <a href="https://codepen.io/team/Vue/pen/abdQgLr">
Expand All @@ -523,7 +523,7 @@ computed: {
很快就会发现 `out-in` 是你大多数时候想要的状态 :)
:::

现在让我们用 `out-in` 更新on/off按钮的转换
现在让我们用 `out-in` 更新 on/off 按钮的转换

```html
<transition name="fade" mode="out-in">
Expand All @@ -538,9 +538,9 @@ computed: {
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

通过添加一个attribute,我们修复了原来的过渡,而不必添加任何特殊style
通过添加一个 attribute,我们修复了原来的过渡,而不必添加任何特殊 style

我们可以用它来协调更具表现力的动作,例如折叠卡片,如下所示。实际上是两个元素在彼此之间转换,但是由于开始状态和结束状态的比例是相同的:水平为0,它看起来就像一个流体运动。这种轻描淡写对于真实的UI微交互非常有用
我们可以用它来协调更具表现力的动作,例如折叠卡片,如下所示。实际上是两个元素在彼此之间转换,但是由于开始状态和结束状态的比例是相同的:水平为0,它看起来就像一个流体运动。这种轻描淡写对于真实的 UI 微交互非常有用

<p class="codepen" data-height="300" data-theme-id="39028" data-default-tab="result" data-user="Vue" data-slug-hash="76e344bf057bd58b5936bba260b787a8" data-preview="true" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Transition Modes Flip Cards">
<span>See the Pen <a href="https://codepen.io/team/Vue/pen/76e344bf057bd58b5936bba260b787a8">
Expand All @@ -551,9 +551,9 @@ computed: {

## 多个组件之间过渡

组件之间的过渡更简单 —— 我们甚至不需要 `key` 属性。相反,我们包装了一个 [动态组件](component-basics.html#动态组件)
组件之间的过渡更简单 —— 我们甚至不需要 `key` 属性。相反,我们包装了一个[动态组件](component-basics.html#动态组件)

TODO: 更新到Vue 3
TODO: 更新到 Vue 3

```html
<transition name="component-fade" mode="out-in">
Expand Down
4 changes: 2 additions & 2 deletions src/style-guide/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -770,7 +770,7 @@ components/

### 组件名中的单词顺序<sup data-p="b">强烈推荐</sup>

**组件名应该以高级别的 (通常是一般化描述的) 单词开头,以描述性的修饰词结尾**
**组件名应该以高阶的 (通常是一般化描述的) 单词开头,以描述性的修饰词结尾**

::: details 详解
你可能会疑惑:
Expand All @@ -785,7 +785,7 @@ components/

如果你愿意,你完全可以在组件名里包含这些连接词,但是单词的顺序很重要。

同样要注意**在你的应用中所谓的“高级别”是跟语境有关的**。比如对于一个带搜索表单的应用来说,它可能包含这样的组件:
同样要注意**在你的应用中所谓的“高阶”是跟语境有关的**。比如对于一个带搜索表单的应用来说,它可能包含这样的组件:

```
components/
Expand Down

0 comments on commit e56ad3a

Please sign in to comment.