主要 Vue 實體 (Instance)

建立組件

vue 官方所建議的組件撰寫方式就是將 HTML、JavaScript 及 CSS 寫在一個副檔名為 vue 的檔案中，各自以 Template、Script 及 Style 標籤區隔，以下針對各項目進行介紹。

script

會在這邊建立 vue 實體並 export 出去外部，而在建立 vue 實體的時候可以定義資料、屬性、方法及生命週期觸發事件行為，這些都可以幫助開發人員更靈巧地操作組件。

• data : 定義組件資料 (在此建立了 birthYear 數字型態變數)
• computed : 計算屬性，可以設計 getter / setting 來操作特定資料
• watch : 監聽特定資料 / 計算屬性的變動，可獲得修改前後數值
• method : 自定義方法供此組件使用
• components : 若有包含其他子組件，可以利用此方法加入組件
• 其他還有與 instance 生命週期相關 Hook 例如 mounted、updated.. 等可使用

template

這個區塊就是放置組件需要呈現在畫面上的 HTML 元素，其中 Vue 提供了一些如同 angular 1 預設的 directive 可以操作 (ex. v-if, v-show, v-for... )

v-bind:prop (簡寫為 :prop)

單向綁定子組件之特定 props 資料，在此使用 v-bind:value 表示單向綁定 input 元素 props 中的 value 資料 (可簡寫為 :value )，而傳遞進去的資料為 age。

v-model

雙向綁定子組件名為 value 的 props 資料，在此表示雙向綁定 input 元素 props 中的 value 資料 ，而傳遞進去的資料為 age。說穿了 v-model 也只是語法糖而已，他會透過 v-bind:value + v-on:input 兩種 directive 自動實作出 2 way binding 的效果；也就表示如果自己建立的組件如果想要具有 v-model 的效果，可以自行建立 props 的 value 資料，並且監聽到 value 異動就 emit input 事件並傳遞新 value 值到父組件即可，而父組件因為設置 v-model 的關係會自動在收到 input 事件後自行更新資料，達到雙向綁定效果。

如果要自行實現雙向綁定也是可以，就是透過 v-bind 與 v-on 進行實現，但最大差別就是父祖件還需要在 v-on 中自行更新該值，才可達到雙向綁定效果喔！

v-on:event (簡寫為 @event)

監聽特定事件，在此使用 v-on:click 表示當 button 元素被觸發 click 事件後，會 emit 該事件通知父組件並執行 showStatus 方法。

style

支援 CSS / SCSS / Stylus 等 Style 語法，可以透過 lang 標籤設置；其中若希望此 style 只在組件中作用，可以加上 scoped 來進行限制。

檢視結果

透過 v-bind 綁定的 input 在變動資料的時候是不會影響父層資料 (單向綁定)

透過 v-model 綁定的 input 在變動資料的時候是會影響父層資料 (雙向綁定)，並且由於我們透過 watch 監看 birthYear 數值變動，如果有異動會透過 toastr 輸出前後修改值