# 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 資料的雙向綁定?
當表單元素的 value 被更新的時候，Vue.js 就會直接反映至實體對應的狀態。 這樣就叫資料的「雙向綁定」。
# 請解釋 vue 口訣 「props in event out」 的意義?
父層資料透過 props 傳入子層，而子層透過 event 來觸發父層狀態的更新。
# 什麼是元件的編譯作用域?
元件内的資料能作用到的範圍區域。父元件的内容是在父元件作用域内編譯， 子元件的内容是在子元件的作用域内編譯
# 請問 vue 中，如何做透明色的漸變動畫

<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的重要核心之一的原件之間的聯繫又有更進一步的認識，希望在實作上也能愈做愈順手。