# Vue.js 筆記與心得報告 第二章
# 筆記

* ### vue 使用的元件，相較於傳統方法的優點是什麼?
他提供了HTML DOM元素的擴充性，也可將部分模板，程式碼封裝起來以便開發者維護以及重複使用。每一個被封裝後的元件單元，都含有自己的模板、樣式，與行為邏輯，並且可以被重複使用。

* ### 請介紹 vue 常見的四種元件類型?

1. ### 展示型元件
以負責呈現UI為主的類型，我們很單純地把資料傳遞進去，然後DOM就根據我們丟進去的資料生成出來。這個好處就是可以提升UI的重複使用性。

2. ### 容器型元件
這類型的元件主要負責與資料層的service溝通，包括了與server端，資料來源做溝通的邏輯，然後再將資料傳遞給前面所說的展示型元件。

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

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

* ### 檔案 .vue 的用途是什麼? 怎麼使用？
將某個元件以.vue檔案的方式包裝起來，再透過import的方式將這個檔案引入作為子元件，這個.vue檔案通常我們將他稱為Vue的單一元件檔。它的模板、樣式以及邏輯應該要是高度耦合的，這樣可以讓元件變得更易於管理，並提高可維護性。

* ### props 屬性的用途是什麼?
可以根據「外部」傳入的資料來反映出不同的結果。如果要從外部引進資料時，透過 props 屬性來引用外部的狀態。

* ### 請解釋 vue.js 資料的雙向綁定?
v-model會針對Vue實體內的狀態與書面上表單元素進行綁定，當表單元素的 value 被更新的時候，Vue.js 就會直接反映至實體對應的狀態。這樣子的作用就是雙向綁定。

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

* ### 什麼是元件的編譯作用域?
如同多數程式語言都有變數作用範圍（scope）的概念，編譯作用域可以將他想像成是「元件的scope」。

* ### 請問 vue 中，如何做透明色的漸變動畫？
將要執行過場動畫的元素/元件，透過 <transition> 包覆起來即可：

<transition>
  <!-- 透過 v-show 來控制顯示或隱藏 -->
  <div class="block" v-show="isShow">HELLO VUE</div>
</transition>

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

const app = Vue.createApp({
  data() {
    return {
      isShow: true
    }
  }
}).mount('#app');

接著,我們需要在 CSS 定義它的過場漸變的樣式，這裡以 opacity 為例：

.v-enter-active,
.v-leave-active {
  transition: opacity 1s;
}

.v-enter-from,
.v-leave-to {
  opacity: 0;
}

.v-enter-to,
.v-leave-from {
  opacity: 1;
}

# 心得
通過這次作業我加深了vue功能的理解，比如說重複使用、讓元件變得更易於管理，並提高可維護性等等。還有用<transition>做透明色的漸變動畫的部分對我來說很有趣的。以後也要繼續學習vue的基礎然後想獲得新的知識。