Skip to content

Commit f214fa2

Browse files
yyx990803yyx990803
committed
add getting started section in guide.
1 parent bc3c88c commit f214fa2

File tree

2 files changed

+302
-75
lines changed

2 files changed

+302
-75
lines changed

‎source/guide/index.md

+181-75
Original file line numberDiff line numberDiff line change
@@ -1,121 +1,227 @@
11
---
2-
title: Introduction
2+
title: Getting Started
33
type: guide
4-
order: 2
4+
order: 1
55
---
66

7-
Vue.js (pronounced /vjuː/, like **view**) is a library for building interactive web interfaces. The goal of Vue.js is to provide the benefits of **reactive data binding** and **composable view components** with an API that is as simple as possible.
7+
The easiest way to try out Vue.js is using the [JSFiddle Hello World example](https://jsfiddle.net/yyx990803/okv0rgrk/). 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.
88

9-
Vue.js itself is not a full-blown framework - it is focused on the view layer only. It is therefore very easy to pick up and to integrate with other libraries or existing projects. On the other hand, when used in combination with proper tooling and supporting libraries, Vue.js is also perfectly capable of powering sophisticated Single-Page Applications.
10-
11-
If you are an experienced frontend developer and want to know how Vue.js compares to other libraries/frameworks, check out the [Comparison with Other Frameworks](comparison.html); if you are more interested about how Vue.js approaches larger-scale applications, check out the section on [Building Larger-Scale Applications](application.html).
12-
13-
## Reactive Data Binding
14-
15-
At the core of Vue.js is a reactive data-binding system that makes it extremely simple to keep your data and the DOM in sync. When using jQuery to manually manipulate the DOM, the code we write is often imperative, repetitive and error-prone. Vue.js embraces the concept of **data-driven view**. In plain words, it means we use special syntax in our normal HTML templates to "bind" the DOM to the underlying data. Once the bindings are created, the DOM will then be kept in sync with the data. Whenever you modify the data, the DOM updates accordingly. As a result, most of our application logic is now directly manipulating data, rather than messing around with DOM updates. This makes our code easier to write, easier to reason about and easier to maintain.
16-
17-
![MVVM](/images/mvvm.png)
18-
19-
For the simplest possible example:
9+
### Hello World
2010

2111
``` html
22-
<!-- this is our View -->
23-
<div id="example-1">
24-
Hello {{ name }}!
12+
<div id="app">
13+
{{ message }}
2514
</div>
2615
```
27-
2816
``` js
29-
// this is our Model
30-
var exampleData = {
31-
name: 'Vue.js'
32-
}
33-
34-
// create a Vue instance, or, a "ViewModel"
35-
// which links the View and the Model
36-
var exampleVM = new Vue({
37-
el: '#example-1',
38-
data: exampleData
17+
new Vue({
18+
el: '#app',
19+
data: {
20+
message: 'Hello Vue.js!'
21+
}
3922
})
4023
```
41-
42-
Result:
4324
{% raw %}
44-
<div id="example-1" class="demo">Hello {{ name }}!</div>
25+
<div id="app" class="demo">
26+
{{ message }}
27+
</div>
4528
<script>
46-
var exampleData = {
47-
name: 'Vue.js'
48-
}
49-
var exampleVM = new Vue({
50-
el: '#example-1',
51-
data: exampleData
29+
new Vue({
30+
el: '#app',
31+
data: {
32+
message: 'Hello Vue.js!'
33+
}
5234
})
5335
</script>
5436
{% endraw %}
5537

56-
This looks pretty similar to just rendering a template, but Vue.js 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 developer console and modify `exampleData.name`. You should see the rendered example above update accordingly.
57-
58-
Note that we didn't have to write any DOM-manipulating code: the HTML template, enhanced with the bindings, is a declarative mapping of the underlying data state, which is in turn just plain JavaScript objects. Our view is entirely data-driven.
59-
60-
Let's look at a second example:
38+
### Two-way Binding
6139

6240
``` html
63-
<div id="example-2">
64-
<p v-if="greeting">Hello!</p>
41+
<div id="app">
42+
<p>{{ message }}</p>
43+
<input v-model="message">
6544
</div>
6645
```
67-
6846
``` js
69-
var exampleVM2 = new Vue({
70-
el: '#example-2',
47+
new Vue({
48+
el: '#app',
7149
data: {
72-
greeting: true
50+
message: 'Hello Vue.js!'
7351
}
7452
})
7553
```
76-
7754
{% raw %}
78-
<div id="example-2" class="demo">
79-
<span v-if="greeting">Hello!</span>
55+
<div id="app2" class="demo">
56+
<p>{{ message }}</p>
57+
<input v-model="message">
8058
</div>
8159
<script>
82-
var exampleVM2 = new Vue({
83-
el: '#example-2',
60+
new Vue({
61+
el: '#app2',
8462
data: {
85-
greeting: true
63+
message: 'Hello Vue.js!'
8664
}
8765
})
8866
</script>
8967
{% endraw %}
9068

91-
Here we are encountering something new. The `v-if` attribute you are seeing are called **Directives**. Directives are prefixed with `v-` to indicate that they are special attributes provided by Vue.js, and as you may have guessed, they apply special reactive behavior to the rendered DOM. Go ahead and set `exampleVM2.greeting` to `false` in the console. You should see the "Hello!" message disappear.
92-
93-
This second example demonstrates that not only can we bind DOM text to the data, we can also bind the **structure** of the DOM to the data. Moreover, Vue.js also provides a powerful transition effect system that can automatically apply transition effects when elements are inserted/removed by Vue.
94-
95-
There are quite a few other directives, each with its own special functionality. For example the `v-for` directive for displaying items in an Array, or the `v-bind` directive for binding HTML attributes. We will discuss the full data-binding syntax with more details later.
96-
97-
## Component System
98-
99-
The Component System is another important concept in Vue.js, 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:
69+
### Render a List
10070

101-
![Component Tree](/images/components.png)
71+
``` html
72+
<div id="app">
73+
<ul>
74+
<li v-for="todo in todos">
75+
{{ todo.text }}
76+
</li>
77+
</ul>
78+
</div>
79+
```
80+
``` js
81+
new Vue({
82+
el: '#app',
83+
data: {
84+
todos: [
85+
{ text: 'Learn JavaScript' },
86+
{ text: 'Learn Vue.js' },
87+
{ text: 'Build Something Awesome' }
88+
]
89+
}
90+
})
91+
```
92+
{% raw %}
93+
<div id="app3" class="demo">
94+
<ul>
95+
<li v-for="todo in todos">
96+
{{ todo.text }}
97+
</li>
98+
</ul>
99+
</div>
100+
<script>
101+
new Vue({
102+
el: '#app3',
103+
data: {
104+
todos: [
105+
{ text: 'Learn JavaScript' },
106+
{ text: 'Learn Vue.js' },
107+
{ text: 'Build Something Awesome' }
108+
]
109+
}
110+
})
111+
</script>
112+
{% endraw %}
102113

103-
In fact, a typical large application built with Vue.js would form exactly what is on the right - a tree of components. We will talk a lot more about components later in the guide, but here's an (imaginary) example of what an app's template would look like with components:
114+
### Handle User Input
104115

105116
``` html
106117
<div id="app">
107-
<app-nav></app-nav>
108-
<app-view>
109-
<app-sidebar></app-sidebar>
110-
<app-content></app-content>
111-
</app-view>
118+
<p>{{ message }}</p>
119+
<button v-on:click="reverseMessage">Reverse Message</button>
112120
</div>
113121
```
122+
``` js
123+
new Vue({
124+
el: '#app',
125+
data: {
126+
message: 'Hello Vue.js!',
127+
color: 'red'
128+
},
129+
methods: {
130+
reverseMessage: function () {
131+
this.message = this.message.split('').reverse().join('')
132+
}
133+
}
134+
})
135+
```
136+
{% raw %}
137+
<div id="app4" class="demo">
138+
<p>{{ message }}</p>
139+
<button v-on:click="reverseMessage">Reverse Message</button>
140+
</div>
141+
<script>
142+
new Vue({
143+
el: '#app4',
144+
data: {
145+
message: 'Hello Vue.js!'
146+
},
147+
methods: {
148+
reverseMessage: function () {
149+
this.message = this.message.split('').reverse().join('')
150+
}
151+
}
152+
})
153+
</script>
154+
{% endraw %}
114155

115-
You may have noticed that Vue.js components are very similar to **Custom Elements**, which is part of the [Web Components Spec](http://www.w3.org/wiki/WebComponents/). In fact, Vue.js' 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:
116-
117-
1. The Web Components Spec is still very much a work in progress, and is not natively implemented in every browser. In comparison, Vue.js components don't require any polyfills and works consistently in all supported browsers (IE9 and above). When needed, Vue.js components can also be wrapped inside a native custom element.
156+
### All Together Now
118157

119-
2. Vue.js components provide important features that are not available in plain custom elements, most notably cross-component data flow, custom event communication and dynamic component switching with transition effects.
158+
``` html
159+
<div id="app">
160+
<input v-model="newTodo" v-on:keyup.enter="addTodo">
161+
<ul>
162+
<li v-for="todo in todos">
163+
<span>{{ todo.text }}</span>
164+
<button v-on:click="removeTodo($index)">X</button>
165+
</li>
166+
</ul>
167+
</div>
168+
```
169+
``` js
170+
new Vue({
171+
el: '#app',
172+
data: {
173+
newTodo: '',
174+
todos: [
175+
{ text: 'Add some todos' }
176+
]
177+
},
178+
methods: {
179+
addTodo: function () {
180+
var text = this.newTodo.trim()
181+
if (text) {
182+
this.todos.push({ text: text })
183+
this.newTodo = ''
184+
}
185+
},
186+
removeTodo: function (index) {
187+
this.todos.splice(index, 1)
188+
}
189+
}
190+
})
191+
```
192+
{% raw %}
193+
<div id="app5" class="demo">
194+
<input v-model="newTodo" v-on:keyup.enter="addTodo">
195+
<ul>
196+
<li v-for="todo in todos">
197+
<span>{{ todo.text }}</span>
198+
<button v-on:click="removeTodo($index)">X</button>
199+
</li>
200+
</ul>
201+
</div>
202+
<script>
203+
new Vue({
204+
el: '#app5',
205+
data: {
206+
newTodo: '',
207+
todos: [
208+
{ text: 'Add some todos' }
209+
]
210+
},
211+
methods: {
212+
addTodo: function () {
213+
var text = this.newTodo.trim()
214+
if (text) {
215+
this.todos.push({ text: text })
216+
this.newTodo = ''
217+
}
218+
},
219+
removeTodo: function (index) {
220+
this.todos.splice(index, 1)
221+
}
222+
}
223+
})
224+
</script>
225+
{% endraw %}
120226

121-
The component system is the foundation for building large apps with Vue.js. In addition, the Vue.js ecosystem also provides advanced tooling and various supporting libraries that can be put together to create a more "framework" like system.
227+
I hope this gives you a basic idea of how Vue.js works. I'm sure you also have many questions now - read along, and we will cover them in the rest of the guide.

0 commit comments

Comments
 (0)