Vue 的模組 - component 作用

在別人都完成30天鐵人賽的路上，我真的是太難了QQ，我才發現我一個禮拜的產量竟然只有1-2篇，在看文件的時候才發現自己之前練習 Vue 遇到的問題，真的是絕大部分都能找出答案，儘管在鐵人賽期間我沒辦法完成整整30篇文章(我覺得我的 component 系列應該還要很久才能完成)，但我之後還是會努力將整個 Vue 文件讀完之後寫成筆記的。

接下來就來看看如何讓畫面上的 <input>、<textarea> 及 <select> 跟 Vue 資料如何做雙向連結吧！

在 JS 中有監聽器 addeventListener ，而 Vue 也有自己一套 DOM 元素監聽器的指令 v-on ， Vue 也配置了幾個修飾符來替代像是 preventDefault() 、 stopPropagation() 等等的。

v-for 就是 JavaScript 裡的迴圈，基於一組資料來製作相同元素區塊。
先簡單講一下 JavaScript 裡 for...in 、 for...of 的使用方法及差別。

在 JS 中我們是利用 if(condition){statement1}else{statement2} 來設定條件並決定執行哪一段陳述式(statement)，如果 condition 為 truthy 就執行 statement1 ，否則就執行 statement2 。

很多時候我們會利用 class 來切換樣式，這時候其實就可以利用 Vue 的指令 v-bind 來動態切換 class 。

之前也都沒使用過 watch ，所以趁這個機會好好了解一下它。

在講計算(computed)之前，先來說說 Vue 自己擁有的屬性 $data：
以[DAY02]跟 Vue.js 認識的30天 - Vue 的模板語法(Template Syntax)為例，當我們輸入 console.log(vm) 時(vm就是所創建出來的 Vue 實例)，會顯示出 vm 所包含的屬性及方法。
特別的是， Vue 會將我們所設定的 data 展開來，作為 Vue 的屬性，也因此我們可以直接使用 {{ msg }} 來讀取資料，而不是 {{ data.msg }} 。

學了 VueJS 一段時間，總是會不定期的回頭看下面這張圖：

其實早在8月就有想過要參加這一次IT鐵人幫，但是那時候還深陷在六角學院「 JS 作品直播班 」的作業泥淖中，也一直不確定自己的主題要訂甚麼，後來才決定寫 Vue 的筆記，畢竟剛在六角學院學完，也一併趁這個機會來加深自己對 Vue 的了解。

這一次針對 Vue 的筆記，內容除了是從六角學院學習到的外，還有就是就是 Alex 宅幹嘛的[ 想入門，我陪你 ] Re Vue 重頭說起系列，很喜歡 Alex大大帶著我們一起看一遍 Vue 的文件說明，這也啟發我這次筆記的寫法，大概也會跟Alex大大學習，從 Vue 的文件說明來撰寫這次的IT鐵人邦文章。