# vue 使用的元件，相較於傳統方法的優點是什麼?
過去網頁的結構都是把所有的東西通通往 HTML 頁面塞， 導致如果以後需要維護網頁的時候會非常困難和繁瑣，vue則是把網頁中不同的部件或功能拆分成不同的小封裝，每一個被封裝後的元件單元，都含有自己的模板、樣式，與行為邏輯，並且可以被重複使用。 而在元件之中又可以含有元件，這樣由一個個元件單元組合而成的「元件樹」，這樣以後就算一個功能出問題了，其他功能不會受到很大的影響。
# 請介紹 vue 常見的四種元件類型?
展示型元件 (Presentation)
負責呈現UI為主的類型，把資料傳遞進去，然後DOM就根據丟進去的資料生成出來，優點是可以提升UI的重複使用性。
容器型元件 (Container) ：
負責與資料層的 service 溝通
互動型元件 (Interactive)
通常會包含許多的互動邏輯在裡面，但也與展示型元件同樣強調重複使用。 像是表單、燈箱等各種互動元素。
功能型元件 (Functions)
元件本身不渲染任何内容，主要負責將元件內容作為某種應用的延伸，或是某種機制的封裝。
# 檔案 .vue 的用途是什麼? 怎麼使用？
vue 檔案為 Vue 的單一元件檔，通常會包含三個部分，分別是作為 HTML 模板的 template 、用來定義元件結構與邏輯的 script 以及 CSS 樣式的 style 標籤。
一個元件就是一個 .vue 檔案。 在這個元件中，它的模板、樣式以及邏輯應該要是高度耦合的，這樣可以讓元件變得更易於管理，並提高可維護性。
# props 屬性的用途是什麼?
當切分元件時，希望能夠重複利用這個元件，可以根據「外部」傳入的資料來反映出不同的結果。既然不能直接取用，上下層元件之間，若需要從外部引進資料時，就需要透過 props 屬性來引用外部的狀態。
# 請解釋 vue.js 資料的雙向綁定?
v-model 會針對 Vue 實體內的狀態與畫面上表單元素進行綁定，當表單元素的 value 被更新的時候，Vue.js 就會直接反映至實體對應的狀態。
# 請解釋 vue 口訣 「props in event out」 的意義?
父層資料透過 props 傳入子層，而子層透過 event 來觸發父層狀態的更新。
# 什麼是元件的編譯作用域?
如同多數程式語言都有變數作用範圍 (scope) 的概念，編譯作用域可以將它想像成是「元件的 scope」
# 請問 vue 中，如何做透明色的漸變動畫
html

<div id="app">
  <div style="height: 120px;">
    <transition>
      <!-- 這裡透過 v-show 來控制顯示或隱藏 -->
      <div class="block" v-show="isShow">HELLO VUE</div>
    </transition>
  </div>

  <button @click="isShow =! isShow">Toggle</button>
</div> 

# 心得
這篇文章讓我對vue的元件有更進一步的了解，希望在未來實作上能有所幫助。