作者：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 應用的開發吧！