@@ -76,7 +76,7 @@ var app = new Vue({
76
76
77
77
我们已经成功创建了第一个 Vue 应用!看起来这跟渲染一个字符串模板非常类似,但是 Vue 在背后做了大量工作。现在数据和 DOM 已经被建立了关联,所有东西都是** 响应式的** 。我们要怎么确认呢?打开你的浏览器的 JavaScript 控制台 (就在这个页面打开),并修改 ` app.message ` 的值,你将看到上例相应地更新。
78
78
79
- 除了文本插值,我们还可以像这样来绑定元素特性 :
79
+ 除了文本插值,我们还可以像这样来绑定元素 attribute :
80
80
81
81
``` html
82
82
<div id =" app-2" >
@@ -109,9 +109,9 @@ var app2 = new Vue({
109
109
</script >
110
110
{% endraw %}
111
111
112
- 这里我们遇到了一点新东西。你看到的 ` v-bind ` 特性被称为 ** 指令** 。指令带有前缀 ` v- ` ,以表示它们是 Vue 提供的特殊特性 。可能你已经猜到了,它们会在渲染的 DOM 上应用特殊的响应式行为。在这里,该指令的意思是:“将这个元素节点的 ` title ` 特性和 Vue 实例的 ` message ` 属性保持一致”。
112
+ 这里我们遇到了一点新东西。你看到的 ` v-bind ` attribute 被称为 ** 指令** 。指令带有前缀 ` v- ` ,以表示它们是 Vue 提供的特殊 attribute 。可能你已经猜到了,它们会在渲染的 DOM 上应用特殊的响应式行为。在这里,该指令的意思是:“将这个元素节点的 ` title ` attribute 和 Vue 实例的 ` message ` 属性保持一致”。
113
113
114
- 如果你再次打开浏览器的 JavaScript 控制台,输入 ` app2.message = '新消息' ` ,就会再一次看到这个绑定了 ` title ` 特性的 HTML 已经进行了更新。
114
+ 如果你再次打开浏览器的 JavaScript 控制台,输入 ` app2.message = '新消息' ` ,就会再一次看到这个绑定了 ` title ` attribute 的 HTML 已经进行了更新。
115
115
116
116
## 条件与循环
117
117
@@ -148,7 +148,7 @@ var app3 = new Vue({
148
148
149
149
继续在控制台输入 ` app3.seen = false ` ,你会发现之前显示的消息消失了。
150
150
151
- 这个例子演示了我们不仅可以把数据绑定到 DOM 文本或特性 ,还可以绑定到 DOM ** 结构** 。此外,Vue 也提供一个强大的过渡效果系统,可以在 Vue 插入/更新/移除元素时自动应用[ 过渡效果] ( transitions.html ) 。
151
+ 这个例子演示了我们不仅可以把数据绑定到 DOM 文本或 attribute ,还可以绑定到 DOM ** 结构** 。此外,Vue 也提供一个强大的过渡效果系统,可以在 Vue 插入/更新/移除元素时自动应用[ 过渡效果] ( transitions.html ) 。
152
152
153
153
还有其它很多指令,每个都有特殊的功能。例如,` v-for ` 指令可以绑定数组的数据来渲染一个项目列表:
154
154
@@ -308,7 +308,7 @@ var app = new Vue(...)
308
308
``` js
309
309
Vue .component (' todo-item' , {
310
310
// todo-item 组件现在接受一个
311
- // "prop",类似于一个自定义特性 。
311
+ // "prop",类似于一个自定义 attribute 。
312
312
// 这个 prop 名为 todo。
313
313
props: [' todo' ],
314
314
template: ' <li>{{ todo.text }}</li>'
@@ -392,7 +392,7 @@ var app7 = new Vue({
392
392
393
393
### 与自定义元素的关系
394
394
395
- 你可能已经注意到 Vue 组件非常类似于** 自定义元素** ——它是 [ Web 组件规范] ( https://www.w3.org/wiki/WebComponents/ ) 的一部分,这是因为 Vue 的组件语法部分参考了该规范。例如 Vue 组件实现了 [ Slot API] ( https://github.com/w3c/webcomponents/blob/gh-pages/proposals/Slots-Proposal.md ) 与 ` is ` 特性 。但是,还是有几个关键差别:
395
+ 你可能已经注意到 Vue 组件非常类似于** 自定义元素** ——它是 [ Web 组件规范] ( https://www.w3.org/wiki/WebComponents/ ) 的一部分,这是因为 Vue 的组件语法部分参考了该规范。例如 Vue 组件实现了 [ Slot API] ( https://github.com/w3c/webcomponents/blob/gh-pages/proposals/Slots-Proposal.md ) 与 ` is ` attribute 。但是,还是有几个关键差别:
396
396
397
397
1 . Web Components 规范已经完成并通过,但未被所有浏览器原生实现。目前 Safari 10.1+、Chrome 54+ 和 Firefox 63+ 原生支持 Web Components。相比之下,Vue 组件不需要任何 polyfill,并且在所有支持的浏览器 (IE9 及更高版本) 之下表现一致。必要时,Vue 组件也可以包装于原生自定义元素之内。
398
398
0 commit comments