# 安裝
<div class="red">aaa</div>
直接下載并用 <script> 標簽引入，Vue 會被注冊為一個全局變量。重要提示：在開發時請用開發版本，遇到常見錯誤它會給出友好的警告。
# vue-devtools
[https://github.com/vuejs/vue-devtools](https://github.com/vuejs/vue-devtools)
# 學習
## hello world
~~~
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>hellow</title>
<script src="/static/js/vue.js"></script>
</head>
<body>
<div id="app">
{{ message }}
</div>
<script>
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
}
})
</script>
</body>
</html>
~~~
## 雙向綁定
~~~
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>hellow</title>
<script src="/static/js/vue.js"></script>
</head>
<body>
<div id="app">
{{ message }}
<br>
<input v-model="message">
</div>
<script>
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
}
})
</script>
</body>
</html>
~~~
## 渲染列表
~~~
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>todos</title>
<script src="/static/js/vue.js"></script>
</head>
<body>
<div id="app">
<ul>
<li v-for="todo in todos">
{{ todo.text }}
</li>
</ul>
</div>
<script>
new Vue({
el: '#app',
data: {
todos: [
{ text: 'Learn JavaScript' },
{ text: 'Learn Vue.js' },
{ text: 'Build Something Awesome' }
]
}
})
</script>
</body>
</html>
~~~
## 處理用戶輸入
~~~
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Reverse</title>
<script src="/static/js/vue.js"></script>
</head>
<body>
<div id="app">
<p>{{ message }}</p>
<button v-on:click="reverseMessage">Reverse Message</button>
</div>
<script>
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
},
methods: {
reverseMessage: function () {
this.message = this.message.split('').reverse().join('')
}
}
})
</script>
</body>
</html>
~~~
## 綜合
~~~
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Reverse</title>
<script src="/static/js/vue.js"></script>
</head>
<body>
<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>
<script>
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)
}
}
})
</script>
</body>
</html>
~~~
