---
title: 起步
type: guide
order: 1
---
我們以 Vue 數據綁定的快速導覽開始。如果你對高級概述更感興趣,可查看這篇[博文](http://blog.evanyou.me/2015/10/25/vuejs-re-introduction/)。
嘗試 Vue.js 最簡單的方法是使用 [JSFiddle Hello World 例子](https://jsfiddle.net/yyx990803/okv0rgrk/)。在瀏覽器新標簽頁中打開它,跟著我們查看一些基礎示例。如果你喜歡用包管理器下載/安裝,查看[安裝](/guide/installation.html)教程。
### Hello World
``` html
<div id="app">
{{ message }}
</div>
```
``` js
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
}
})
```
{% raw %}
<div id="app" class="demo">
{{ message }}
</div>
<script>
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
}
})
</script>
{% endraw %}
### 雙向綁定
``` html
<div id="app">
<p>{{ message }}</p>
<input v-model="message">
</div>
```
``` js
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
}
})
```
{% raw %}
<div id="app2" class="demo">
<p>{{ message }}</p>
<input v-model="message">
</div>
<script>
new Vue({
el: '#app2',
data: {
message: 'Hello Vue.js!'
}
})
</script>
{% endraw %}
### 渲染列表
``` html
<div id="app">
<ul>
<li v-for="todo in todos">
{{ todo.text }}
</li>
</ul>
</div>
```
``` js
new Vue({
el: '#app',
data: {
todos: [
{ text: 'Learn JavaScript' },
{ text: 'Learn Vue.js' },
{ text: 'Build Something Awesome' }
]
}
})
```
{% raw %}
<div id="app3" class="demo">
<ul>
<li v-for="todo in todos">
{{ todo.text }}
</li>
</ul>
</div>
<script>
new Vue({
el: '#app3',
data: {
todos: [
{ text: 'Learn JavaScript' },
{ text: 'Learn Vue.js' },
{ text: 'Build Something Awesome' }
]
}
})
</script>
{% endraw %}
### 處理用戶輸入
``` html
<div id="app">
<p>{{ message }}</p>
<button v-on:click="reverseMessage">Reverse Message</button>
</div>
```
``` js
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
},
methods: {
reverseMessage: function () {
this.message = this.message.split('').reverse().join('')
}
}
})
```
{% raw %}
<div id="app4" class="demo">
<p>{{ message }}</p>
<button v-on:click="reverseMessage">Reverse Message</button>
</div>
<script>
new Vue({
el: '#app4',
data: {
message: 'Hello Vue.js!'
},
methods: {
reverseMessage: function () {
this.message = this.message.split('').reverse().join('')
}
}
})
</script>
{% endraw %}
### 綜合
``` html
<div id="app">
<input v-model="newTodo" v-on:keyup.enter="addTodo">
<ul>
<li v-for="todo in todos">
<span>{{ todo.text }}</span>
<button v-on:click="removeTodo($index)">X</button>
</li>
</ul>
</div>
```
``` js
new Vue({
el: '#app',
data: {
newTodo: '',
todos: [
{ text: 'Add some todos' }
]
},
methods: {
addTodo: function () {
var text = this.newTodo.trim()
if (text) {
this.todos.push({ text: text })
this.newTodo = ''
}
},
removeTodo: function (index) {
this.todos.splice(index, 1)
}
}
})
```
{% raw %}
<div id="app5" class="demo">
<input v-model="newTodo" v-on:keyup.enter="addTodo">
<ul>
<li v-for="todo in todos">
<span>{{ todo.text }}</span>
<button v-on:click="removeTodo($index)">X</button>
</li>
</ul>
</div>
<script>
new Vue({
el: '#app5',
data: {
newTodo: '',
todos: [
{ text: 'Add some todos' }
]
},
methods: {
addTodo: function () {
var text = this.newTodo.trim()
if (text) {
this.todos.push({ text: text })
this.newTodo = ''
}
},
removeTodo: function (index) {
this.todos.splice(index, 1)
}
}
})
</script>
{% endraw %}
希望上例能讓你對 Vue.js 的工作原理有一個基礎概念。我知道你現在有許多疑問——繼續閱讀,在后面的教程將一一解答。
- vue
- 官方教程
- 起步
- 安裝
- 概述
- Vue 實例
- Class 與 Style 綁定
- 數據綁定語法
- 條件渲染
- 列表渲染
- 表單控件綁定
- 組件
- 計算屬性
- 自定義指令
- 自定義過濾器
- 方法與事件處理器
- 混合
- 插件
- 過渡
- 深入響應式原理
- 對比其它框架
- 構建大型應用
- API
- vue-router
- 安裝
- 基本用法
- 嵌套路由
- 路由對象和路由匹配
- 具名路徑
- 路由配置項
- router-view
- v-link
- 切換控制流水線
- 切換鉤子函數
- data
- activate
- deactivate
- canActivate
- canDeactivate
- canReuse
- API
- 路由實例屬性
- router.start
- router.stop
- router.map
- router.on
- router.go
- router.replace
- router.redirect
- router.alias
- router.beforeEach
- router.afterEach
- 文章
- VUE.JS: A (RE)INTRODUCTION
- 源碼
- 表單控件綁定