@@ -8,24 +8,24 @@ order: 2
8
8
9
9
Vue.js(读音 /vjuː/,类似于 ** view** ) 是一套构建用户界面的** 渐进式框架** 。与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层,非常易学并易与其它库或现有项目整合。另一方面,当与[ 单文件组件] ( single-file-components.html ) 和 [ Vue 生态系统支持的库] ( //github.com/vuejs/awesome-vue#libraries--plugins ) 结合使用时,Vue 也完全能够为复杂的单页应用程序提供驱动。
10
10
11
- 如果你是有经验的前端开发者 ,想知道 Vue.js 与其它库/框架的区别,查看[ 对比其它框架] ( comparison.html ) 。
11
+ 如果您是有经验的前端开发者 ,想知道 Vue.js 与其它库/框架的区别,查看[ 对比其它框架] ( comparison.html ) 。
12
12
13
13
## 起步
14
14
15
- <p class =" tip " >官方指南假设你已有 HTML、CSS 和 JavaScript 中级前端知识。如果你是全新的前端开发者,将框架作为你的第一步可能不是最好的主意 ——掌握好基础知识再来!之前有其他框架的使用经验是有帮助的,但不是必需的。</p >
15
+ <p class =" tip " >官方教程假设您已有 HTML、CSS 和 JavaScript 中级前端知识。如果您是全新的前端开发者,将框架作为您的第一步可能不是最好的主意 ——掌握好基础知识再来!之前有其他框架的使用经验是有帮助的,但不是必需的。</p >
16
16
17
- 尝试 Vue.js 最简单的方法是使用 [ JSFiddle Hello World 例子] ( https://jsfiddle.net/chrisvfritz/50wL7mdz/ ) 。你可以在浏览器新标签页中打开它 ,跟着我们学习一些基础示例。或者你也可以创建一个本地的 ` .html ` 文件,然后通过如下方式引入 Vue:
17
+ 尝试 Vue.js 最简单的方法是使用 [ JSFiddle Hello World 例子] ( https://jsfiddle.net/chrisvfritz/50wL7mdz/ ) 。您可以在浏览器新标签页中打开它 ,跟着我们学习一些基础示例。或者您也可以创建一个本地的 ` .html ` 文件,然后通过如下方式引入 Vue:
18
18
19
19
``` html
20
20
<script src =" https://unpkg.com/vue/dist/vue.js" ></script >
21
21
```
22
22
23
- 你可以查看 [ 安装指南 ] ( /guide/installation.html ) 来了解其他安装 Vue 的选项。请注意我们** 不推荐** 新手直接使用 ` vue-cli ` ,尤其是对 Node.js 构建工具不够了解的同学。
23
+ 您可以查看 [ 安装教程 ] ( /guide/installation.html ) 来了解其他安装 Vue 的选项。请注意我们** 不推荐** 新手直接使用 ` vue-cli ` ,尤其是对 Node.js 构建工具不够了解的同学。
24
24
25
25
26
26
## 声明式渲染
27
27
28
- Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统:
28
+ Vue.js 的核心是一个允许采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统:
29
29
30
30
``` html
31
31
<div id =" app" >
@@ -54,7 +54,7 @@ var app = new Vue({
54
54
</script >
55
55
{% endraw %}
56
56
57
- 我们已经生成了我们的第一个 Vue 应用!看起来这跟单单渲染一个字符串模板非常类似,但是 Vue 在背后做了大量工作。现在数据和 DOM 已经被绑定在一起,一切都是** 响应式的** 。我们如何知道?打开你的浏览器的 JavaScript 控制台,并修改 ` app.message ` ,你将看到上面渲染的例子相应地更新了 。
57
+ 我们已经生成了我们的第一个 Vue 应用!看起来这跟单单渲染一个字符串模板非常类似,但是 Vue 在背后做了大量工作。现在数据和 DOM 已经被绑定在一起,一切都是** 响应式的** 。我们如何知道?打开浏览器的 JavaScript 控制台,并修改 ` app.message ` ,您将看到上面渲染的例子相应地更新了 。
58
58
59
59
除了文本插值,我们还可以采用这样的方式绑定 DOM 元素属性:
60
60
@@ -89,17 +89,17 @@ var app2 = new Vue({
89
89
</script >
90
90
{% endraw %}
91
91
92
- 这里我们遇到点新东西。你看到的 ` v-bind ` 属性被称为** 指令** 。指令带有前缀 ` v- ` ,以表示它们是 Vue 提供的特殊属性。可能你已经猜到了 ,它们会在渲染的 DOM 上应用特殊的响应式行为。简言之,这里该指令的作用是:“将这个元素节点的 ` title ` 属性和 Vue 实例的 ` message ` 属性保持一致”。
92
+ 这里我们遇到点新东西。您看到的 ` v-bind ` 属性被称为** 指令** 。指令带有前缀 ` v- ` ,以表示它们是 Vue 提供的特殊属性。可能您已经猜到了 ,它们会在渲染的 DOM 上应用特殊的响应式行为。简言之,这里该指令的作用是:“将这个元素节点的 ` title ` 属性和 Vue 实例的 ` message ` 属性保持一致”。
93
93
94
- 你再次打开浏览器的 JavaScript 控制台输入 ` app2.message = '一些新消息' ` ,你就会再一次看到这个绑定了 ` title ` 属性的 HTML 已经进行了更新。
94
+ 再次打开浏览器的 JavaScript 控制台输入 ` app2.message = '一些新消息' ` ,就会再一次看到这个绑定了 ` title ` 属性的 HTML 已经进行了更新。
95
95
96
96
## 条件与循环
97
97
98
98
控制切换一个元素的显示也相当简单:
99
99
100
100
``` html
101
101
<div id =" app-3" >
102
- <p v-if =" seen" >现在你看到我了 </p >
102
+ <p v-if =" seen" >现在您看到我了 </p >
103
103
</div >
104
104
```
105
105
``` js
@@ -112,7 +112,7 @@ var app3 = new Vue({
112
112
```
113
113
{% raw %}
114
114
<div id =" app-3 " class =" demo " >
115
- <span v-if =" seen " >现在你看到我了 </span >
115
+ <span v-if =" seen " >现在您看到我了 </span >
116
116
</div >
117
117
<script >
118
118
var app3 = new Vue ({
@@ -124,7 +124,7 @@ var app3 = new Vue({
124
124
</script >
125
125
{% endraw %}
126
126
127
- 继续在控制台设置 ` app3.seen = false ` ,你会发现 “现在你看到我了 ” 消失了。
127
+ 继续在控制台设置 ` app3.seen = false ` ,您会发现 “现在您看到我了 ” 消失了。
128
128
129
129
这个例子演示了我们不仅可以绑定 DOM 文本到数据,也可以绑定 DOM ** 结构** 到数据。而且,Vue 也提供一个强大的过渡效果系统,可以在 Vue 插入/更新/删除元素时自动应用[ 过渡效果] ( transitions.html ) 。
130
130
@@ -173,11 +173,11 @@ var app4 = new Vue({
173
173
</script >
174
174
{% endraw %}
175
175
176
- 在控制台里,输入 ` app4.todos.push({ text: '新项目' }) ` 。你会发现列表中添加了一个新项 。
176
+ 在控制台里,输入 ` app4.todos.push({ text: '新项目' }) ` ,您会发现列表中添加了一个新项 。
177
177
178
178
## 处理用户输入
179
179
180
- 为了让用户和你的应用进行交互 ,我们可以用 ` v-on ` 指令绑定一个调用 Vue 实例方法的事件监听器:
180
+ 为了让用户和您的应用进行交互 ,我们可以用 ` v-on ` 指令绑定一个调用 Vue 实例方法的事件监听器:
181
181
182
182
``` html
183
183
<div id =" app-5" >
@@ -266,7 +266,7 @@ Vue.component('todo-item', {
266
266
})
267
267
```
268
268
269
- 现在你可以用它构建另一个组件模板 :
269
+ 现在您可以用它构建另一个组件模板 :
270
270
271
271
``` html
272
272
<ol >
@@ -356,7 +356,7 @@ var app7 = new Vue({
356
356
357
357
## 与自定义元素的关系
358
358
359
- 你可能已经注意到 Vue 组件非常类似于** 自定义元素** ——它是 [ Web 组件规范] ( //www.w3.org/wiki/WebComponents/ ) 的一部分,这是因为 Vue 的组件语法部分参考了该规范。例如 Vue 组件实现了 [ Slot API] ( //github.com/w3c/webcomponents/blob/gh-pages/proposals/Slots-Proposal.md ) 与 ` is ` 特性。但是,还是有几个关键差别:
359
+ 您可能已经注意到 Vue 组件非常类似于** 自定义元素** ——它是 [ Web 组件规范] ( //www.w3.org/wiki/WebComponents/ ) 的一部分,这是因为 Vue 的组件语法部分参考了该规范。例如 Vue 组件实现了 [ Slot API] ( //github.com/w3c/webcomponents/blob/gh-pages/proposals/Slots-Proposal.md ) 与 ` is ` 特性。但是,还是有几个关键差别:
360
360
361
361
1 . Web 组件规范仍然处于草案阶段,并且尚无浏览器原生实现。相比之下,Vue 组件不需要任何补丁,并且在所有支持的浏览器(IE9 及更高版本)之下表现一致。必要时,Vue 组件也可以包装于原生自定义元素之内。
362
362
0 commit comments