今天還是一樣不太想開始寫Code，不想面對接下來的26天，三十天是很漫長的一個月...

在網路上可以找到許多的文章在介紹Vue，Vue的發音跟View一樣，簡單的來說就是負責MVC裡面很重要的一環 ─ View。作者是一名中國人，所以在官方網站上面的文件中有中文，對我們這種英文學的不是很好的人來說是一大福音阿！
Vuejs在進幾年中的表現不輸給React與Angular，在Vue官方文件中也有與其它Framework的比較資料(Comparison with Other Frameworks)，在Google搜尋幾個關鍵字就有許多的比較跟分析，還有統計資料，選擇Vue的開發人員，大多數的原因都會是「Easy To Pick Up」，容易上手、簡單等等的原因，對於開發中小型網站來說，它的確容易維護，當然您要用來架設大型網站也是可以的，它們也提供許多的應用套件，像是VueRouter、Nuxtjs...等等，來幫助您架設大型網站。
上網搜尋：react angular vue

因為網路上的教學以及範例實在太多了，我就挑了幾個我覺得很棒的特色來跟大家分享

Data Binding

用一個簡單的範例來做說明，我們在html中輸出一段文字，但這個文字希望可以不要寫死在html上面，當然你可以很值接透過DOM(Document Object Model 文件物件模型)，去append資料或其他方式，但如果你直接透過Vue的話，它會將一個Instance(實例)，透過html去綁定這個element，將我們的行為或是資料實現在上面。

<div id="hello">
  {{ saySomething }}
</div>

new Vue({
  el: '#hello',
  data: {
    saySomething: 'How are you?'
  }
})

輸出

How are you?

我們在做更進一步的練習

透過TextBox來輸入我們要的文字

<div id="hello">
  <input type="text" v-model="saySomething">
  {{ saySomething }}
</div>

js保持一樣的語法

new Vue({
  el: '#hello',
  data: {
    saySomething: 'How are you?'
  }
})

輸出

我自己下了一個結論，Vue的data Binding 應該是最直覺的操作，與最容易懂的語法

VueComponent

Components are one of the most powerful features of Vue.

在官方文件上面的第一句介紹Vue Component(元件)，Components 是Vue最強大的特色之一，能將HTML、JS、CSS打包成一個元件來使用，這可降低程式碼的重複性，舉一個例子，在我的網站下希望每個header 中都需要 Login跟Logout的按鈕，一般來說我們可能要在每一頁加上相同的程式碼，但這個動作會使我們的程式碼難以維護，假設未來需要一個search bar，那我們不就要在每一個頁面中加入呢？下面透過一個Vue Component來做示範。

HTML

<div id="page-head">
  <top-bar></top-bar>
</div>

Javascript

// 註冊一個Vue Component
Vue.component('top-bar', {
  template: '<div><input type="button" value="登入"><input type="button" value="登出"></div>'
})

// 建立一個實例
new Vue({
  el: '#page-head'
})

輸出

我們可以在頁面上看到登入跟登出的按鈕在上面，但實際打開source code(在頁面上點選右鍵->檢視原始碼或點選鍵盤F12)，會發現Vue Component並不是一個Web Component，而是將註冊過的Vue Component編譯成一般的HTML，有興趣研究Web Component跟Vue Component的可以上網找找喔！

你可以了解更多Vue component：(https://vuejs.org/v2/guide/components.html)
你可以了解更多Web component：(https://developer.mozilla.org/en-US/docs/Web/Web_Components)