From 6a792416a4adab4679d8de77159c45c0cfa38f6a Mon Sep 17 00:00:00 2001 From: Underwaternya Date: Thu, 2 Mar 2017 22:37:10 +0800 Subject: [PATCH] =?UTF-8?q?=E6=B6=A6=E8=89=B2=E6=96=87=E6=9C=AC=EF=BC=8C?= =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E6=BC=8F=E8=AF=91=E5=86=85=E5=AE=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/v2/guide/index.md | 22 +++++++++++----------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/src/v2/guide/index.md b/src/v2/guide/index.md index 8100aee6c..70d246375 100644 --- a/src/v2/guide/index.md +++ b/src/v2/guide/index.md @@ -14,9 +14,9 @@ Vue.js 的目标是通过尽可能简单的 API 实现**响应的数据绑定** ## 起步 -

官方指南假设你已有 HTML、CSS 和 JavaScript 中级前端知识。如果你是全新的前端开发者,将框架作为你的第一步可能不是最好的主意——掌握好基础知识再来!之前有其他框架的使用经验是有帮助的,但不是必需的。

+

官方指南假设你已有 HTML、CSS 和 JavaScript 中级前端知识。如果你刚开始学习前端开发,将框架作为你的第一步可能不是最好的主意——掌握好基础知识再来!之前有其他框架的使用经验对于学习 Vue.js 是有帮助的,但这不是必需的。

-尝试 Vue.js 最简单的方法是使用 [JSFiddle Hello World 例子](https://jsfiddle.net/chrisvfritz/50wL7mdz/)。你可以在浏览器新标签页中打开它,跟着我们学习一些基础示例。或者你也可以创建一个本地的 `.html` 文件,然后通过如下方式引入 Vue: +尝试 Vue.js 最简单的方法是使用 [JSFiddle Hello World 例子](https://jsfiddle.net/chrisvfritz/50wL7mdz/)。你可以在浏览器新标签页中打开它,跟着例子学习一些基础用法。或者你也可以创建一个本地的 `.html` 文件,然后通过如下方式引入 Vue: ``` html @@ -56,7 +56,7 @@ var app = new Vue({ {% endraw %} -我们已经生成了我们的第一个 Vue 应用!看起来这跟单单渲染一个字符串模板非常类似,但是 Vue.js 在背后做了大量工作。现在数据和 DOM 已经被绑定在一起,所有的元素都是**响应式的**。我们如何知道?打开你的浏览器的控制台,并修改 `app.message`,你将看到上例相应地更新。 +我们已经生成了我们的第一个 Vue 应用!看起来这跟单单渲染一个字符串模板非常类似,但是 Vue.js 在背后做了大量工作。现在数据和 DOM 已经被绑定在一起,所有的元素都是**响应式的**。我们如何知道?打开你的浏览器的控制台(就在这个页面打开),并修改 `app.message`,你将看到上例相应地更新。 除了绑定插入的文本内容,我们还可以采用这样的方式绑定 DOM 元素属性: @@ -179,7 +179,7 @@ var app4 = new Vue({ ## 处理用户输入 -为了让用户和你的应用进行互动,我们可以用 `v-on` 指令绑定一个监听事件用于调用我们 Vue 实例中定义的方法: +为了让用户和你的应用进行互动,我们可以用 `v-on` 指令绑定一个监听事件,用它调用我们 Vue 实例中定义的方法: ``` html
@@ -220,9 +220,9 @@ var app5 = new Vue({ {% endraw %} -在 `reverseMessage` 方法中,我们在没有接触 DOM 的情况下更新了应用的状态 - 所有的 DOM 操作都由 Vue 来处理,你写的代码只需要关注基本逻辑。 +在 `reverseMessage` 方法中,我们在没有接触 DOM 的情况下更新了应用的状态——所有的 DOM 操作都由 Vue 来处理,你写的代码只需要关注基本逻辑。 -Vue 也提供了 `v-model` 指令,它使得在表单输入和应用状态中做双向数据绑定变得非常轻巧。 +Vue 也提供了 `v-model` 指令,它能轻松实现表单输入和应用状态之间的双向绑定。 ``` html
@@ -255,11 +255,11 @@ var app6 = new Vue({ ## 用组件构建(应用) -组件系统是 Vue.js 另一个重要概念,因为它提供了一种抽象,让我们可以用独立可复用的小组件来构建大型应用。如果我们考虑到这点,几乎任意类型的应用的界面都可以抽象为一个组件树: +组件系统是 Vue.js 另一个重要概念,因为它提供了一种抽象,让我们可以用独立可复用的小组件来构建大型应用。如果我们考虑到这点,几乎任意类型的应用界面都可以抽象为一个组件树: ![Component Tree](/images/components.png) -在 Vue 里,一个组件实质上是一个拥有预定义选项的一个 Vue 实例: +在 Vue 里,一个组件实质上是一个拥有预定义选项的 Vue 实例: ``` js // Define a new component called todo-item @@ -277,7 +277,7 @@ Vue.component('todo-item', { ``` -但是这样会为每个 todo 渲染同样的文本,这看起来并不是很酷。我们应该将数据从父作用域传到子组件。让我们来修改一下组件的定义,使得它能够接受一个[属性](components.html#Props)字段: +但是这样会为每个 todo 渲染同样的文本,这不怎么好玩。我们应该能把数据从父作用域传到子组件。让我们来修改一下组件的定义,使得它能够接受一个[属性](components.html#Props)字段: ``` js Vue.component('todo-item', { @@ -362,11 +362,11 @@ var app7 = new Vue({ 1. Web 组件规范仍然远未完成,并且没有浏览器实现。相比之下,Vue.js 组件不需要任何补丁,并且在所有支持的浏览器(IE9 及更高版本)之下表现一致。必要时,Vue.js 组件也可以放在原生自定义元素之内。 -2. Vue.js 组件提供了原生自定义元素所不具备的一些重要功能,比如组件间的数据流,自定义事件系统,以及动态的、带特效的组件替换。 +2. Vue.js 组件提供了原生自定义元素所不具备的一些重要功能,比如组件间的数据流、自定义事件系统,以及动态的、带特效的组件替换。 ## 准备好探索更广阔的世界了? -我们刚才简单介绍了 Vue.js 核心的一些最基本的特征 - 本指南的其余部分将用更详尽的篇幅去描述其他的一些高级特性,所以一定要阅读完所有的内容哦! +我们刚才简单介绍了 Vue.js 核心的一些最基本的特征——本指南的其余部分将用更详尽的篇幅去描述其他的一些高级特性,所以一定要阅读完所有的内容哦! ***