@@ -14,9 +14,9 @@ Vue.js 的目标是通过尽可能简单的 API 实现**响应的数据绑定**
14
14
15
15
## 起步
16
16
17
- <p class =" tip " >官方指南假设你已有 HTML、CSS 和 JavaScript 中级前端知识。如果你是全新的前端开发者 ,将框架作为你的第一步可能不是最好的主意——掌握好基础知识再来!之前有其他框架的使用经验是有帮助的,但不是必需的 。</p >
17
+ <p class =" tip " >官方指南假设你已有 HTML、CSS 和 JavaScript 中级前端知识。如果你刚开始学习前端开发 ,将框架作为你的第一步可能不是最好的主意——掌握好基础知识再来!之前有其他框架的使用经验对于学习 Vue.js 是有帮助的,但这不是必需的 。</p >
18
18
19
- 尝试 Vue.js 最简单的方法是使用 [ JSFiddle Hello World 例子] ( https://jsfiddle.net/chrisvfritz/50wL7mdz/ ) 。你可以在浏览器新标签页中打开它,跟着我们学习一些基础示例 。或者你也可以创建一个本地的 ` .html ` 文件,然后通过如下方式引入 Vue:
19
+ 尝试 Vue.js 最简单的方法是使用 [ JSFiddle Hello World 例子] ( https://jsfiddle.net/chrisvfritz/50wL7mdz/ ) 。你可以在浏览器新标签页中打开它,跟着例子学习一些基础用法 。或者你也可以创建一个本地的 ` .html ` 文件,然后通过如下方式引入 Vue:
20
20
21
21
``` html
22
22
<script src =" https://unpkg.com/vue/dist/vue.js" ></script >
@@ -56,7 +56,7 @@ var app = new Vue({
56
56
</script >
57
57
{% endraw %}
58
58
59
- 我们已经生成了我们的第一个 Vue 应用!看起来这跟单单渲染一个字符串模板非常类似,但是 Vue.js 在背后做了大量工作。现在数据和 DOM 已经被绑定在一起,所有的元素都是** 响应式的** 。我们如何知道?打开你的浏览器的控制台,并修改 ` app.message ` ,你将看到上例相应地更新。
59
+ 我们已经生成了我们的第一个 Vue 应用!看起来这跟单单渲染一个字符串模板非常类似,但是 Vue.js 在背后做了大量工作。现在数据和 DOM 已经被绑定在一起,所有的元素都是** 响应式的** 。我们如何知道?打开你的浏览器的控制台(就在这个页面打开) ,并修改 ` app.message ` ,你将看到上例相应地更新。
60
60
61
61
除了绑定插入的文本内容,我们还可以采用这样的方式绑定 DOM 元素属性:
62
62
@@ -179,7 +179,7 @@ var app4 = new Vue({
179
179
180
180
## 处理用户输入
181
181
182
- 为了让用户和你的应用进行互动,我们可以用 ` v-on ` 指令绑定一个监听事件用于调用我们 Vue 实例中定义的方法:
182
+ 为了让用户和你的应用进行互动,我们可以用 ` v-on ` 指令绑定一个监听事件,用它调用我们 Vue 实例中定义的方法:
183
183
184
184
``` html
185
185
<div id =" app-5" >
@@ -220,9 +220,9 @@ var app5 = new Vue({
220
220
</script >
221
221
{% endraw %}
222
222
223
- 在 ` reverseMessage ` 方法中,我们在没有接触 DOM 的情况下更新了应用的状态 - 所有的 DOM 操作都由 Vue 来处理,你写的代码只需要关注基本逻辑。
223
+ 在 ` reverseMessage ` 方法中,我们在没有接触 DOM 的情况下更新了应用的状态—— 所有的 DOM 操作都由 Vue 来处理,你写的代码只需要关注基本逻辑。
224
224
225
- Vue 也提供了 ` v-model ` 指令,它使得在表单输入和应用状态中做双向数据绑定变得非常轻巧 。
225
+ Vue 也提供了 ` v-model ` 指令,它能轻松实现表单输入和应用状态之间的双向绑定 。
226
226
227
227
``` html
228
228
<div id =" app-6" >
@@ -255,11 +255,11 @@ var app6 = new Vue({
255
255
256
256
## 用组件构建(应用)
257
257
258
- 组件系统是 Vue.js 另一个重要概念,因为它提供了一种抽象,让我们可以用独立可复用的小组件来构建大型应用。如果我们考虑到这点,几乎任意类型的应用的界面都可以抽象为一个组件树 :
258
+ 组件系统是 Vue.js 另一个重要概念,因为它提供了一种抽象,让我们可以用独立可复用的小组件来构建大型应用。如果我们考虑到这点,几乎任意类型的应用界面都可以抽象为一个组件树 :
259
259
260
260
![ Component Tree] ( /images/components.png )
261
261
262
- 在 Vue 里,一个组件实质上是一个拥有预定义选项的一个 Vue 实例:
262
+ 在 Vue 里,一个组件实质上是一个拥有预定义选项的 Vue 实例:
263
263
264
264
``` js
265
265
// Define a new component called todo-item
@@ -277,7 +277,7 @@ Vue.component('todo-item', {
277
277
</ol >
278
278
```
279
279
280
- 但是这样会为每个 todo 渲染同样的文本,这看起来并不是很酷。我们应该将数据从父作用域传到子组件 。让我们来修改一下组件的定义,使得它能够接受一个[ 属性] ( components.html#Props ) 字段:
280
+ 但是这样会为每个 todo 渲染同样的文本,这不怎么好玩。我们应该能把数据从父作用域传到子组件 。让我们来修改一下组件的定义,使得它能够接受一个[ 属性] ( components.html#Props ) 字段:
281
281
282
282
``` js
283
283
Vue .component (' todo-item' , {
@@ -362,11 +362,11 @@ var app7 = new Vue({
362
362
363
363
1 . Web 组件规范仍然远未完成,并且没有浏览器实现。相比之下,Vue.js 组件不需要任何补丁,并且在所有支持的浏览器(IE9 及更高版本)之下表现一致。必要时,Vue.js 组件也可以放在原生自定义元素之内。
364
364
365
- 2 . Vue.js 组件提供了原生自定义元素所不具备的一些重要功能,比如组件间的数据流, 自定义事件系统,以及动态的、带特效的组件替换。
365
+ 2 . Vue.js 组件提供了原生自定义元素所不具备的一些重要功能,比如组件间的数据流、 自定义事件系统,以及动态的、带特效的组件替换。
366
366
367
367
## 准备好探索更广阔的世界了?
368
368
369
- 我们刚才简单介绍了 Vue.js 核心的一些最基本的特征 - 本指南的其余部分将用更详尽的篇幅去描述其他的一些高级特性,所以一定要阅读完所有的内容哦!
369
+ 我们刚才简单介绍了 Vue.js 核心的一些最基本的特征—— 本指南的其余部分将用更详尽的篇幅去描述其他的一些高级特性,所以一定要阅读完所有的内容哦!
370
370
371
371
***
372
372
0 commit comments