Skip to content

Commit 68af7c3

Browse files
authored
Merge pull request #81 from lindazhang102/2.0-cn
issues#70 翻译
2 parents 4e79eb6 + d787a21 commit 68af7c3

File tree

11 files changed

+31
-31
lines changed

11 files changed

+31
-31
lines changed

src/examples/commits.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
---
2-
title: GitHub Commits
2+
title: GitHub 提交
33
type: examples
44
order: 1
55
---
66

7-
> 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.
7+
> 这个例子从 Github 的 API 中获取了最新的 Vue.js 提交数据,并且以列表形式将它们展示了出来。你可以轻松地切换 master dev 分支。
88
99
<iframe width="100%" height="500" src="https://jsfiddle.net/yyx990803/c5g8xnar/embedded/result,html,js,css" allowfullscreen="allowfullscreen" frameborder="0"></iframe>

src/examples/elastic-header.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
---
2-
title: Elastic Header
2+
title: 具有伸缩性的 Header
33
type: examples
44
order: 7
55
---

src/examples/firebase.md

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
11
---
2-
title: Firebase + Validation
2+
title: Firebase + 验证
33
type: examples
44
order: 2
55
---
66

7-
> 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.
8-
7+
> 本示例使用 [Firebase](https://firebase.google.com/) 作为数据存储后端,同时在客户端进行数据实时同步(你可以在多个浏览器窗口去打开它来验证)。另外,它通过计算属性实时验证,并且添加/移除选项时触发 CSS 转变。
98
<iframe width="100%" height="500" src="https://jsfiddle.net/yyx990803/hkrxmp0h/embedded/result,html,js,css" allowfullscreen="allowfullscreen" frameborder="0"></iframe>

src/examples/grid-component.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
---
2-
title: Grid Component
2+
title: 网格组件
33
type: examples
44
order: 3
55
---
66

7-
> This is an example of creating a reusable grid component and using it with external data.
7+
> 本示例创建了一个可复用组件,可结合外部数据来使用它。
88
99
<iframe width="100%" height="500" src="https://jsfiddle.net/yyx990803/xkkbfL3L/embedded/result,html,js,css" allowfullscreen="allowfullscreen" frameborder="0"></iframe>

src/examples/hackernews.md

Lines changed: 13 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
---
2-
title: HackerNews Clone
2+
title: HackerNews 克隆
33
type: examples
44
order: 10
55
---
66

7-
> This is a HackerNews clone built upon HN's official Firebase API, Vue 2.0 + vue-router + vuex, with server-side rendering.
7+
> HackerNews 克隆是基于 HN 的官方 firebase APIVue 2.0 vue-router vuex 来构建的,使用服务器端渲染。
88
99
{% raw %}
1010
<div style="max-width:600px">
@@ -16,20 +16,21 @@ order: 10
1616

1717
> [Live Demo](https://vue-hn.now.sh/)
1818
> Note: the demo may need some spin up time if nobody has accessed it for a certain period.
19+
笔记:如果没在特定时间段用到它,那么本示例需要一些加载时间。
1920
>
2021
> [[Source](https://github.com/vuejs/vue-hackernews-2.0)]
2122
22-
## Features
23+
## 特性
2324

24-
- Server Side Rendering
25-
- Vue + vue-router + vuex working together
26-
- Server-side data pre-fetching
27-
- Client-side state & DOM hydration
28-
- Single-file Vue Components
29-
- Hot-reload in development
30-
- CSS extraction for production
31-
- Real-time List Updates with FLIP Animation
25+
- 服务器端渲染
26+
- Vue + vue-router + vuex
27+
- 服务端数据提前获取
28+
- 客户端状态 & DOM 合并
29+
- 单文件 Vue 组件
30+
- 开发时进行热加载
31+
- 生产时抽出 CSS
32+
- 使用 FLIP 动画进行实时列表更新
3233

33-
## Architecture Overview
34+
## 结构概览
3435

3536
<img width="973" alt="Hackernew clone architecture overview" src="/images/hn-architecture.png">

src/examples/index.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
---
2-
title: Markdown Editor
2+
title: Markdown 编辑器
33
type: examples
44
order: 0
55
---
66

7-
> Dead simple Markdown editor.
7+
> 蠢萌的 Markdown 编辑器。
88
99
<iframe width="100%" height="500" src="https://jsfiddle.net/yyx990803/pq22eoj5/embedded/result,html,js,css" allowfullscreen="allowfullscreen" frameborder="0"></iframe>

src/examples/modal.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
---
2-
title: Modal Component
2+
title: 模式组件
33
type: examples
44
order: 6
55
---
66

7-
> Features used: component, prop passing, content insertion, transitions.
7+
> 使用到的特性:组件,prop 传递,内容插入(content insertion),过渡(transitions)。
88
99
<iframe width="100%" height="500" src="https://jsfiddle.net/yyx990803/mwLbw11k/embedded/result,html,js,css" allowfullscreen="allowfullscreen" frameborder="0"></iframe>

src/examples/select2.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
---
2-
title: Wrapper Component
2+
title: 内嵌组件
33
type: examples
44
order: 8
55
---
66

7-
> In this example we are integrating a 3rd party jQuery plugin (select2) by wrapping it inside a custom component.
7+
> 在本例中,我们整合了第三方 jQuery 插件(select2),怎么做到的呢?就是把它内嵌在一个常用组件中==
88
99
<iframe width="100%" height="500" src="https://jsfiddle.net/yyx990803/fruqrvdL/embedded/result,html,js,css" allowfullscreen="allowfullscreen" frameborder="0"></iframe>

src/examples/svg.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
---
2-
title: SVG Graph
2+
title: SVG 图表
33
type: examples
44
order: 5
55
---
66

7-
> This example showcases a combination of custom component, computed property, two-way binding and SVG support.
7+
> 本示例展示了一个结合体,它由常用组件、计算属性、2 种绑定方式和 SVG 的支持组成。
88
99
<iframe width="100%" height="500" src="https://jsfiddle.net/yyx990803/mhrckqgq/embedded/result,html,js,css" allowfullscreen="allowfullscreen" frameborder="0"></iframe>

src/examples/todomvc.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,6 @@ type: examples
44
order: 9
55
---
66

7-
> This is a fully spec-compliant TodoMVC implementation in under 120 effective lines of JavaScript (excluding comments and blank lines).
7+
> 本例是一个完全和规范一致的 TodoMVC 实现,只用了 120 行有效的 JavaScript(不包含注释和空行)。
88
99
<iframe width="100%" height="500" src="https://jsfiddle.net/yyx990803/4dr2fLb7/embedded/result,html,js,css" allowfullscreen="allowfullscreen" frameborder="0"></iframe>

src/examples/tree-view.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
---
2-
title: Tree View
2+
title: 树形视图
33
type: examples
44
order: 4
55
---
66

7-
> Example of a simple tree view implementation showcasing recursive usage of components.
7+
> 本示例是一个简单的树形视图实现,它展现了组件的递归使用。
88
99
<iframe width="100%" height="500" src="https://jsfiddle.net/yyx990803/3p0j5sgy/embedded/result,html,js,css" allowfullscreen="allowfullscreen" frameborder="0"></iframe>

0 commit comments

Comments
 (0)