作者：HelloGitHub——**追夢人物** ## Hello Vue 既然是學習程式設計，那就遵循一下那個古老的傳統儀式。 首先我們新建一個 todos.html 檔案，用任何一個你喜歡的文字編輯器或者 IDE 開啟（例如 vscode、sublime、記事本、notepad++、webstorm 等等），然後寫上下面的程式碼： ```html {{ message }} ``` 我們寫了一個簡單的 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 的值，發現顯示的內容會跟著變化。 ## 表單繫結 再來看一個神奇的例子，我們把程式碼換成下面這樣： ```html value 的值是：{{ value }} ``` 這裡要關注一下文件的 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 物件中加了一個方法： ```javascript var app = new Vue({ el: '#app', data: function () { return {value: ''} }, // 這是新增的方法 methods: { send: function () { alert('傳送成功！'); this.value = '' } } }) ``` 方法宣告在 method 物件中，key 為方法名，值為對應的函式。我們想做的事情很簡單，就是點擊發送按鈕後顯示一個傳送成功的訊息，然後將 value 的值清空。 開啟瀏覽器，發現怎麼點都沒有效果！因為 Vue 並不知道我們點選了按鈕，為了讓 Vue 監聽到我們點選按鈕的事件，需要在被點選的元素上繫結一個 click 事件，前面說過繫結事件用 v-on，因此在傳送按鈕上加上相應的程式碼： ```html ``` 在輸入框輸入一些文字，然後點擊發送按鈕試試。 ## 計算屬性 Vue 還可以根據繫結的資料做一些計算，然後我們就可以引用計算的結果。假設我們想實時統計輸入的字數，我們可以在 Vue 物件里加上對 value 長度的計算值： ```js 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： ```html value 的值是：{{ value }} 字數：{{ count }} ``` 開啟瀏覽器看看效果。 ## 加點樣式 Vue 還可以動態地幫我們為元素繫結樣式（class 屬性），假設如果我們希望 input 中沒有任何值輸入，即 value 的值為空時，input 的邊框為紅色以提醒使用者沒有內容。首先我們寫一個簡單的樣式（這個樣式非常簡單，不需要有 CSS 基礎也看得懂），樣式通常寫到 head 標籤裡，用 style 包裹： ```html ``` 然後將這個 empty 用於 input 的 class 屬性，瀏覽器就會渲染對應的樣式： ```html ... ``` 當然現在無論 value 為何值邊框都是紅色的，因為 class 始終為 empty，現在讓 Vue 來幫我們。前面說了，繫結值用 v-bind 指令，我們修改一下程式碼，為 input 的 class 繫結一個值： ```html ... ``` 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 應用的開