## Vue.js Chapter 2

1. Vue 將部分模板、程式碼封裝起來以便開發者維護以及重複使用
2. 展示型元件、容器型元件、互動型元件、功能型元件
3.

1. 將某個元件以 .vue 檔案的方式包裝起來，就能透過 import 的方式將這個檔案引入作為子元件
2. import XXX from "./XXX.vue"
4. 傳遞資訊給子元件
5. 把畫面上的DOM 與資料透過Vue 實體來綁定
6. 請見心得 2-2
7. 如同多數程式語言都有變數作用範圍 (scope) 的概念，編譯作用域可以將它想像成是「元件的 scope」
8.
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> 

CSS

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-from, .v-leave-to {
  opacity: 0;
}

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

JS

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

app.mount('#app');

## Vue.js 筆記與心得報告

### 2-1

2-1 中，作者先是列出了各個元件的功能、目的，依這些目的分為了 5 種元件的分類。這些分類讓我受益良多，因為每次遇到一個新的需求時，雖然我會下意識地嘗試抽象化這些需求，並嘗試抽離出可重複複用的地方並依此開發一個新的元件，但是找到正確可切分的地方卻是一件需要大量經驗的考驗，因此，作者列出來的這些元件分類，讓我有了往後切分需求的方向，例如，如果我的需求是要實作一個擁有時尚、富有動畫的網站，我可能就會希望某些字可以在渲染時，就不斷地在原地漂浮，這樣我就知道說我需要的，是一個展示型元件，我因此清楚了這個元件的職責所在，因此不會給他過多的、不屬於他的職責，相當受益良多。

### 2-2

2-2 中，作者清楚講述了單向資料流的概念，也提到了我第一次聽過的詞：props in, event out，這才讓我想起來了以往在使用第三方的元件時，例如 coreUI，最常用到 event 的便是表單，可以藉由一些事件的觸發，得知目前元件的狀態、所帶的資料，如果沒有這一句話，我不會去意識到這個特性，這對我往後開發網頁的思考方式有了很大的改善。

### 2-4

2-4 中，作者講述了 slot 的概念，而這個概念我以前看了很久才知道它的使用方式，我覺得很大的原因是沒有圖形化的講解，然而這個作者做到了這件事，清出的說明了每個 slot 的對應方式，讓我非常後悔沒有早點看到這篇文章。