From 5485e0248ff1fd5a12789c69a1f1be9728d79074 Mon Sep 17 00:00:00 2001 From: hijiangtao Date: Thu, 6 Oct 2016 10:26:07 +0800 Subject: [PATCH 001/167] translate index.md - ArticleID: 2 --- src/guide/index.md | 116 ++++++++++++++++++++------------------------- 1 file changed, 52 insertions(+), 64 deletions(-) diff --git a/src/guide/index.md b/src/guide/index.md index 0e14e67c89..4b05345b55 100644 --- a/src/guide/index.md +++ b/src/guide/index.md @@ -4,19 +4,22 @@ type: guide order: 2 --- -## What is Vue.js? +## Vue.js 是什么 -Vue (pronounced /vjuː/, like **view**) is a **progressive framework** for building user interfaces. Unlike other monolithic frameworks, Vue is designed from the ground up to be incrementally adoptable. The core library is focused on the view layer only, and is very easy to pick up and integrate with other libraries or existing projects. On the other hand, Vue is also perfectly capable of powering sophisticated Single-Page Applications when used in combination with [modern tooling](single-file-components.html) and [supporting libraries](https://github.com/vuejs/awesome-vue#libraries--plugins). +Vue.js（读音 /vjuː/, 类似于 **view**）是一个构建用户界面的渐进式框架。与其他单层框架（ monolithic frameworks）不同的是，Vue 被设计成从底层向上可以被增量式的采用。Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。另一方面，Vue 完全有能力驱动采用[现代化工具](//vuejs.org/guide/application.html)和[Vue生态系统支持的库](//github.com/vuejs/awesome-vue#libraries--plugins)开发的复杂单页应用。 -If you are an experienced frontend developer and want to know how Vue compares to other libraries/frameworks, check out the [Comparison with Other Frameworks](comparison.html). -## Getting Started +Vue.js 的目标是通过尽可能简单的 API 实现**响应的数据绑定**和**组合的视图组件**。 -The easiest way to try out Vue.js is using the [JSFiddle Hello World example](https://jsfiddle.net/chrisvfritz/4tpzm3e1/). Feel free to open it in another tab and follow along as we go through some basic examples. If you prefer downloading / installing from a package manager, check out the [Installation](/guide/installation.html) page. +如果你是有经验的前端开发者，想知道 Vue.js 与其它库/框架的区别，查看[对比其它框架](//vuejs.org/guide/comparison.html)。 -## Declarative Rendering +## 起步 -At the core of Vue.js is a system that enables us to declaratively render data to the DOM using straightforward template syntax: +尝试 Vue.js 最简单的方法是使用 [JSFiddle Hello World 例子](//jsfiddle.net/chrisvfritz/4tpzm3e1/)。请在浏览器新标签页中打开它，跟着我们查看一些基础示例。如果你喜欢用包管理器下载/安装，查看[安装](//vuejs.org/guide/installation.html)教程。 + +## 声明式渲染 + +Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进DOM的系统： ``` html
@@ -24,10 +27,10 @@ At the core of Vue.js is a system that enables us to declaratively render data t
``` ``` js -var app = new Vue({ +new Vue({ el: '#app', data: { - message: 'Hello Vue!' + message: 'Hello Vue.js!' } }) ``` @@ -45,22 +48,20 @@ var app = new Vue({ {% endraw %} -We have already created our very first Vue app! This looks pretty similar to just rendering a string template, but Vue has done a lot of work under the hood. The data and the DOM are now linked, and everything is now **reactive**. How do we know? Just open up your browser's JavaScript console and set `app.message` to a different value. You should see the rendered example above update accordingly. +我们已经生成了我们的第一个 Vue 应用！看起来这跟单单渲染一个字符串模板非常类似，但是 Vue.js 在背后做了大量工作。现在数据和DOM已经被绑定在一起，所有的元素都是**响应式的（reactive）**。我们如何知道?打开你的浏览器的控制台，并修改 `app.message`，你将看到上例相应地更新。 -In addition to text interpolation, we can also bind element attributes like this: +除了绑定插入的文本内容，我们还可以采用这样的方式绑定 DOM 元素属性： ``` html
- - Hover your mouse over me for a few seconds to see my dynamically bound title! - + Inspect me
``` ``` js var app2 = new Vue({ el: '#app-2', data: { - message: 'You loaded this page on ' + new Date() + id: 'inspect-me' } }) ``` @@ -80,20 +81,19 @@ var app2 = new Vue({ {% endraw %} -Here we are encountering something new. The `v-bind` attribute you are seeing is called a **directive**. Directives are prefixed with `v-` to indicate that they are special attributes provided by Vue, and as you may have guessed, they apply special reactive behavior to the rendered DOM. Here it is basically saying "keep this element's `title` attribute up-to-date with the `message` property on the Vue instance." +这里我们遇到新东西。你看到的 `v-bind` 特性被称为**指令**。指令带有前缀 `v-`，以指示它们是 Vue.js 提供的特殊特性。并且如你所想象的，它们会对绑定的目标元素添加响应式的特殊行为。这个指令的简单含义是说：将该元素的 id 属性绑定到 Vue 实例的 id 属性上。 -If you open up your JavaScript console again and enter `app2.message = 'some new message'`, you'll once again see that the bound HTML - in this case the `title` attribute - has been updated. +用浏览器的开发者工具去监测以上元素 - 你会发现 这个元素的 id 为 `inspect-me`。是的，如果你在控制台里更改`app2.id`，那么该元素的 id 也会随之更新。 -## Conditionals and Loops +## 条件与循环 -It's quite simple to toggle the presence of an element, too: +控制切换一个元素的显示也相当简单： ``` html

Now you see me

``` - ``` js var app3 = new Vue({ el: '#app-3', @@ -117,11 +117,11 @@ var app3 = new Vue({ {% endraw %} -Go ahead and enter `app3.seen = false` in the console. You should see the message disappear. +继续在控制台设置 `app3.seen = false`，你会发现 “Now you see me” 消失了。 -This example demonstrates that we can bind data to not only text and attributes, but also the **structure** of the DOM. Moreover, Vue also provides a powerful transition effect system that can automatically apply [transition effects](transitions.html) when elements are inserted/updated/removed by Vue. +这个例子演示了我们不仅可以绑定 DOM 文本到数据，也可以绑定 DOM **结构** 到数据。而且，Vue.js 也提供一个强大的过渡效果系统，可以在 Vue 插入/删除元素时自动应用[过渡效果](//vuejs.org/guide/transitions.html)。 -There are quite a few other directives, each with its own special functionality. For example, the `v-for` directive can be used for displaying a list of items using the data from an Array: +也有一些其它指令，每个都有特殊的功能。例如， `v-for` 指令可以绑定数据到数据来渲染一个列表： ``` html
@@ -144,6 +144,7 @@ var app4 = new Vue({ } }) ``` + {% raw %}
    @@ -166,11 +167,11 @@ var app4 = new Vue({ {% endraw %} -In the console, enter `app4.todos.push({ text: 'New item' })`. You should see a new item appended to the list. +在控制台里，输入`app4.todos.push({ text: 'New item' })`。你会发现列表中多了一栏新内容。 -## Handling User Input +## 处理用户输入 -To let users interact with your app, we can use the `v-on` directive to attach event listeners that invoke methods on our Vue instances: +为了让用户和你的应用进行互动，我们可以用 `v-on` 指令绑定一个监听事件用于调用我们 Vue 实例中定义的方法： ``` html
    @@ -191,6 +192,7 @@ var app5 = new Vue({ } }) ``` + {% raw %}

    {{ message }}

    @@ -211,9 +213,9 @@ var app5 = new Vue({ {% endraw %} -Note in the method we simply update the state of our app without touching the DOM - all DOM manipulations are handled by Vue, and the code you write is focused on the underlying logic. +在 `reverseMessage` 方法中，我们在没有接触 DOM 的情况下更新了应用的状态 - 所有的 DOM 操作都由 Vue 来处理，你写的代码只需要关注基本逻辑。 -Vue also provides the `v-model` directive that makes two-way binding between form input and app state a breeze: +Vue 也提供了 `v-model` 指令，它使得在表单输入和应用状态中做双向数据绑定变得非常轻巧。 ``` html
    @@ -229,6 +231,7 @@ var app6 = new Vue({ } }) ``` + {% raw %}

    {{ message }}

    @@ -244,70 +247,55 @@ var app6 = new Vue({ {% endraw %} -## Composing with Components +## 用组件构建（应用） -The component system is another important concept in Vue, because it's an abstraction that allows us to build large-scale applications composed of small, self-contained, and often reusable components. If we think about it, almost any type of application interface can be abstracted into a tree of components: +组件系统是 Vue.js 另一个重要概念，因为它提供了一种抽象，让我们可以用独立可复用的小组件来构建大型应用。如果我们考虑到这点，几乎任意类型的应用的界面都可以抽象为一个组件树： ![Component Tree](/images/components.png) -In Vue, a component is essentially a Vue instance with pre-defined options. Registering a component in Vue is straightforward: +在 Vue 里，一个组件实质上是一个拥有预定义选项的一个 Vue 实例： ``` js -// Define a new component called todo-item -Vue.component('todo-item', { +Vue.component('todo', { template: '
  1. This is a todo
    2. ' }) ``` -Now you can compose it in another component's template: +现在你可以另一个组件模板中写入它： ``` html
      - - +
    ``` -But this would render the same text for every todo, which is not super interesting. We should be able to pass data from the parent scope into child components. Let's modify the component definition to make it accept a [prop](/guide/components.html#Props): +但是这样会为每个 todo 渲染同样的文本，这看起来并不是很6。我们应该将数据从父作用域传到子组件。让我们来修改一下组件的定义，使得它能够接受一个 [`prop`](//vuejs.org/guide/components.html#Props) 字段： ``` js -Vue.component('todo-item', { - // The todo-item component now accepts a - // "prop", which is like a custom attribute. - // This prop is called todo. +Vue.component('todo', { props: ['todo'], template: '
  2. {{ todo.text }}
    3. ' }) ``` -Now we can pass the todo into each repeated component using `v-bind`: +现在，我们可以使用 `v-bind` 指令将 todo 传到每一个重复的组件中： ``` html
      - - +
    -``` +``` ``` js var app7 = new Vue({ el: '#app-7', data: { - todos: [ - { text: 'Learn JavaScript' }, - { text: 'Learn Vue' }, - { text: 'Build something awesome' } - ] + todos: [/* ... */] } }) ``` + {% raw %}
      @@ -332,9 +320,9 @@ var app7 = new Vue({ {% endraw %} -This is just a contrived example, but we have managed to separate our app into two smaller units, and the child is reasonably well-decoupled from the parent via the props interface. We can now further improve our `` component with more complex template and logic without affecting the parent app. +这只是一个人为的例子，但是我们已经将我们的应用分割成了两小的单元，子元素通过 `props` 接口实现了与父亲元素很好的解耦。我们现在可以在不影响到父亲应用的基础上，进一步为我们的 `todo` 组件改进更多复杂的模板和逻辑。 -In a large application, it is necessary to divide the whole app into components to make development manageable. We will talk a lot more about components [later in the guide](/guide/components.html), but here's an (imaginary) example of what an app's template might look like with components: +在一个大型应用中，为了使得开发过程可控，有必要将应用整体分割成一个个的组件。在[后面的教程](//vuejs.org/guide/components.html)中我们将详述组件，不过这里有一个（假想）的例子，看看使用了组件的应用模板是什么样的： ``` html
      @@ -346,14 +334,14 @@ In a large application, it is necessary to divide the whole app into components
      ``` -### Relation to Custom Elements +## 与自定义元素的关系 -You may have noticed that Vue components are very similar to **Custom Elements**, which are part of the [Web Components Spec](http://www.w3.org/wiki/WebComponents/). That's because Vue's component syntax is loosely modeled after the spec. For example, Vue components implement the [Slot API](https://github.com/w3c/webcomponents/blob/gh-pages/proposals/Slots-Proposal.md) and the `is` special attribute. However, there are a few key differences: +你可能已经注意到 Vue.js 组件非常类似于**自定义元素**——它是 [Web 组件规范](//www.w3.org/wiki/WebComponents/)的一部分。实际上 Vue.js 的组件语法参考了该规范。例如 Vue 组件实现了 [Slot API](//github.com/w3c/webcomponents/blob/gh-pages/proposals/Slots-Proposal.md) 与 `is` 特性。但是，有几个关键的不同： -1. The Web Components Spec is still in draft status, and is not natively implemented in every browser. In comparison, Vue components don't require any polyfills and work consistently in all supported browsers (IE9 and above). When needed, Vue components can also be wrapped inside a native custom element. +1. Web 组件规范仍然远未完成，并且没有浏览器实现。相比之下，Vue.js 组件不需要任何补丁，并且在所有支持的浏览器（IE9 及更高版本）之下表现一致。必要时，Vue.js 组件也可以放在原生自定义元素之内。 -2. Vue components provide important features that are not available in plain custom elements, most notably cross-component data flow, custom event communication and build tool integrations. +2. Vue.js 组件提供了原生自定义元素所不具备的一些重要功能，比如组件间的数据流，自定义事件系统，以及动态的、带特效的组件替换。 -## Ready for More? +## 准备好探索更广阔的世界了？ -We've just briefly introduced the most basic features of Vue.js core - the rest of this guide will cover them and other advanced features with much finer details, so make sure to read through it all! +我们刚才简单介绍了 Vue.js 核心的一些最基本的特征 - 本指南的其余部分将用更详尽的篇幅去描述其他的一些高级特性，所以一定要阅读完所有的内容哦！ From 96f87ec6c2196d7840d07196140399697181cbad Mon Sep 17 00:00:00 2001 From: hijiangtao Date: Thu, 6 Oct 2016 10:39:51 +0800 Subject: [PATCH 002/167] modify index.md linking address --- src/guide/index.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/guide/index.md b/src/guide/index.md index 4b05345b55..c1efd2dfd8 100644 --- a/src/guide/index.md +++ b/src/guide/index.md @@ -6,16 +6,16 @@ order: 2 ## Vue.js 是什么 -Vue.js（读音 /vjuː/, 类似于 **view**）是一个构建用户界面的渐进式框架。与其他单层框架（ monolithic frameworks）不同的是，Vue 被设计成从底层向上可以被增量式的采用。Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。另一方面，Vue 完全有能力驱动采用[现代化工具](//vuejs.org/guide/application.html)和[Vue生态系统支持的库](//github.com/vuejs/awesome-vue#libraries--plugins)开发的复杂单页应用。 +Vue.js（读音 /vjuː/, 类似于 **view**）是一个构建用户界面的渐进式框架。与其他单层框架（ monolithic frameworks）不同的是，Vue 被设计成从底层向上可以被增量式的采用。Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。另一方面，Vue 完全有能力驱动采用[单文件组件](single-file-components.html)和[Vue生态系统支持的库](//github.com/vuejs/awesome-vue#libraries--plugins)开发的复杂单页应用。 Vue.js 的目标是通过尽可能简单的 API 实现**响应的数据绑定**和**组合的视图组件**。 -如果你是有经验的前端开发者，想知道 Vue.js 与其它库/框架的区别，查看[对比其它框架](//vuejs.org/guide/comparison.html)。 +如果你是有经验的前端开发者，想知道 Vue.js 与其它库/框架的区别，查看[对比其它框架](comparison.html)。 ## 起步 -尝试 Vue.js 最简单的方法是使用 [JSFiddle Hello World 例子](//jsfiddle.net/chrisvfritz/4tpzm3e1/)。请在浏览器新标签页中打开它，跟着我们查看一些基础示例。如果你喜欢用包管理器下载/安装，查看[安装](//vuejs.org/guide/installation.html)教程。 +尝试 Vue.js 最简单的方法是使用 [JSFiddle Hello World 例子](//jsfiddle.net/chrisvfritz/4tpzm3e1/)。请在浏览器新标签页中打开它，跟着我们查看一些基础示例。如果你喜欢用包管理器下载/安装，查看[安装](/guide/installation.html)教程。 ## 声明式渲染 @@ -119,7 +119,7 @@ var app3 = new Vue({ 继续在控制台设置 `app3.seen = false`，你会发现 “Now you see me” 消失了。 -这个例子演示了我们不仅可以绑定 DOM 文本到数据，也可以绑定 DOM **结构** 到数据。而且，Vue.js 也提供一个强大的过渡效果系统，可以在 Vue 插入/删除元素时自动应用[过渡效果](//vuejs.org/guide/transitions.html)。 +这个例子演示了我们不仅可以绑定 DOM 文本到数据，也可以绑定 DOM **结构** 到数据。而且，Vue.js 也提供一个强大的过渡效果系统，可以在 Vue 插入/删除元素时自动应用[过渡效果](transitions.html)。 也有一些其它指令，每个都有特殊的功能。例如， `v-for` 指令可以绑定数据到数据来渲染一个列表： @@ -269,7 +269,7 @@ Vue.component('todo', { ``` -但是这样会为每个 todo 渲染同样的文本，这看起来并不是很6。我们应该将数据从父作用域传到子组件。让我们来修改一下组件的定义，使得它能够接受一个 [`prop`](//vuejs.org/guide/components.html#Props) 字段： +但是这样会为每个 todo 渲染同样的文本，这看起来并不是很6。我们应该将数据从父作用域传到子组件。让我们来修改一下组件的定义，使得它能够接受一个 [`prop`](/guide/components.html#Props) 字段： ``` js Vue.component('todo', { @@ -322,7 +322,7 @@ var app7 = new Vue({ 这只是一个人为的例子，但是我们已经将我们的应用分割成了两小的单元，子元素通过 `props` 接口实现了与父亲元素很好的解耦。我们现在可以在不影响到父亲应用的基础上，进一步为我们的 `todo` 组件改进更多复杂的模板和逻辑。 -在一个大型应用中，为了使得开发过程可控，有必要将应用整体分割成一个个的组件。在[后面的教程](//vuejs.org/guide/components.html)中我们将详述组件，不过这里有一个（假想）的例子，看看使用了组件的应用模板是什么样的： +在一个大型应用中，为了使得开发过程可控，有必要将应用整体分割成一个个的组件。在[后面的教程](/guide/components.html)中我们将详述组件，不过这里有一个（假想）的例子，看看使用了组件的应用模板是什么样的： ``` html
      From 513497c0b92197f8f3b692ad2512b7a86f8b498c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=B8=81=E4=B8=80=E9=B8=A3?= <315129552@qq.com> Date: Thu, 6 Oct 2016 10:39:53 +0800 Subject: [PATCH 003/167] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E7=BF=BB=E8=AF=91?= =?UTF-8?q?=E6=8C=87=E5=8D=97?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/about/api.md | 16 ++++++++++++++++ src/about/guide.md | 44 ++++++++++++++++++++------------------------ src/about/index.md | 43 ++++++++++++++++++++++++++++++++++++++++--- 3 files changed, 76 insertions(+), 27 deletions(-) create mode 100644 src/about/api.md diff --git a/src/about/api.md b/src/about/api.md new file mode 100644 index 0000000000..4aebbfebb2 --- /dev/null +++ b/src/about/api.md @@ -0,0 +1,16 @@ +--- +title: 参与API翻译 +type: about +order: 2 +--- + +> 原文地址：http://vuejs.org/guide/ +> 仓库：https://github.com/vuefe/vuejs.org + +- 加QQ群参与翻译: `427447379` +- [翻译Guide认领](https://github.com/vuefe/vuejs.org/issues/1) +- [翻译API认领](https://github.com/vuefe/vuejs.org/issues/44) +- [翻译指引](https://github.com/vuefe/vuejs.org/issues/25) + +## API文档翻译进度 + diff --git a/src/about/guide.md b/src/about/guide.md index 79d4a353b2..630cdfe6c4 100644 --- a/src/about/guide.md +++ b/src/about/guide.md @@ -1,39 +1,35 @@ --- -title: 参与指南 +title: 参与教程翻译 type: about -order: 2 +order: 1 --- -- 加QQ群参与翻译: `427447379` -- [翻译Guide认领](https://github.com/vuefe/vuejs.org/issues/1) -- [翻译指引](https://github.com/vuefe/vuejs.org/issues/25) - -## 翻译进度 - > 原文地址：http://vuejs.org/guide/ > 仓库：https://github.com/vuefe/vuejs.org -### 说明 +- 加QQ群参与翻译: `427447379` +- [翻译Guide认领](https://github.com/vuefe/vuejs.org/issues/1) +- [翻译API认领](https://github.com/vuefe/vuejs.org/issues/44) +- [翻译指引](https://github.com/vuefe/vuejs.org/issues/25) -- 翻译前，请在此回复认领 -- 认领格式 ：` 我翻译 + 文档序号` 即可 +## 教程（guide）文档翻译进度 -## 以下所有文档所在目录为 `src/guide/xxx.md` +> 以下所有文档所在目录为 `src/guide/xxx.md` ### Essentials 基础 序号 | 是否完成 | 对应文档文件名 | 中文标题 | 贡献者 | 认领者 ----- | ------- | ------------- | --- | --- | --- -1 | 是 | installation.md | 安装 | @dingyiming | - -2 | 否 | index.md | 介绍 | | @dingyiming -3 | 是 | instance.md | 实例 | @dingyiming | - -4 | × | syntax.md | 模板语法 | | | -5 | 是 | computed.md | 计算属性 | @dingyiming | - -6 | × | class-and-style.md | Class 与 Style 绑定 | | -7 | 是 | conditional.md | 条件渲染 | @dingyiming | - +1 | 是 | installation.md | 安装 | @dingyiming | @dingyiming +2 | 否 | index.md | 介绍 | | @dingyiming @hijiangtao +3 | 是 | instance.md | 实例 | @dingyiming | @dingyiming +4 | × | syntax.md | 模板语法 | | @tingtien +5 | 是 | computed.md | 计算属性 | @dingyiming | @dingyiming +6 | × | class-and-style.md | Class 与 Style 绑定 | | @595074187 +7 | 是 | conditional.md | 条件渲染 | @dingyiming | @dingyiming 8 | 是 | list.md | 列表渲染 | @tingtien | @tingtien -9 | 是 | events.md | 事件处理器 | @dingyiming | - -10 | 是 | forms.md | 表单控件绑定 | @dingyiming | - +9 | 是 | events.md | 事件处理器 | @dingyiming | @dingyiming +10 | 是 | forms.md | 表单控件绑定 | @dingyiming | @dingyiming 11 | × | components.md | 组件 | | @ezreally ### Advanced 进阶 @@ -47,9 +43,9 @@ order: 2 16 | 是 | custom-directive.md | 自定义指令 | @harrytospring | @harrytospring 17 | 是 | mixins.md | 混合 | @harrytospring | @harrytospring 18 | x | plugins.md | 插件 | | @hgcoder -19 | x | single-file-components.md | 单文件组件 | | +19 | x | single-file-components.md | 单文件组件 | | @ATLgo 20 | 是 | routing.md | 路由 | @dingyiming | @dingyiming -21 | x | state-management.md | 状态管理 | | +21 | x | state-management.md | 状态管理 | | @dear-lizhihua 22 | x | unit-testing.md | 单元测试 | | @70data 23 | 是 | ssr.md | 服务端渲染 | @dingyiming | @dingyiming 24 | x | migration.md | 1.x迁移 | | @harrytospring @@ -59,4 +55,4 @@ order: 2 序号 | 是否完成 | 对应文档文件名 | 中文标题 | 贡献者 | 认领者 ----- | ------- | ------------- | --- | --- | --- 25 | x | comparison.md | 对比其他框架 | | @yongbolv @daix6 -26 | x | join.md | 加入Vue.js社区 | | @daix6 +26 | x | join.md | 加入Vue.js社区 | | @daix6 \ No newline at end of file diff --git a/src/about/index.md b/src/about/index.md index 83e2b741fc..2ca0164672 100644 --- a/src/about/index.md +++ b/src/about/index.md @@ -1,8 +1,45 @@ --- -title: 关于翻译 +title: 参与指南 type: about -order: 1 +order: 0 --- +> 原文地址：http://vuejs.org/guide/ +> 仓库：https://github.com/vuefe/vuejs.org + - 加QQ群参与翻译: `427447379` -- [翻译Guide认领](https://github.com/vuefe/vuejs.org/issues/1) \ No newline at end of file +- [翻译Guide认领](https://github.com/vuefe/vuejs.org/issues/1) +- [翻译API认领](https://github.com/vuefe/vuejs.org/issues/44) +- [翻译指引](https://github.com/vuefe/vuejs.org/issues/25) + + +## 说明 + +- 翻译前，请在对应 issue 回复认领 +- 认领格式 ：` 我翻译 + 文档序号` 即可 +- 支持多人协作翻译，冲突可以解决，认领过的，如果你觉着他太慢，可以再次认领，加速翻译，知道大家都是牺牲业余时间来贡献，所以慢也是可以理解的，慢就需要大家一起帮帮忙了！谢谢。 + +## 基础指引 + +## 基础环境 + +- `node lastest` +- `npm lastest` +- `npm i -g hexo` +- `git bash` + +## 主要步骤 + +- `github fork` 仓库代码到自己的账号下 +- `git clone fork` 的仓库代码到本地 +- 进入项目目录 ，`npm install` 安装依赖 +- `hexo s` 启动项目，浏览器打开 `localhost:4000` 查看当前文档情况，已支持browsersync热加载 ，可边改边看 +- 然后用自己喜欢的编辑器，比如`sublime text 3` 打开项目目录，找到 `src/guide` 目录 , 也就是当前文档翻译的目录，根据github 仓库中，认领issue中对照文件名.md ，认领自己打算翻译的内容，然后打开该文件就可以进行翻译了！ +![image](https://cloud.githubusercontent.com/assets/12537013/18859543/b6e3d724-84a7-11e6-9bb6-812c45c16782.png) + +- 翻译完后，使用git 提交更新到自己的仓库，后，在`https://github.com/vuefe/vuejs.org/pulls` 提交合并请求 +![image](https://cloud.githubusercontent.com/assets/12537013/19106938/68c786fa-8b1c-11e6-8ea0-30f97cf1a83b.png) + +- 在QQ群里呼叫群主，合并请求 +- 群主合并内容，并记录贡献， 更新在线静态站内容 + From ea7f045e3219f42619df011ea9855aa101c590bd Mon Sep 17 00:00:00 2001 From: 70data <70data@gmail.com> Date: Thu, 6 Oct 2016 10:39:58 +0800 Subject: [PATCH 004/167] Update unit-testing.md --- src/guide/unit-testing.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/guide/unit-testing.md b/src/guide/unit-testing.md index ff8743adbe..e4bbee1eb3 100644 --- a/src/guide/unit-testing.md +++ b/src/guide/unit-testing.md @@ -6,7 +6,7 @@ order: 22 ## 配置和工具 -Anything compatible with a module-based build system will work, but if you're looking for a specific recommendation, try the [Karma](http://karma-runner.github.io) test runner. It has a lot of community plugins, including support for [Webpack](https://github.com/webpack/karma-webpack) and [Browserify](https://github.com/Nikku/karma-browserify). For detailed setup, please refer to each project's respective documentation, though these example Karma configurations for [Webpack](https://github.com/vuejs/vue-loader-example/blob/master/build/karma.conf.js) and [Browserify](https://github.com/vuejs/vueify-example/blob/master/karma.conf.js) may help you get started. +Anything compatible with a module-based build system will work, but if you're looking for a specific recommendation, 使用 [Karma](http://karma-runner.github.io) 进行自动化测试. It has a lot of community plugins, including support for [Webpack](https://github.com/webpack/karma-webpack) and [Browserify](https://github.com/Nikku/karma-browserify). For detailed setup, please refer to each project's respective documentation, though these example Karma configurations for [Webpack](https://github.com/vuejs/vue-loader-example/blob/master/build/karma.conf.js) and [Browserify](https://github.com/vuejs/vueify-example/blob/master/karma.conf.js) may help you get started. ## 简单的断言 From 9a62087a21ba3640b1ffc65558ff17d29e6753d9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=B8=81=E4=B8=80=E9=B8=A3?= <315129552@qq.com> Date: Thu, 6 Oct 2016 10:42:28 +0800 Subject: [PATCH 005/167] =?UTF-8?q?=E6=9B=B4=E6=96=B0=E4=B8=8B=E5=9C=B0?= =?UTF-8?q?=E5=9D=80=E8=AF=B4=E6=B3=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/about/api.md | 4 ++-- src/about/guide.md | 4 ++-- src/about/index.md | 4 ++-- 3 files changed, 6 insertions(+), 6 deletions(-) diff --git a/src/about/api.md b/src/about/api.md index 4aebbfebb2..a89fbb06d8 100644 --- a/src/about/api.md +++ b/src/about/api.md @@ -4,8 +4,8 @@ type: about order: 2 --- -> 原文地址：http://vuejs.org/guide/ -> 仓库：https://github.com/vuefe/vuejs.org +> 官方文档仓库：http://vuejs.org/guide/ +> 翻译文档仓库：https://github.com/vuefe/vuejs.org - 加QQ群参与翻译: `427447379` - [翻译Guide认领](https://github.com/vuefe/vuejs.org/issues/1) diff --git a/src/about/guide.md b/src/about/guide.md index 630cdfe6c4..576bacd6b7 100644 --- a/src/about/guide.md +++ b/src/about/guide.md @@ -4,8 +4,8 @@ type: about order: 1 --- -> 原文地址：http://vuejs.org/guide/ -> 仓库：https://github.com/vuefe/vuejs.org +> 官方文档仓库：http://vuejs.org/guide/ +> 翻译文档仓库：https://github.com/vuefe/vuejs.org - 加QQ群参与翻译: `427447379` - [翻译Guide认领](https://github.com/vuefe/vuejs.org/issues/1) diff --git a/src/about/index.md b/src/about/index.md index 2ca0164672..2d338475d3 100644 --- a/src/about/index.md +++ b/src/about/index.md @@ -4,8 +4,8 @@ type: about order: 0 --- -> 原文地址：http://vuejs.org/guide/ -> 仓库：https://github.com/vuefe/vuejs.org +> 官方文档仓库：http://vuejs.org/guide/ +> 翻译文档仓库：https://github.com/vuefe/vuejs.org - 加QQ群参与翻译: `427447379` - [翻译Guide认领](https://github.com/vuefe/vuejs.org/issues/1) From aba5086f9305e82813c4bfee163e297575e352d5 Mon Sep 17 00:00:00 2001 From: Shawn Dai Date: Thu, 6 Oct 2016 10:42:49 +0800 Subject: [PATCH 006/167] join finished --- src/guide/join.md | 52 +++++++++++++++++++++++------------------------ 1 file changed, 26 insertions(+), 26 deletions(-) diff --git a/src/guide/join.md b/src/guide/join.md index 522cf06243..995ba30f24 100644 --- a/src/guide/join.md +++ b/src/guide/join.md @@ -4,48 +4,48 @@ type: guide order: 27 --- -Vue's community is growing incredibly fast and if you're reading this, there's a good chance you're ready to join it. So... welcome! +Vue.js 的社区正在急速增长，如果你正在阅读本文，这是你已经准备好加入 Vue.js 社区的大好机会。所以...欢迎！ -Now we'll answer both what the community can do for and what you can do for the community. +现在我们来解答社区能为你做什么以及你能为社区做什么。 -## Resources You'll Enjoy +## 你会热爱的资源 -### Get Support +### 获取帮助 -- [Forum](http://forum.vuejs.org/): THE best place to ask questions and get answers about Vue and its ecosystem. -- [Gitter Channel](https://gitter.im/vuejs/vue): A place for devs to meet and chat. You can ask questions here too, but the forum is the better platform, since the discussions are threaded. -- [Github](https://github.com/vuejs): If you have a bug to report or feature to request, that's what the GitHub issues are for. We also welcome pull requests! +- [论坛](http://forum.vuejs.org/)：询问与 Vue 及其生态的相关问题的最佳地点。 +- [Gitter 频道](https://gitter.im/vuejs/vue)：开发者聊天室。你也可以在这儿提问，但论坛更适合提问，因为论坛提供板块。 +- [Github](https://github.com/vuejs)：如果你想报告 bugs 或者提供新的特性，那正是 Github issues 的功能。我们也非常欢迎 pull requests！ -### Explore the Ecosystem +### 探索生态 -- [The Awesome Vue Page](https://github.com/vuejs/awesome-vue): See what other awesome resources have been published by other awesome people. -- [The "Show and Tell" Subforum](http://forum.vuejs.org/category/15/show-tell): Another great place to check out what others have built with and for the growing Vue ecosystem. +- [Awesome Vue](https://github.com/vuejs/awesome-vue)：一览其他牛人发布的优秀资源。 +- ["Show and Tell" 子论坛](http://forum.vuejs.org/category/15/show-tell)：又一个好地方，可以欣赏他人借助不断壮大的 Vue 生态构建的事物，以及他人为不断壮大的 Vue 生态贡献的力量。 -## What You Can Do +## 你力所能及的 -### Contribute Code +### 贡献代码 -As with any project, there are rules to contributing. To ensure that we can help you or accept your pull request as quickly as possible, please read [the contributing guide](https://github.com/vuejs/vue/blob/dev/CONTRIBUTING.md). +就像所有的项目一样，贡献代码是有规则的。为了保证我们能尽快地帮助你或者接受你的 pull requests，请阅读这份[贡献指南](https://github.com/vuejs/vue/blob/dev/CONTRIBUTING.md)。 -After that, you'll be ready to contribute to Vue's core repositories: +阅读之后，你应当已经准备好贡献 Vue 的核心仓库了： -- [vue](https://github.com/vuejs/vue): the core library -- [vuex](https://github.com/vuejs/vuex): Flux-inspired state management -- [vue-router](https://github.com/vuejs/vue-router): a routing system for SPAs +- [vue](https://github.com/vuejs/vue): 核心库 +- [vuex](https://github.com/vuejs/vuex): 类 Flux 的状态管理 +- [vue-router](https://github.com/vuejs/vue-router): 为单页面应用提供的路由系统 -...as well as many smaller official [companion libraries](https://github.com/vuejs). +...还有许多小型的官方[同伴库](https://github.com/vuejs)。 -### Share (and Build) Your Experience +## 分享（并构筑）你的见识 -Apart from answering questions and sharing resources in the forum and Gitter channel, there are a few other less obvious ways to share and expand what you know: +除了在论坛域 Gitter 频道回答问题、分享资源外，还有一些更微小的方式可以分享并增长你的见识： -- **Develop learning materials.** It's often said that the best way to learn is to teach. If there's something interesting you're doing with Vue, strengthen your expertise by writing a blog post, developing a workshop, or even just publishing a gist that you share on social media. -- **Watch a repo you care about.** This will send you notifications whenever there's activity in that repository, giving you insider knowledge about ongoing discussions and upcoming features. It's a fantastic way to build expertise so that you're eventually able to help address issues and pull requests. +- **开发学习材料。**常说最好的学习方式就是教导。如果你正在用 Vue 做一些有趣的事情，你可以写一篇博客、组织研讨会、或者只发布一个 gist，然后分享到社交平台：这些都能加强你的特专门知识。 +- **关注（watch）你关心的仓库。**这样无论何时该仓库有新的动静，它都会第一时间通知你，提供关于正在进行的讨论以及即将到来的新特性的新鲜情报。这是超棒的提高专门知识的方法，然后你将终于有能力来解决问题（issues）并提交 pull requests。 -### Translate Docs +### 翻译文档 -Vue has already spread across the globe, with even the core team in at least half a dozen timezones. [The forum](http://forum.vuejs.org/) includes 7 languages and counting and many of our docs have [actively-maintained translations](https://github.com/vuejs?utf8=%E2%9C%93&query=vuejs.org). We're very proud of Vue's international reach, but we can do even better. +Vue 已经在全球范围内传播开来，核心团队甚至来自于至少 6 个时区。[论坛](http://forum.vuejs.org/) 已有 7 种语言，数字还在持续增长。我们许多文档都有[积极维护的翻译](https://github.com/vuejs?utf8=%E2%9C%93&query=vuejs.org)。我们非常为 Vue 的国际影响力骄傲，但我们还能做得更好。 -I hope that right now, you're reading this sentence in your preferred language. If not, would you like to help us get there? +我希望现在，你正在用你偏爱的语言阅读这个句子。如果不是，你愿意帮我们实现它吗？ -If so, please feel free to fork the repo for [these docs](https://github.com/vuejs/vuejs.org/) or for any other officially maintained documentation, then start translating. Once you've made some progress, open an issue or pull request in the main repo and we'll put out a call for more contributors to help you out. +如果你愿意的话，请随时为[这些文档](https://github.com/vuejs/vuejs.org/)，或者官方维护的其他文档 fork 这个仓库，然后开始翻译吧。一旦你取得了一些进展，请在主仓库开一个 issue 或者 pull request，我们将号召更多的贡献者来帮助你。 From fb6210e1606c163fdfd96eccffdfcd194e81435d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=B8=81=E4=B8=80=E9=B8=A3?= <315129552@qq.com> Date: Thu, 6 Oct 2016 10:50:13 +0800 Subject: [PATCH 007/167] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E6=83=85=E5=86=B5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/about/guide.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/about/guide.md b/src/about/guide.md index 576bacd6b7..a3ddda6966 100644 --- a/src/about/guide.md +++ b/src/about/guide.md @@ -21,7 +21,7 @@ order: 1 序号 | 是否完成 | 对应文档文件名 | 中文标题 | 贡献者 | 认领者 ----- | ------- | ------------- | --- | --- | --- 1 | 是 | installation.md | 安装 | @dingyiming | @dingyiming -2 | 否 | index.md | 介绍 | | @dingyiming @hijiangtao +2 | 是 | index.md | 介绍 | @hijiangtao | @dingyiming @hijiangtao 3 | 是 | instance.md | 实例 | @dingyiming | @dingyiming 4 | × | syntax.md | 模板语法 | | @tingtien 5 | 是 | computed.md | 计算属性 | @dingyiming | @dingyiming From 8f0f9dbb0a042a007d207088e6d9a82dc2dc7940 Mon Sep 17 00:00:00 2001 From: hijiangtao Date: Thu, 6 Oct 2016 10:54:25 +0800 Subject: [PATCH 008/167] adjust text padding and some popular words --- src/guide/index.md | 14 ++++---------- 1 file changed, 4 insertions(+), 10 deletions(-) diff --git a/src/guide/index.md b/src/guide/index.md index c1efd2dfd8..cefc974577 100644 --- a/src/guide/index.md +++ b/src/guide/index.md @@ -8,7 +8,6 @@ order: 2 Vue.js（读音 /vjuː/, 类似于 **view**）是一个构建用户界面的渐进式框架。与其他单层框架（ monolithic frameworks）不同的是，Vue 被设计成从底层向上可以被增量式的采用。Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。另一方面，Vue 完全有能力驱动采用[单文件组件](single-file-components.html)和[Vue生态系统支持的库](//github.com/vuejs/awesome-vue#libraries--plugins)开发的复杂单页应用。 - Vue.js 的目标是通过尽可能简单的 API 实现**响应的数据绑定**和**组合的视图组件**。 如果你是有经验的前端开发者，想知道 Vue.js 与其它库/框架的区别，查看[对比其它框架](comparison.html)。 @@ -48,7 +47,7 @@ var app = new Vue({ {% endraw %} -我们已经生成了我们的第一个 Vue 应用！看起来这跟单单渲染一个字符串模板非常类似，但是 Vue.js 在背后做了大量工作。现在数据和DOM已经被绑定在一起，所有的元素都是**响应式的（reactive）**。我们如何知道?打开你的浏览器的控制台，并修改 `app.message`，你将看到上例相应地更新。 +我们已经生成了我们的第一个 Vue 应用！看起来这跟单单渲染一个字符串模板非常类似，但是 Vue.js 在背后做了大量工作。现在数据和 DOM 已经被绑定在一起，所有的元素都是**响应式的**。我们如何知道?打开你的浏览器的控制台，并修改 `app.message`，你将看到上例相应地更新。 除了绑定插入的文本内容，我们还可以采用这样的方式绑定 DOM 元素属性： @@ -83,7 +82,7 @@ var app2 = new Vue({ 这里我们遇到新东西。你看到的 `v-bind` 特性被称为**指令**。指令带有前缀 `v-`，以指示它们是 Vue.js 提供的特殊特性。并且如你所想象的，它们会对绑定的目标元素添加响应式的特殊行为。这个指令的简单含义是说：将该元素的 id 属性绑定到 Vue 实例的 id 属性上。 -用浏览器的开发者工具去监测以上元素 - 你会发现 这个元素的 id 为 `inspect-me`。是的，如果你在控制台里更改`app2.id`，那么该元素的 id 也会随之更新。 +用浏览器的开发者工具去监测以上元素 - 你会发现 这个元素的 id 为 `inspect-me`。是的，如果你在控制台里更改 `app2.id`，那么该元素的 id 也会随之更新。 ## 条件与循环 @@ -102,7 +101,6 @@ var app3 = new Vue({ } }) ``` - {% raw %}
      Now you see me @@ -144,7 +142,6 @@ var app4 = new Vue({ } }) ``` - {% raw %}
        @@ -167,7 +164,7 @@ var app4 = new Vue({ {% endraw %} -在控制台里，输入`app4.todos.push({ text: 'New item' })`。你会发现列表中多了一栏新内容。 +在控制台里，输入 `app4.todos.push({ text: 'New item' })`。你会发现列表中多了一栏新内容。 ## 处理用户输入 @@ -192,7 +189,6 @@ var app5 = new Vue({ } }) ``` - {% raw %}

        {{ message }}

        @@ -231,7 +227,6 @@ var app6 = new Vue({ } }) ``` - {% raw %}

        {{ message }}

        @@ -269,7 +264,7 @@ Vue.component('todo', { ``` -但是这样会为每个 todo 渲染同样的文本，这看起来并不是很6。我们应该将数据从父作用域传到子组件。让我们来修改一下组件的定义，使得它能够接受一个 [`prop`](/guide/components.html#Props) 字段： +但是这样会为每个 todo 渲染同样的文本，这看起来并不是很酷。我们应该将数据从父作用域传到子组件。让我们来修改一下组件的定义，使得它能够接受一个 [`prop`](/guide/components.html#Props) 字段： ``` js Vue.component('todo', { @@ -295,7 +290,6 @@ var app7 = new Vue({ } }) ``` - {% raw %}
          From 40947f93a3028cffc9a11e51f14ba852c070f50b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=B8=81=E4=B8=80=E9=B8=A3?= <315129552@qq.com> Date: Thu, 6 Oct 2016 10:59:07 +0800 Subject: [PATCH 009/167] update --- src/about/guide.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/about/guide.md b/src/about/guide.md index a3ddda6966..6876425cec 100644 --- a/src/about/guide.md +++ b/src/about/guide.md @@ -55,4 +55,4 @@ order: 1 序号 | 是否完成 | 对应文档文件名 | 中文标题 | 贡献者 | 认领者 ----- | ------- | ------------- | --- | --- | --- 25 | x | comparison.md | 对比其他框架 | | @yongbolv @daix6 -26 | x | join.md | 加入Vue.js社区 | | @daix6 \ No newline at end of file +26 | 是 | join.md | 加入Vue.js社区 | @daix6 | @daix6 \ No newline at end of file From bc3903f127802c6ef8ae6b92a25e35c1a0573203 Mon Sep 17 00:00:00 2001 From: 70data <70data@gmail.com> Date: Thu, 6 Oct 2016 10:59:53 +0800 Subject: [PATCH 010/167] Update unit-testing.md --- src/guide/unit-testing.md | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/guide/unit-testing.md b/src/guide/unit-testing.md index e4bbee1eb3..1d3d4045b8 100644 --- a/src/guide/unit-testing.md +++ b/src/guide/unit-testing.md @@ -6,11 +6,10 @@ order: 22 ## 配置和工具 -Anything compatible with a module-based build system will work, but if you're looking for a specific recommendation, 使用 [Karma](http://karma-runner.github.io) 进行自动化测试. It has a lot of community plugins, including support for [Webpack](https://github.com/webpack/karma-webpack) and [Browserify](https://github.com/Nikku/karma-browserify). For detailed setup, please refer to each project's respective documentation, though these example Karma configurations for [Webpack](https://github.com/vuejs/vue-loader-example/blob/master/build/karma.conf.js) and [Browserify](https://github.com/vuejs/vueify-example/blob/master/karma.conf.js) may help you get started. +任何兼容基于模块的构建系统都可以正常使用, 但如果你需要一个具体的建议, 可以使用 [Karma](http://karma-runner.github.io) 进行自动化测试.它有很多社区版的插件, 包括对 [Webpack](https://github.com/webpack/karma-webpack) 和 [Browserify](https://github.com/Nikku/karma-browserify) 的支持. 更多详细的安装步骤, 请参考各项目的安装文档, 通过这些 Karma 配置的例子可以快速帮助你上手（ [Webpack](https://github.com/vuejs/vue-loader-example/blob/master/build/karma.conf.js) 插件， [Browserify](https://github.com/vuejs/vueify-example/blob/master/karma.conf.js) 插件）。 ## 简单的断言 -In terms of code structure for testing, you don't have to do anything special in your components to make them testable. Just export the raw options: 在测试的代码结构方面，你不必在你的组件中做任何特殊的事情使它们可测试。主要导出原始设置就可以了： ``` html From 090426c5ee1254a023ac88b95373a3bd7ab161c0 Mon Sep 17 00:00:00 2001 From: 595074187 <595074187@qq.com> Date: Thu, 6 Oct 2016 11:34:13 +0800 Subject: [PATCH 011/167] =?UTF-8?q?2016.10.6=20=E7=BF=BB=E8=AF=91Class=20?= =?UTF-8?q?=E4=B8=8E=20Style=20=E7=BB=91=E5=AE=9A?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 2016.10.6 翻译Class 与 Style 绑定 --- src/guide/class-and-style.md | 60 +++++++++++++++++++----------------- 1 file changed, 31 insertions(+), 29 deletions(-) diff --git a/src/guide/class-and-style.md b/src/guide/class-and-style.md index a24f42afbe..cec380ceb7 100644 --- a/src/guide/class-and-style.md +++ b/src/guide/class-and-style.md @@ -1,24 +1,25 @@ --- -title: Class and Style Bindings +title: Class 与 Style 绑定 type: guide order: 6 --- +数据绑定一个常见需求是操作元素的 class 列表和它的内联样式。因为它们都是 attribute，我们可以用` v-bind` 处理它们：只需要计算出表达式最终的字符串。不过，字符串拼接麻烦又易错。因此，在 `v-bind `用于` class `和 `style `时，Vue.js 专门增强了它。表达式的结果类型除了字符串之外，还可以是对象或数组。 -A common need for data binding is manipulating an element's class list and its inline styles. Since they are both attributes, we can use `v-bind` to handle them: we just need to calculate a final string with our expressions. However, meddling with string concatenation is annoying and error-prone. For this reason, Vue provides special enhancements when `v-bind` is used with `class` and `style`. In addition to strings, the expressions can also evaluate to objects or arrays. -## Binding HTML Classes +## 绑定 HTML Class -### Object Syntax +### 对象语法 -We can pass an object to `v-bind:class` to dynamically toggle classes: +我们可以传给 `v-bind:class` 一个对象，以动态地切换 class。 ``` html
          ``` +上面的语法表示class`active`的更新将取决于数据属性`isActive`是否为[truthiness](https://developer.mozilla.org/en-US/docs/Glossary/Truthy) 。 -The above syntax means the presence of the `active` class will be determined by the [truthiness](https://developer.mozilla.org/en-US/docs/Glossary/Truthy) of the data property `isActive`. +我们可以传给 v-bind:class 一个对象，以动态地切换 class。注意 v-bind:class 指令可以与普通的 class 特性共存 -You can have multiple classes toggled by having more fields in the object. In addition, the `v-bind:class` directive can also co-exist with the plain `class` attribute. So given the following template: +我们也可以在对象中传入多个属性用来动态切换多个class.注意 `v-bind:class` 指令可以与普通的 class 特性共存.如下模板: ``` html
          ``` -And the following data: +如下 data: ``` js data: { @@ -35,15 +36,15 @@ data: { } ``` -It will render: +渲染为: ``` html
          ``` -When `isActive` or `hasError` changes, the class list will be updated accordingly. For example, if `hasError` becomes `true`, the class list will become `"static active text-danger"`. +当 `isActive` 或者 `hasError` 变化时, class列表将相应地更新。例如，如果 `hasError` 的值为 `true`, class列表将变为 `"static active text-danger"`. -The bound object doesn't have to be inline: +你也可以直接绑定数据里的一个对象： ``` html
          @@ -56,8 +57,8 @@ data: { } } ``` +渲染的结果和上面一样。我们也可以在这里绑定一个返回对象的[计算属性](computed.html)。这是一个常用且强大的模式： -This will render the same result. We can also bind to a [computed property](computed.html) that returns an object. This is a common and powerful pattern: ``` html
          @@ -77,9 +78,9 @@ computed: { } ``` -### Array Syntax +### 数组语法 -We can pass an array to `v-bind:class` to apply a list of classes: +我们可以把一个数组传给 `v-bind:class`，以应用一个 class 列表： ``` html
          @@ -91,31 +92,31 @@ data: { } ``` -Which will render: +渲染为: ``` html
          ``` -If you would like to also toggle a class in the list conditionally, you can do it with a ternary expression: +如果你也想根据条件切换列表中的 class，可以用三元表达式： ``` html
          ``` +此例始终添加 `errorClass`，但是只有在 `isActive` 是 true 时添加`activeClass` 。 -This will always apply `errorClass`, but will only apply `activeClass` when `isActive` is `true`. - -However, this can be a bit verbose if you have multiple conditional classes. That's why it's also possible to use the object syntax inside array syntax: +不过，当有多个条件 class 时这样写有些繁琐。可以在数组语法中使用对象语法： ``` html
          ``` -## Binding Inline Styles +## 绑定内联样式 + +### 对象语法 -### Object Syntax +`v-bind:style` 的对象语法十分直观——看着非常像 CSS，其实它是一个 JavaScript 对象。CSS 属性名可以用驼峰式（camelCase）或短横分隔命名（kebab-case）： -The object syntax for `v-bind:style` is pretty straightforward - it looks almost like CSS, except it's a JavaScript object. You can use either camelCase or kebab-case for the CSS property names: ``` html
          @@ -127,7 +128,7 @@ data: { } ``` -It is often a good idea to bind to a style object directly so that the template is cleaner: +直接绑定到一个样式对象通常更好，让模板更清晰： ``` html
          @@ -139,18 +140,19 @@ data: { fontSize: '13px' } } -``` -Again, the object syntax is often used in conjunction with computed properties that return objects. +``` +同样的，对象语法常常结合返回对象的计算属性使用。 -### Array Syntax +### 数组语法 -The array syntax for `v-bind:style` allows you to apply multiple style objects to the same element: +`v-bind:style` 的数组语法可以将多个样式对象应用到一个元素上： ``` html
          ``` -### Auto-prefixing +### 自动添加前缀 + +当`v-bind:style`使用需要厂商前缀的 CSS 属性时，如 `transform`，Vue.js 会自动侦测并添加相应的前缀。 -When you use a CSS property that requires vendor prefixes in `v-bind:style`, for example `transform`, Vue will automatically detect and add appropriate prefixes to the applied styles. From c00a1afd0b846de8f628527643358c9dba1b3d81 Mon Sep 17 00:00:00 2001 From: Josephus Paye II Date: Thu, 6 Oct 2016 14:34:44 +1100 Subject: [PATCH 012/167] Update Show and Tell forum link (#469) Updated the link to [http://forum.vuejs.org/c/show-and-tell](http://forum.vuejs.org/c/show-and-tell), original link was a 404. --- src/guide/join.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/guide/join.md b/src/guide/join.md index e8582ee1f6..27b9f9f4fb 100644 --- a/src/guide/join.md +++ b/src/guide/join.md @@ -19,7 +19,7 @@ Now we'll answer both what the community can do for and what you can do for the ### Explore the Ecosystem - [The Awesome Vue Page](https://github.com/vuejs/awesome-vue): See what other awesome resources have been published by other awesome people. -- [The "Show and Tell" Subforum](http://forum.vuejs.org/category/15/show-tell): Another great place to check out what others have built with and for the growing Vue ecosystem. +- [The "Show and Tell" Subforum](http://forum.vuejs.org/c/show-and-tell): Another great place to check out what others have built with and for the growing Vue ecosystem. ## What You Can Do From becefa7d08b9cb9b5e5443ad706f51023687945b Mon Sep 17 00:00:00 2001 From: 70data <70data@gmail.com> Date: Thu, 6 Oct 2016 11:35:56 +0800 Subject: [PATCH 013/167] Update unit-testing.md --- src/guide/unit-testing.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/guide/unit-testing.md b/src/guide/unit-testing.md index 1d3d4045b8..ba4b7f159c 100644 --- a/src/guide/unit-testing.md +++ b/src/guide/unit-testing.md @@ -6,7 +6,7 @@ order: 22 ## 配置和工具 -任何兼容基于模块的构建系统都可以正常使用, 但如果你需要一个具体的建议, 可以使用 [Karma](http://karma-runner.github.io) 进行自动化测试.它有很多社区版的插件, 包括对 [Webpack](https://github.com/webpack/karma-webpack) 和 [Browserify](https://github.com/Nikku/karma-browserify) 的支持. 更多详细的安装步骤, 请参考各项目的安装文档, 通过这些 Karma 配置的例子可以快速帮助你上手（ [Webpack](https://github.com/vuejs/vue-loader-example/blob/master/build/karma.conf.js) 插件， [Browserify](https://github.com/vuejs/vueify-example/blob/master/karma.conf.js) 插件）。 +任何兼容基于模块的构建系统都可以正常使用，但如果你需要一个具体的建议，可以使用[Karma](http://karma-runner.github.io)进行自动化测试。它有很多社区版的插件，包括对[Webpack](https://github.com/webpack/karma-webpack)和[Browserify](https://github.com/Nikku/karma-browserify)的支持。更多详细的安装步骤，请参考各项目的安装文档，通过这些Karma配置的例子可以快速帮助你上手（[Webpack](https://github.com/vuejs/vue-loader-example/blob/master/build/karma.conf.js)配置，[Browserify](https://github.com/vuejs/vueify-example/blob/master/karma.conf.js)配置）。 ## 简单的断言 @@ -70,7 +70,7 @@ describe('MyComponent', () => { ## 编写可被测试的组件 -A lot of components' render output are primarily determined by the props they receive. In fact, if a component's render output solely depends on its props, it becomes quite straightforward to test, similar to asserting the return value of a pure function with different arguments. Take an contrived example: +很多组件的渲染输出由它的prop决定。事实上，如果一个组件的渲染输出完全取决于它的prop，那么它会让测试变得简单, 就好像断言不同参数的纯函数的返回值。看下面这个例子: ``` html