You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: src/guide/index.md
+52-64Lines changed: 52 additions & 64 deletions
Original file line number
Diff line number
Diff line change
@@ -4,30 +4,33 @@ type: guide
4
4
order: 2
5
5
---
6
6
7
-
## What is Vue.js?
7
+
## Vue.js 是什么
8
8
9
-
Vue (pronounced /vjuː/, like**view**) is a **progressive framework** for building user interfaces. Unlike other monolithic frameworks, Vue is designed from the ground up to be incrementally adoptable. The core library is focused on the view layer only, and is very easy to pick up and integrate with other libraries or existing projects. On the other hand, Vue is also perfectly capable of powering sophisticated Single-Page Applications when used in combination with [modern tooling](single-file-components.html) and [supporting libraries](https://github.com/vuejs/awesome-vue#libraries--plugins).
If you are an experienced frontend developer and want to know how Vue compares to other libraries/frameworks, check out the [Comparison with Other Frameworks](comparison.html).
12
11
13
-
## Getting Started
12
+
Vue.js 的目标是通过尽可能简单的 API 实现**响应的数据绑定**和**组合的视图组件**。
14
13
15
-
The easiest way to try out Vue.js is using the [JSFiddle Hello World example](https://jsfiddle.net/chrisvfritz/4tpzm3e1/). Feel free to open it in another tab and follow along as we go through some basic examples. If you prefer downloading / installing from a package manager, check out the [Installation](/guide/installation.html) page.
At the core of Vue.js is a system that enables us to declaratively render data to the DOM using straightforward template syntax:
18
+
尝试 Vue.js 最简单的方法是使用 [JSFiddle Hello World 例子](//jsfiddle.net/chrisvfritz/4tpzm3e1/)。请在浏览器新标签页中打开它,跟着我们查看一些基础示例。如果你喜欢用包管理器下载/安装,查看[安装](/guide/installation.html)教程。
19
+
20
+
## 声明式渲染
21
+
22
+
Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进DOM的系统:
20
23
21
24
```html
22
25
<divid="app">
23
26
{{ message }}
24
27
</div>
25
28
```
26
29
```js
27
-
var app =newVue({
30
+
newVue({
28
31
el:'#app',
29
32
data: {
30
-
message:'Hello Vue!'
33
+
message:'Hello Vue.js!'
31
34
}
32
35
})
33
36
```
@@ -45,22 +48,20 @@ var app = new Vue({
45
48
</script>
46
49
{% endraw %}
47
50
48
-
We have already created our very first Vue app! This looks pretty similar to just rendering a string template, but Vue has done a lot of work under the hood. The data and the DOM are now linked, and everything is now **reactive**. How do we know? Just open up your browser's JavaScript console and set `app.message` to a different value. You should see the rendered example above update accordingly.
In addition to text interpolation, we can also bind element attributes like this:
53
+
除了绑定插入的文本内容,我们还可以采用这样的方式绑定 DOM 元素属性:
51
54
52
55
```html
53
56
<divid="app-2">
54
-
<spanv-bind:title="message">
55
-
Hover your mouse over me for a few seconds to see my dynamically bound title!
56
-
</span>
57
+
<spanv-bind:id="id">Inspect me</span>
57
58
</div>
58
59
```
59
60
```js
60
61
var app2 =newVue({
61
62
el:'#app-2',
62
63
data: {
63
-
message:'You loaded this page on '+newDate()
64
+
id:'inspect-me'
64
65
}
65
66
})
66
67
```
@@ -80,20 +81,19 @@ var app2 = new Vue({
80
81
</script>
81
82
{% endraw %}
82
83
83
-
Here we are encountering something new. The `v-bind`attribute you are seeing is called a **directive**. Directives are prefixed with `v-` to indicate that they are special attributes provided by Vue, and as you may have guessed, they apply special reactive behavior to the rendered DOM. Here it is basically saying "keep this element's `title` attribute up-to-date with the `message` property on the Vue instance."
84
+
这里我们遇到新东西。你看到的 `v-bind`特性被称为**指令**。指令带有前缀 `v-`,以指示它们是 Vue.js 提供的特殊特性。并且如你所想象的,它们会对绑定的目标元素添加响应式的特殊行为。这个指令的简单含义是说:将该元素的 id 属性绑定到 Vue 实例的 id 属性上。
84
85
85
-
If you open up your JavaScript console again and enter `app2.message = 'some new message'`, you'll once again see that the bound HTML - in this case the `title` attribute - has been updated.
86
+
用浏览器的开发者工具去监测以上元素 - 你会发现 这个元素的 id 为 `inspect-me`。是的,如果你在控制台里更改`app2.id`,那么该元素的 id 也会随之更新。
86
87
87
-
## Conditionals and Loops
88
+
## 条件与循环
88
89
89
-
It's quite simple to toggle the presence of an element, too:
90
+
控制切换一个元素的显示也相当简单:
90
91
91
92
```html
92
93
<divid="app-3">
93
94
<pv-if="seen">Now you see me</p>
94
95
</div>
95
96
```
96
-
97
97
```js
98
98
var app3 =newVue({
99
99
el:'#app-3',
@@ -117,11 +117,11 @@ var app3 = new Vue({
117
117
</script>
118
118
{% endraw %}
119
119
120
-
Go ahead and enter `app3.seen = false` in the console. You should see the message disappear.
120
+
继续在控制台设置 `app3.seen = false`,你会发现 “Now you see me” 消失了。
121
121
122
-
This example demonstrates that we can bind data to not only text and attributes, but also the **structure**of the DOM. Moreover, Vue also provides a powerful transition effect system that can automatically apply [transition effects](transitions.html) when elements are inserted/updated/removed by Vue.
122
+
这个例子演示了我们不仅可以绑定 DOM 文本到数据,也可以绑定 DOM **结构**到数据。而且,Vue.js 也提供一个强大的过渡效果系统,可以在 Vue 插入/删除元素时自动应用[过渡效果](transitions.html)。
123
123
124
-
There are quite a few other directives, each with its own special functionality. For example, the `v-for`directive can be used for displaying a list of items using the data from an Array:
124
+
也有一些其它指令,每个都有特殊的功能。例如, `v-for`指令可以绑定数据到数据来渲染一个列表:
125
125
126
126
```html
127
127
<divid="app-4">
@@ -144,6 +144,7 @@ var app4 = new Vue({
144
144
}
145
145
})
146
146
```
147
+
147
148
{% raw %}
148
149
<divid="app-4"class="demo">
149
150
<ol>
@@ -166,11 +167,11 @@ var app4 = new Vue({
166
167
</script>
167
168
{% endraw %}
168
169
169
-
In the console, enter `app4.todos.push({ text: 'New item' })`. You should see a new item appended to the list.
Note in the method we simply update the state of our app without touching the DOM - all DOM manipulations are handled by Vue, and the code you write is focused on the underlying logic.
216
+
在 `reverseMessage` 方法中,我们在没有接触 DOM 的情况下更新了应用的状态 - 所有的 DOM 操作都由 Vue 来处理,你写的代码只需要关注基本逻辑。
215
217
216
-
Vue also provides the `v-model`directive that makes two-way binding between form input and app state a breeze:
218
+
Vue 也提供了 `v-model`指令,它使得在表单输入和应用状态中做双向数据绑定变得非常轻巧。
217
219
218
220
```html
219
221
<divid="app-6">
@@ -229,6 +231,7 @@ var app6 = new Vue({
229
231
}
230
232
})
231
233
```
234
+
232
235
{% raw %}
233
236
<divid="app-6"class="demo">
234
237
<p>{{ message }}</p>
@@ -244,70 +247,55 @@ var app6 = new Vue({
244
247
</script>
245
248
{% endraw %}
246
249
247
-
## Composing with Components
250
+
## 用组件构建(应用)
248
251
249
-
The component system is another important concept in Vue, because it's an abstraction that allows us to build large-scale applications composed of small, self-contained, and often reusable components. If we think about it, almost any type of application interface can be abstracted into a tree of components:
In Vue, a component is essentially a Vue instance with pre-defined options. Registering a component in Vue is straightforward:
256
+
在 Vue 里,一个组件实质上是一个拥有预定义选项的一个 Vue 实例:
254
257
255
258
```js
256
-
// Define a new component called todo-item
257
-
Vue.component('todo-item', {
259
+
Vue.component('todo', {
258
260
template:'<li>This is a todo</li>'
259
261
})
260
262
```
261
263
262
-
Now you can compose it in another component's template:
264
+
现在你可以另一个组件模板中写入它:
263
265
264
266
```html
265
267
<ul>
266
-
<!--
267
-
Create an instance of the todo-item component
268
-
for each todo in a todos array
269
-
-->
270
-
<todo-itemv-for="todo in todos"></todo-item>
268
+
<todov-for="todo in todos"></todo>
271
269
</ul>
272
270
```
273
271
274
-
But this would render the same text for every todo, which is not super interesting. We should be able to pass data from the parent scope into child components. Let's modify the component definition to make it accept a [prop](/guide/components.html#Props):
272
+
但是这样会为每个 todo 渲染同样的文本,这看起来并不是很6。我们应该将数据从父作用域传到子组件。让我们来修改一下组件的定义,使得它能够接受一个 [`prop`](/guide/components.html#Props) 字段:
275
273
276
274
```js
277
-
Vue.component('todo-item', {
278
-
// The todo-item component now accepts a
279
-
// "prop", which is like a custom attribute.
280
-
// This prop is called todo.
275
+
Vue.component('todo', {
281
276
props: ['todo'],
282
277
template:'<li>{{ todo.text }}</li>'
283
278
})
284
279
```
285
280
286
-
Now we can pass the todo into each repeated component using `v-bind`:
281
+
现在,我们可以使用 `v-bind` 指令将 todo 传到每一个重复的组件中:
287
282
288
283
```html
289
284
<divid="app-7">
290
285
<ol>
291
-
<!--
292
-
Now we provide each todo-item with the todo object
293
-
it's representing, so that its content can be dynamic
294
-
-->
295
-
<todo-itemv-for="todo in todos"v-bind:todo="todo"></todo-item>
286
+
<todov-for="todo in todos"v-bind:todo="todo"></todo>
296
287
</ol>
297
288
</div>
298
-
```
289
+
```
299
290
```js
300
291
var app7 =newVue({
301
292
el:'#app-7',
302
293
data: {
303
-
todos: [
304
-
{ text:'Learn JavaScript' },
305
-
{ text:'Learn Vue' },
306
-
{ text:'Build something awesome' }
307
-
]
294
+
todos: [/* ... */]
308
295
}
309
296
})
310
297
```
298
+
311
299
{% raw %}
312
300
<divid="app-7"class="demo">
313
301
<ol>
@@ -332,9 +320,9 @@ var app7 = new Vue({
332
320
</script>
333
321
{% endraw %}
334
322
335
-
This is just a contrived example, but we have managed to separate our app into two smaller units, and the child is reasonably well-decoupled from the parent via the props interface. We can now further improve our `<todo-item>` component with more complex template and logic without affecting the parent app.
In a large application, it is necessary to divide the whole app into components to make development manageable. We will talk a lot more about components [later in the guide](/guide/components.html), but here's an (imaginary) example of what an app's template might look like with components:
@@ -346,14 +334,14 @@ In a large application, it is necessary to divide the whole app into components
346
334
</div>
347
335
```
348
336
349
-
### Relation to Custom Elements
337
+
##与自定义元素的关系
350
338
351
-
You may have noticed that Vue components are very similar to **Custom Elements**, which are part of the [Web Components Spec](http://www.w3.org/wiki/WebComponents/). That's because Vue's component syntax is loosely modeled after the spec. For example, Vue components implement the [Slot API](https://github.com/w3c/webcomponents/blob/gh-pages/proposals/Slots-Proposal.md)and the `is`special attribute. However, there are a few key differences:
1.The Web Components Spec is still in draft status, and is not natively implemented in every browser. In comparison, Vue components don't require any polyfills and work consistently in all supported browsers (IE9 and above). When needed, Vue components can also be wrapped inside a native custom element.
341
+
1. Web 组件规范仍然远未完成,并且没有浏览器实现。相比之下,Vue.js 组件不需要任何补丁,并且在所有支持的浏览器(IE9 及更高版本)之下表现一致。必要时,Vue.js 组件也可以放在原生自定义元素之内。
354
342
355
-
2. Vue components provide important features that are not available in plain custom elements, most notably cross-component data flow, custom event communication and build tool integrations.
We've just briefly introduced the most basic features of Vue.js core - the rest of this guide will cover them and other advanced features with much finer details, so make sure to read through it all!
0 commit comments