translate index.md - ArticleID: 2

Author: hijiangtao

src/guide/index.md

@@ -4,30 +4,33 @@ 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
 <div id="app">
   {{ message }}
 </div>
 ```
 ``` 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({
 </script>
 {% 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
 <div id="app-2">
-  <span v-bind:title="message">
-    Hover your mouse over me for a few seconds to see my dynamically bound title!
-  </span>
+  <span v-bind:id="id">Inspect me</span>
 </div>
 ```
 ``` 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({
 </script>
 {% 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
 <div id="app-3">
   <p v-if="seen">Now you see me</p>
 </div>
 ```
-
 ``` js
 var app3 = new Vue({
   el: '#app-3',
@@ -117,11 +117,11 @@ var app3 = new Vue({
 </script>
 {% 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
 <div id="app-4">
@@ -144,6 +144,7 @@ var app4 = new Vue({
   }
 })
 ```
+
 {% raw %}
 <div id="app-4" class="demo">
   <ol>
@@ -166,11 +167,11 @@ var app4 = new Vue({
 </script>
 {% 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
 <div id="app-5">
@@ -191,6 +192,7 @@ var app5 = new Vue({
   }
 })
 ```
+
 {% raw %}
 <div id="app-5" class="demo">
   <p>{{ message }}</p>
@@ -211,9 +213,9 @@ var app5 = new Vue({
 </script>
 {% 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
 <div id="app-6">
@@ -229,6 +231,7 @@ var app6 = new Vue({
   }
 })
 ```
+
 {% raw %}
 <div id="app-6" class="demo">
   <p>{{ message }}</p>
@@ -244,70 +247,55 @@ var app6 = new Vue({
 </script>
 {% 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: '<li>This is a todo</li>'
 })
 ```
 
-Now you can compose it in another component's template:
+现在你可以另一个组件模板中写入它：
 
 ``` html
 <ul>
-  <!--
-  Create an instance of the todo-item component
-  for each todo in a todos array
-  -->
-  <todo-item v-for="todo in todos"></todo-item>
+  <todo v-for="todo in todos"></todo>
 </ul>
 ```
 
-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: '<li>{{ todo.text }}</li>'
 })
 ```
 
-Now we can pass the todo into each repeated component using `v-bind`:
+现在，我们可以使用 `v-bind` 指令将 todo 传到每一个重复的组件中：
 
 ``` html
 <div id="app-7">
   <ol>
-    <!--
-    Now we provide each todo-item with the todo object
-    it's representing, so that its content can be dynamic
-    -->
-    <todo-item v-for="todo in todos" v-bind:todo="todo"></todo-item>
+    <todo v-for="todo in todos" v-bind:todo="todo"></todo>
   </ol>
 </div>
-```
+``` 
 ``` js
 var app7 = new Vue({
   el: '#app-7',
   data: {
-    todos: [
-      { text: 'Learn JavaScript' },
-      { text: 'Learn Vue' },
-      { text: 'Build something awesome' }
-    ]
+    todos: [/* ... */]
   }
 })
 ```
+
 {% raw %}
 <div id="app-7" class="demo">
   <ol>
@@ -332,9 +320,9 @@ var app7 = new Vue({
 </script>
 {% 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 `<todo-item>` 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
 <div id="app">
@@ -346,14 +334,14 @@ In a large application, it is necessary to divide the whole app into components
 </div>
 ```
 
-### 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 核心的一些最基本的特征 - 本指南的其余部分将用更详尽的篇幅去描述其他的一些高级特性，所以一定要阅读完所有的内容哦！