ATLgo · ATLgo · Oct 8, 2016 · Oct 7, 2016 · Oct 8, 2016 · Oct 8, 2016
diff --git a/src/api/index.md b/src/api/index.md
@@ -1629,45 +1629,44 @@ type: api
 
 - **See also:** [Named Slots](/guide/components.html#Named-Slots)
 
-## Built-In Components
+## 内置的组件
 
 ### component
 
-- **Props:**
+- **特性：**
   - `is` - string | ComponentDefinition | ComponentConstructor
   - `inline-template` - boolean
 
-- **Usage:**
+- **用法：**
 
-  A "meta component" for rendering dynamic components. The actual component to render is determined by the `is` prop:
+  动态渲染一个“元组件”。实际由 `is` 属性决定哪个渲染组件。
 
   ```html
-  <!-- a dynamic component controlled by -->
-  <!-- the `componentId` property on the vm -->
+  <!-- 动态组件由 vm 实例的属性值 `componentId` 控制 -->
   <component :is="componentId"></component>
 
-  <!-- can also render registered component or component passed as prop -->
+  <!-- 也能够渲染注册过的组件或 prop 传入的组件 -->
   <component :is="$options.components.child"></component>
   ```
 
-- **See also:** [Dynamic Components](/guide/components.html#Dynamic-Components)
+- **另见：** [动态组件](/guide/components.html#动态组件)
 
 ### transition
 
-- **Props:**
-  - `name` - string, Used to automatically generate transition CSS class names. e.g. `name: 'fade'` will auto expand to `.fade-enter`, `.fade-enter-active`, etc. Defaults to `"v"`.
-  - `appear` - boolean, Whether to apply transition on initial render. Defaults to `false`.
-  - `css` - boolean, Whether to apply CSS transition classes. Defaults to `true`. If set to `false`, will only trigger JavaScript hooks registered via component events.
-  - `type` - string, Specify the type of transition events to wait for to determine transition end timing. Available values are `"transition"` and `"animation"`. By default, it will automatically detect the type that has a longer duration.
-  - `mode` - string, Controls the timing sequence of leaving/entering transitions. Available modes are `"out-in"` and `"in-out"`; defaults to simultaneous.
+- **特性：**
+  - `name` - string, 用于自动生成 CSS 过渡类名。例如：`name: 'fade'` 将自动拓展为`.fade-enter`，`.fade-enter-active`等。默认类名为 `"v"`
+  - `appear` - boolean, 是否在初始渲染时使用过渡。默认为 `false`。
+  - `css` - boolean, 是否使用 CSS 过渡类。默认为 `true`。如果设置为 `false`，将只通过组件事件触发注册的 JavaScript 钩子。
+  - `type` - string, 指定过渡事件类型，侦听过渡何时结束。有效值为 `"transition"` 和 `"animation"`。默认 Vue.js 将自动检测出持续时间长的为过渡事件类型。
+  - `mode` - string, 控制离开/进入的过渡时间序列。有效的模式有 `"out-in"` 和 `"in-out"`；默认同时生效。
   - `enter-class` - string
   - `leave-class` - string
   - `enter-active-class` - string
   - `leave-active-class` - string
   - `appear-class` - string
   - `appear-active-class` - string
 
-- **Events:**
+- **事件：**
   - `before-enter`
   - `enter`
   - `after-enter`
@@ -1678,22 +1677,22 @@ type: api
   - `appear`
   - `after-appear`
 
-- **Usage:**
+- **用法：**
 
-  `<transition>` serve as transition effects for **single** element/component. The `<transition>` does not render an extra DOM element, nor does it show up in the inspected component hierarchy. It simply applies the transition behavior to the wrapped content inside.
+  `<transition>` 元素作为单个元素/组件的过渡效果。`<transition>` 不会渲染额外的 DOM 元素，也不会出现在检测过的组件层级中。它只是将内容包裹在其中，简单的运用过渡行为。
 
   ```html
-  <!-- simple element -->
+  <!-- 简单元素 -->
   <transition>
     <div v-if="ok">toggled content</div>
   </transition>
 
-  <!-- dynamic component -->
+  <!-- 动态组件 -->
   <transition name="fade" mode="out-in" appear>
     <component :is="view"></component>
   </transition>
 
-  <!-- event hooking -->
+  <!-- 事件钩子 -->
   <div id="transition-demo">
     <transition @after-enter="transitionComplete">
       <div v-show="ok">toggled content</div>
@@ -1706,32 +1705,32 @@ type: api
     ...
     methods: {
       transitionComplete: function (el) {
-        // for passed 'el' that DOM element as the argument, something ...
+        // 传入 'el' 这个 DOM 元素作为参数。
       }
     }
     ...
   }).$mount('#transition-demo')
   ```
 
-- **See also:** [Transitions: Entering, Leaving, and Lists](/guide/transitions.html)
+- **另见：** [过渡：进入，离开和列表](/guide/transitions.html)
 
 ### transition-group
 
-- **Props:**
-  - `tag` - string, defaults to `span`.
-  - `move-class` - overwrite CSS class applied during moving transition.
-  - exposes the same props as `<transition>` except `mode`.
+- **特性：**
+  - `tag` - string, 默认为 `span`
+  - `move-class` - 覆盖移动过渡期间应用的 CSS 类。
+  - 除了 `mode`，其他特性和 `<transition>` 相同。
 
-- **Events:**
-  - exposes the same events as `<transition>`.
+- **事件：**
+  - 事件和 `<transition>` 相同.
 
-- **Usage:**
+- **用法：**
 
-  `<transition-group>` serve as transition effects for **multiple** elements/components. The `<transition-group>` renders a real DOM element. By default it renders a `<span>`, and you can configure what element is should render via the `tag` attribute.
+  `<transition-group>` 元素作为多个元素/组件的过渡效果。`<transition-group>` 渲染一个真实的 DOM 元素。默认渲染 `<span>`，可以通过 `tag` 属性配置哪个元素应该被渲染。
 
-  Note every child in a `<transition-group>` must be **uniquely keyed** for the animations to work properly.
+  注意，每个 `<transition-group>` 的子节点必须有 **独立的key** ，动画才能正常工作
 
-  `<transition-group>` supports moving transitions via CSS transform. When a child's position on screen has changed after an updated, it will get applied a moving CSS class (auto generated from the `name` attribute or configured with the `move-class` attribute). If the CSS `transform` property is "transition-able" when the moving class is applied, the element will be smoothly animated to its destination using the [FLIP technique](https://aerotwist.com/blog/flip-your-animations/).
+  `<transition-group>` 支持通过 CSS transform 过渡移动。当一个子节点被更新，从屏幕上的位置发生变化，它将会获取应用 CSS 移动类（通过 `name` 属性或配置 `move-class` 属性自动生成）。如果 CSS `transform` 属性是“可过渡”属性，当应用移动类时，将会使用 [FLIP 技术](https://aerotwist.com/blog/flip-your-animations/) 使元素流畅地到达动画终点。
 
   ```html
   <transition-group tag="ul" name="slide">
@@ -1741,54 +1740,55 @@ type: api
   </transition-group>
   ```
 
-- **See also:** [Transitions: Entering, Leaving, and Lists](/guide/transitions.html)
+- **另见：** [过渡：进入，离开和列表](/guide/transitions.html)
 
 ### keep-alive
 
-- **Usage:**
+- **用法：**
 
-  When wrapped around a dynamic component, `<keep-alive>` caches the inactive component instances without destroying them. Similar to `<transition>`, `<keep-alive>` is an abstract component: it doesn't render a DOM element itself, and doesn't show up in the component parent chain.
+  `<keep-alive>` 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和 `<transition>` 相似，`<keep-alive>` 是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在父组件链中。
 
-  When a component is toggled inside `<keep-alive>`, its `activated` and `deactivated` lifecycle hooks will be invoked accordingly.
+  当组件在 `<keep-alive>` 内被切换，它的 `activated` 和 `deactivated` 这两个生命周期钩子函数将会被对应执行。
 
-  Primarily used with preserve component state or avoid re-rendering.
+  主要用于保留组件状态或避免重新渲染。
 
   ```html
-  <!-- basic -->
+  <!-- 基本 -->
   <keep-alive>
     <component :is="view"></component>
   </keep-alive>
 
-  <!-- multiple conditional children -->
+  <!-- 多个条件判断的子组件 -->
   <keep-alive>
     <comp-a v-if="a > 1"></comp-a>
     <comp-b v-else></comp-b>
   </keep-alive>
 
-  <!-- used together with <transition> -->
+  <!-- 和 <transition> 一起使用 -->
   <transition>
     <keep-alive>
       <component :is="view"></component>
     </keep-alive>
   </transition>
   ```
 
-  <p class="tip">`<keep-alive>` does not work with functional components because they do not have instances to be cached.</p>
+  <p class="tip">`<keep-alive>` 不会在函数式组件中正常工作，因为它们没有缓存实例。</p>
 
-- **See also:** [Dynamic Components - keep-alive](/guide/components.html#keep-alive)
+- **另见：** [动态组件 - keep-alive](/guide/components.html#keep-alive)
 
 ### slot
 
-- **Props:**
-  - `name` - string, Used for named slot.
+- **特性：**
+  - `name` - string, 用于命名插槽。
 
 - **Usage:**
 
-  `<slot>` serve as content distribution outlets in component templates. `<slot>` itself will be replaced.
+  `<slot>` 元素作为组件模板之中的内容分发插槽。 `<slot>` 元素自身将被替换。
 
+  详细用法，请参考下面 guide 部分的链接。
   For detailed usage, see the guide section linked below.
 
-- **See also:** [Content Distribution with Slots](/guide/components.html#Content-Distribution-with-Slots)
+- **另见：** [使用Slots分发内容](/guide/components.html#使用Slots分发内容)
 
 ## VNode接口
 

diff --git a/src/examples/commits.md b/src/examples/commits.md
@@ -1,9 +1,9 @@
 ---
-title: GitHub Commits
+title: GitHub 提交
 type: examples
 order: 1
 ---
 
-> This example fetches latest Vue.js commits data from GitHub's API and displays them as a list. You can switch between the master and dev branches.
+> 这个例子从 Github 的 API 中获取了最新的 Vue.js 提交数据，并且以列表形式将它们展示了出来。你可以轻松地切换 master 和 dev 分支。
 
 <iframe width="100%" height="500" src="https://jsfiddle.net/yyx990803/c5g8xnar/embedded/result,html,js,css" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
diff --git a/src/examples/elastic-header.md b/src/examples/elastic-header.md
@@ -1,5 +1,5 @@
 ---
-title: Elastic Header
+title: 具有伸缩性的 Header
 type: examples
 order: 7
 ---

diff --git a/src/examples/firebase.md b/src/examples/firebase.md
@@ -1,9 +1,8 @@
 ---
-title: Firebase + Validation
+title: Firebase + 验证
 type: examples
 order: 2
 ---
 
-> This example uses [Firebase](https://firebase.google.com/) as the data persistence backend and syncs between clients in real time (you can try opening it in multiple browser tabs). In addition, it performs instant validation using computed properties and triggers CSS transitions when adding/removing items.
-
+> 本示例使用 [Firebase](https://firebase.google.com/) 作为数据存储后端，同时在客户端进行数据实时同步（你可以在多个浏览器窗口去打开它来验证）。另外，它通过计算属性实时验证，并且添加／移除选项时触发 CSS 转变。
 <iframe width="100%" height="500" src="https://jsfiddle.net/yyx990803/hkrxmp0h/embedded/result,html,js,css" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
diff --git a/src/examples/grid-component.md b/src/examples/grid-component.md
@@ -1,9 +1,9 @@
 ---
-title: Grid Component
+title: 网格组件
 type: examples
 order: 3
 ---
 
-> This is an example of creating a reusable grid component and using it with external data.
+> 本示例创建了一个可复用组件，可结合外部数据来使用它。
 
 <iframe width="100%" height="500" src="https://jsfiddle.net/yyx990803/xkkbfL3L/embedded/result,html,js,css" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
diff --git a/src/examples/hackernews.md b/src/examples/hackernews.md
@@ -1,10 +1,10 @@
 ---
-title: HackerNews Clone
+title: HackerNews 克隆
 type: examples
 order: 10
 ---
 
-> This is a HackerNews clone built upon HN's official Firebase API, Vue 2.0 + vue-router + vuex, with server-side rendering.
+> HackerNews 克隆是基于 HN 的官方 firebase API，Vue 2.0 、vue-router 和 vuex 来构建的，使用服务器端渲染。
 
 {% raw %}
 <div style="max-width:600px">
@@ -16,20 +16,21 @@ order: 10
 
 > [Live Demo](https://vue-hn.now.sh/)
 > Note: the demo may need some spin up time if nobody has accessed it for a certain period.
+笔记：如果没在特定时间段用到它，那么本示例需要一些加载时间。
 >
 > [[Source](https://github.com/vuejs/vue-hackernews-2.0)]
 
-## Features
+## 特性
 
-- Server Side Rendering
-  - Vue + vue-router + vuex working together
-  - Server-side data pre-fetching
-  - Client-side state & DOM hydration
-- Single-file Vue Components
-  - Hot-reload in development
-  - CSS extraction for production
-- Real-time List Updates with FLIP Animation
+- 服务器端渲染
+  - Vue + vue-router + vuex
+  - 服务端数据提前获取
+  - 客户端状态 & DOM 合并
+- 单文件 Vue 组件
+  - 开发时进行热加载
+  - 生产时抽出 CSS
+- 使用 FLIP 动画进行实时列表更新
 
-## Architecture Overview
+## 结构概览
 
 <img width="973" alt="Hackernew clone architecture overview" src="/images/hn-architecture.png">
diff --git a/src/examples/index.md b/src/examples/index.md
@@ -1,9 +1,9 @@
 ---
-title: Markdown Editor
+title: Markdown 编辑器
 type: examples
 order: 0
 ---
 
-> Dead simple Markdown editor.
+> 蠢萌的 Markdown 编辑器。
 
 <iframe width="100%" height="500" src="https://jsfiddle.net/yyx990803/pq22eoj5/embedded/result,html,js,css" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
diff --git a/src/examples/modal.md b/src/examples/modal.md
@@ -1,9 +1,9 @@
 ---
-title: Modal Component
+title: 模式组件
 type: examples
 order: 6
 ---
 
-> Features used: component, prop passing, content insertion, transitions.
+> 使用到的特性：组件，prop 传递，内容插入(content insertion)，过渡（transitions）。
 
 <iframe width="100%" height="500" src="https://jsfiddle.net/yyx990803/mwLbw11k/embedded/result,html,js,css" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
diff --git a/src/examples/select2.md b/src/examples/select2.md
@@ -1,9 +1,9 @@
 ---
-title: Wrapper Component
+title: 内嵌组件
 type: examples
 order: 8
 ---
 
-> In this example we are integrating a 3rd party jQuery plugin (select2) by wrapping it inside a custom component.
+> 在本例中，我们整合了第三方 jQuery 插件（select2）,怎么做到的呢？就是把它内嵌在一个常用组件中==
 
 <iframe width="100%" height="500" src="https://jsfiddle.net/yyx990803/fruqrvdL/embedded/result,html,js,css" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
diff --git a/src/examples/svg.md b/src/examples/svg.md
@@ -1,9 +1,9 @@
 ---
-title: SVG Graph
+title: SVG 图表
 type: examples
 order: 5
 ---
 
-> This example showcases a combination of custom component, computed property, two-way binding and SVG support.
+> 本示例展示了一个结合体，它由常用组件、计算属性、2 种绑定方式和 SVG 的支持组成。
 
 <iframe width="100%" height="500" src="https://jsfiddle.net/yyx990803/mhrckqgq/embedded/result,html,js,css" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
diff --git a/src/examples/todomvc.md b/src/examples/todomvc.md
@@ -4,6 +4,6 @@ type: examples
 order: 9
 ---
 
-> This is a fully spec-compliant TodoMVC implementation in under 120 effective lines of JavaScript (excluding comments and blank lines).
+> 本例是一个完全和规范一致的 TodoMVC 实现，只用了 120 行有效的 JavaScript（不包含注释和空行）。
 
 <iframe width="100%" height="500" src="https://jsfiddle.net/yyx990803/4dr2fLb7/embedded/result,html,js,css" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
diff --git a/src/examples/tree-view.md b/src/examples/tree-view.md
@@ -1,9 +1,9 @@
 ---
-title: Tree View
+title: 树形视图
 type: examples
 order: 4
 ---
 
-> Example of a simple tree view implementation showcasing recursive usage of components.
+> 本示例是一个简单的树形视图实现，它展现了组件的递归使用。
 
 <iframe width="100%" height="500" src="https://jsfiddle.net/yyx990803/3p0j5sgy/embedded/result,html,js,css" allowfullscreen="allowfullscreen" frameborder="0"></iframe>