作者：HelloGitHub——追夢人物
Hello Vue
既然是學習程式設計，那就遵循一下那個古老的傳統儀式。
首先我們新建一個 todos.html 檔案，用任何一個你喜歡的文字編輯器或者 IDE 開啟（例如 vscode、sublime、記事本、notepad++、webstorm 等等），然後寫上下面的程式碼：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Vue Todo Tutorial</title></head>
<body>
<div id="app">{{ message }}</div>
</body>
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: function () {
return {message: 'Hello Vue!'}
}
})
</script>
</html>
我們寫了一個簡單的 HTML 檔案，使用 Script 標籤引入了 Vue，版本是 2.5.16。然後我們寫了幾行 js 程式碼。在程式碼中我們 new（建立） 了一個 Vue 物件，並向這個物件傳遞了一些選項，例如告訴 Vue 掛載的元素（el，即elements 的縮寫）是 id 為 app 的那個 div，並且在 data 中繫結了一個名為 message 的變數，其值為 'Hello Vue!'，然後我們就可以在 HTML 文件中引用這個 message 。Vue 在後面幫我們做麼很多神奇的事情，它把 {{ message }} 替換成了 Vue 物件中對應的值。
儲存程式碼並用瀏覽器開啟，可以看到瀏覽器顯示了 “Hello Vue!”，你也可以嘗試修改 message 的值，發現顯示的內容會跟著變化。
表單繫結
再來看一個神奇的例子，我們把程式碼換成下面這樣：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Vue Todo Tutorial</title></head>
<body>
<div id="app">
<input type="text" v-model="value">
<input type="button" value="傳送">
<div>value 的值是：{{ value }}</div>
</div>
</body>
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: function () {
return {value: ''}
}
})
</script>
</html>
這裡要關注一下文件的 input 標籤裡 v-model="value" 這個東西。v-model 被稱為 Vue 的指令，指令可以用來做很多事，比如用於 if 條件判斷的 v-if，用於繫結值的 v-bind、用於繫結監聽事件的 v-on 等等，這在以後會接觸到。而這個 v-model 指令的作用是將 input 元素 value 屬性的值和我們建立的 Vue 物件中 value 的值進行繫結，我們知道 input 有一個 value 屬性，它的值會在瀏覽器顯示（例如後面那個 button 按鈕的傳送），Vue 將這個值繫結後，在 input 中引起的 value 值變化就會實時反映到關聯的 Vue 物件，所以會看到下方引用的 {{ value }} 也會跟著變化。
開啟瀏覽器，然後在文字框做一些輸入，試試效果！
加點方法
接下來我們在 Vue 物件中加點方法，還是上面的例子，只是在 Vue 物件中加了一個方法：
var app = new Vue({
el: '#app',
data: function () {
return {value: ''}
},
// 這是新增的方法
methods: {
send: function () {
alert('傳送成功！');
this.value = ''
}
}
})
方法宣告在 method 物件中，key 為方法名，值為對應的函式。我們想做的事情很簡單，就是點選傳送按鈕後顯示一個傳送成功的訊息，然後將 value 的值清空。
開啟瀏覽器，發現怎麼點都沒有效果！因為 Vue 並不知道我們點選了按鈕，為了讓 Vue 監聽到我們點選按鈕的事件，需要在被點選的元素上繫結一個 click 事件，前面說過繫結事件用 v-on，因此在傳送按鈕上加上相應的程式碼：
<input type="button" value="傳送" v-on:click="send"/>
在輸入框輸入一些文字，然後點選傳送按鈕試試。
計算屬性
Vue 還可以根據繫結的資料做一些計算，然後我們就可以引用計算的結果。假設我們想實時統計輸入的字數，我們可以在 Vue 物件里加上對 value 長度的計算值：
var app = new Vue({
el: '#app',
data: function () {
return {value: ''}
},
methods: {
// 省略...
},
// 這是新增的計算屬性
computed: {
count: function () {
return this.value.length
}
}
})
計算屬性申明到 computed 物件裡，這個物件的鍵是計算的結果，值是計算函式，這裡我們計算了 value 的長度。以後在 Vue 物件中就可以使用 this.count 引用計算結果，也可以在關聯的模板中直接引用，和繫結的資料 value 的用法非常類似。比如我們在文件中引用這個 count：
<div id="app">
<input type="text" v-model="value">
<input type="button" value="傳送" v-on:click="send"/>
<div>value 的值是：{{ value }}</div>
<!-- 引用 count -->
<div>字數：{{ count }}</div>
</div>
開啟瀏覽器看看效果。
加點樣式
Vue 還可以動態地幫我們為元素繫結樣式（class 屬性），假設如果我們希望 input 中沒有任何值輸入，即 value 的值為空時，input 的邊框為紅色以提醒使用者沒有內容。首先我們寫一個簡單的樣式（這個樣式非常簡單，不需要有 CSS 基礎也看得懂），樣式通常寫到 head 標籤裡，用 style 包裹：
<head>
<meta charset="UTF-8"><title>Vue Todo Tutorial</title>
<style>
.empty {
border-color: red;
}
</style>
</head>
然後將這個 empty 用於 input 的 class 屬性，瀏覽器就會渲染對應的樣式：
<div id="app">
<input type="text" class='empty' v-model="value">
...
</div>
當然現在無論 value 為何值邊框都是紅色的，因為 class 始終為 empty，現在讓 Vue 來幫我們。前面說了，繫結值用 v-bind 指令，我們修改一下程式碼，為 input 的 class 繫結一個值：
<div id="app">
<input type="text"
v-bind:class='{empty: !count}'
v-model="value">
...
</div>
Vue 會根據 empty 後的表示式 !count 的真假來判斷 class 的值是否為 empty，如果為真（即 count = 0 的情況），則 class 的值為 empty，否則為空。
開啟瀏覽器看看效果！
練習
我們通過這幾個循序漸進的例子體會了 Vue 的部分核心特性，這些特性對我們開發 Todo 應用非常有幫助。當然這個例子還有一點小瑕疵，就由你來作為練習改進一下。
練習一： 儘管我們在使用者沒有輸入時用紅色邊框提醒使用者內容為空，但是使用者點選按鈕後仍然顯示提交成功的通知，這是不合理的。合理的情況應該是彈出通知提示使用者請輸入內容。修改示例的程式碼，使其達到上述效果。（提示：修改 send 方法）
練習二： 即使內容為空，輸入框下方依然顯示 value 的值是：，這看起來很奇怪。我們希望只有使用者真正地輸入了內容後，才提示 value 的值，請參閱 Vue 關於指令的官方文件，找到滿足我們需求的指令，修改示例程式碼以達到上述效果。（提示：我們應該通過判斷 value 是否有值來決定是否顯示輸入框下邊的 div 元素。）
Vue 的指令文件：https://cn.vuejs.org/v2/guide/conditional.html
接下來正式開始我們的 Todo 應用的開發吧！