# Vue筆記 #2
### vue 使用的元件，相較於傳統方法的優點是什麼?
* 早期傳統網頁的結構都是把所有的東西通通往 HTML 頁面塞， 導致如果以後需要維護網頁的時候會非常困難和繁瑣。
* vue則是把網頁中不同的部件或功能拆分成不同的小封裝，每一個被封裝後的元件單元，都含有自己的模板、樣式，與行為邏輯，並且可以被重複使用。 而在元件之中又可以含有元件，這樣由一個個元件單元組合而成的「元件樹」。
* 這樣的好處是以後就算一個功能出問題了，其他功能不會受到很大的影響，而維修的時候更容易找到bug。

### 請介紹 vue 常見的四種元件類型?
#### 展示型元件 (Presentation)
* 以負責呈現 UI 為主的類型，我們很單純地把資料傳遞進去，然後 DOM 就根據我們丟進去的資料生成出來。 這種元件的好處是可以提升 UI 的重複使用性。
#### 容器型元件 (Container)
* 這類型的元件主要負責與資料層的 service 溝通，包含了與 server 端、資料來源做溝通的邏輯， 然後再將資料傳遞給前面所說的展示型元件。
#### 互動型元件 (Interactive)
* 像是大家所熟知的 elementUI、bootstrap 的 UI library 都屬於此種類型。 這種類型的元件通常會包含許多的互動邏輯在裡面，但也與展示型元件同樣強調重複使用。 像是表單、燈箱等各種互動元素都算在這類型。
#### 功能型元件 (Functions)
* 這類型的元件本身不渲染任何内容，主要負責將元件內容作為某種應用的延伸，或是某種機制的封裝。 像是我們未來會提及的 ``<transition>`` 、 ``<router-view>`` 等都屬於此類型

### 檔案 `.vue` 的用途是什麼? 怎麼使用？
* 元件會以 `.vue` 檔案的方式包裝起來，再透過 `import` 的方式將這個檔案引入作為子元件。通常將它稱為 Vue 的單一元件檔 (Single File Components, 以下稱 SFC)。
* 由於 SFC 的 `.vue` 檔案並非網頁標準， 在使用時通常需透過 `vue-loader` 或 `@vue/compiler-sfc` 搭配 webpack 等工具先將 SFC 編譯成瀏覽器看得懂的 JavaScript 程式碼後才能夠被執行。

### props 屬性的用途是什麼?
* props 中的数据只能以一种方式流动——从顶部或父组件到底部或子组件。这意味着不能将数据从子级传递给父级。
* props 是只读的，不能由子组件修改，因为父组件“拥有”该值。

### 請解釋 `vue.js` 資料的雙向綁定?
* `v-model` 會針對 Vue 實體內的狀態 (data) 與畫面上表單元素 (如 `input` 等) 進行綁定， 當表單元素的 `value` 被更新的時候，Vue.js 就會直接反映至實體對應的狀態。

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

### 什麼是元件的編譯作用域?
* 元件内的資料能作用到的範圍區域。
* 父元件的内容是在父元件作用域内編譯， 子元件的内容是在子元件的作用域内編譯

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

<div id="app">
  <div style="height: 120px;">
    <transition>
      <div class="block" v-show="isShow">HELLO VUE</div>
    </transition>
  </div>
  <button @click="isShow =! isShow">Toggle</button>
</div>

#app {
    position: relative;
    display: block;
    padding: 1rem;
    font-size: 1rem;    
}

button {
    font-size: 1rem;
}

.block {
    display: block;
    width: 150px;
    height: 100px;
    text-align: center;
    line-height: 100px;
    background-color: #0f0;
}

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

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

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

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

app.mount('#app');

### 心得
學到了一些有關於vue元件相關的知識，其中比較有興趣的是transition的漸變動畫，蠻有趣的。