# chapter 2 | Vue.js 的元件系統
## 1. vue 使用的元件，相較於傳統方法的優點是什麼?
每一個被封裝後的元件單元，都含有自己的模板、樣式，與行為邏輯，並且可以被重複使用。 而在元件之中又可以含有元件，這樣由一個個元件單元組合而成的「元件樹」。
## 2. 請介紹 vue 常見的四種元件類型?

### 展示型元件 (Presentation)
負責呈現 UI 為主，提升 UI 的重複使用性

### 容器型元件 (Container)
責與資料層的 service 溝通

### 互動型元件 (Interactive)
通常會包含許多的互動邏輯在裡面，但也與展示型元件同樣強調重複使用。

### 功能型元件 (Functions)
身不渲染任何内容，主要負責將元件內容作為某種應用的延伸，或是某種機制的封裝。

## 3. 檔案 .vue 的用途是什麼? 怎麼使用？
將某個元件以 ```.vue``` 檔案的方式包裝起來，再透過 ```import``` 的方式將這個檔案引入作為子元件， 這個 ```.vue``` 檔案通常我們將它稱為 Vue 的單一元件檔 (Single File Components, SFC)。

在這個元件中，它的模板、樣式以及邏輯應該要是高度耦合的，可以讓元件變得更易於管理，並提高可維護性。

## 4. props 屬性的用途是什麼?
上下層元件之間，若需要從外部引進資料時，就需要透過 ```props``` 屬性來引用外部的狀態。

## 5. 請解釋 vue.js 資料的雙向綁定?

## 6. 請解釋 vue 口訣 「props in event out」 的意義?
父層資料透過 ```props``` 傳入子層，而子層透過 ```event``` 來觸發父層狀態的更新。


## 7. 什麼是元件的編譯作用域?
如同多數程式語言都有變數作用範圍 (scope) 的概念，編譯作用域可以將它想像成是「元件的 scope」。以底下的程式做範例 (出自本書) :

<div id="app">
<h1>{{ msg }}</h1>

<custom-component>
<!-- 大多數情況下，這裡放任何內容都是無意義的 -->
{{ msg }}
</custom-component>
</div>

component的msg會被外層的msg覆蓋掉

## 8. 請問 vue 中，如何做透明色的漸變動畫？

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

<div class="mode">
<label><input v-model="mode" type="radio" value="in-out"> in-out</label>
<label><input v-model="mode" type="radio" value="out-in"> out-in</label>
</div>

<div>
<transition name="fade" :mode="mode">
<div class="block" v-if="isShow">Block 1</div> <div class="block" v-else>Block 2</div>
</transition>
</div>

</div>

# -----------------------------------------

## 心得
雖然還不夠成熟，但每一次的學習使我成長。我不僅了解與學會如何處理元件之間的互動、管理和編譯，還知曉了如何讓他們活起來。