# Vue作品實戰班
---
tags: Vue 實戰班
---
## 主課程
### 元件建立
- 為什麼需要元件?
1. 避免單一個檔案過大
2. 很多地方會用到的部分可以拉出來做重複使用，方便管理
3. 元件的大小可依據範疇分類 views(整頁)/components(單一小區塊)
- 定義方式有什麼?

1. 全域元件
在整個Vue內其他元件都可以使用。可重複使用。

     Vue.component('元件名稱',{
       template: `html內容`
     })

     <div id='元件名稱'></div>

2. 區域元件
- 在任何元件下
- 在 #app 下也可以
- 只有當前註冊元件內才可以使用

     var app = new Vue({
       components: {
         元件名稱:{
           template: `html內容`,
         }
       }
     })
     

- 元件模板應用方式
1. Template Literial

     template: `html內容`

2.🌟 x-template

     <script type="text/x-template" id="元件模板id">
       html內容
     </script>

- template: 中的程式碼可以拉出來，用 id 綁定，優點：可以把 html 結構拉出來



     Vue.component('元件名稱',{
       template: '#元件模板id'
     })

     //完整範例
     //HTML
     <card></card>
     <div is="card"></div>  
     //下一行的寫法，意思同上一行，但兩個 data 是獨立的
     
     //javascript
     <script type="text/x-template" id="forCard">
       <div class="card" style="width: 18rem;">
        <div class="card-body">
          <h5 class="card-title">{{ text }}</h5>
        </div>
       </div>
     </script>
     
     Vue.component('card',{
       template: '#forCard'
     })

3. vue file
共通重點:
> 元件下的模板最外層不可以有兩個節點(html element tag)
>
- 元件內 data 必須**使用 function 去傳送**

     Vue.component('card',{
       template: '#forCard',
       
       //✨內層所有的 data 都必須使用 function return
       data: function(){
         return{
           text: '這裡有一句話',
         }
       }
       
       //以下為縮寫
       data(){
         return{
           text: '這裡有一句話',
         }
       }
     })

- import 的方式

     //開一個 card.js 檔，寫入
     export default{
       template: '#forCard',
       data: function(){
         return{
           text: '這裡有一句話',
         }
       }
     }
     
     //然後回 html 下的 script 區塊
     import card2 from './card.js';
     
     // body 內寫如下即可
     <card2></card2>
     

- 呼叫 component 的2種方式

// 自定義標籤
<card></card>

// html 標籤
<div is="card"></div>

- 元件重點
- template
- data

- 雷點

     //不能在外層暴露結構，也就是必須要有 div 包著 h5，否則會報錯
     <script type="text/x-template" id="forCard">
       <div>
         <h5 class="card-title">{{ text }}</h5>
         <h5 class="card-title">{{ text2 }}</h5>
       </div>
     </script>

- script type="module"
> ES module 可以匯入外部檔案。參考第二週的影片

### 🛠 學習方法
- 看過一次
- 動手做一次，並且寫成筆記
- 分享給其他人

### 元件資料傳遞
#### props是什麼?
- props是以資料形式，將資料由外層元件往內層元件傳遞
- 如果由內層元件到外層元件的資料傳遞，是以事件的形式傳遞資料($emit事件)
- 如果是同一層級的元件對元件，也是以事件的形式傳遞資料(\$on+$emit)

<div id='app'>
<!--前面是名稱 後面是值-->
  <card outer='123'></card>
</div>



- 把 outer 傳進來，再賦予到 src 上面
- 把外部 img 傳到 outer 上的綁定方法，`:outer="img"`

- props有什麼限制?
1.一旦傳入內層元件，內層元件不可以更改它的值(單向數據流)
- 如果必須使用props的值，又需要更改，可以透過 created 存到 data 變數內

2. ~~首字一定要小寫，用大寫沒有用；但可以使用小寫駝峰命名法~~
查詢錄播 [第四週直播 - 下錄播14:57左右](https://courses.hexschool.com/courses/924133/lectures/22412010)
根據Vue官方文件的說明，如果不是使用Template Literial的方式撰寫Template時，props在html的attr上必須依循其不區分大小寫的限制(全部都會被當成小寫)，不可使用camel-case(小寫駝峰)。
如果希望js環境內接值時，可以使用camel-case來接收，則html上的props attr必須使用kebab-case，如以下範例:

  	<mycomponent :product-list="something"></mycomponent>

  	Vue.component('mycomponent', {
    	template: '#mycomponentTemplate',
    	props: ['productList'],
    	data() {
        	return {}
    	},
    	created() {
        	console.log(this.productList) // something
    	},
  	})



[Ref. Vue.js Prop章節](https://cn.vuejs.org/v2/guide/components-props.html)
或是參考 [vue 官方 style guide](https://vuejs.org/v2/style-guide/#Prop-name-casing-strongly-recommended)

---

- $emit事件是什麼?

外到內是資料。內到外是事件

\$emit是以事件形式將資料由內層元件往外層元件推送傳遞。
內層元件使用$emit推到外層元件由事件接收

     // 外層元件
     // emit 推，外 methods 接收
     // 心法口訣: 前內(emit)，後外(method)
     <card @pushsomething='getData'></card>
     // 內層元件
     methods:{
       update(){
         this.$emit('pushsomething', this.text)
        }
      }

**內層**

**外層**

需要注意的是，不同於元件和 props，$emit 不存在任何大小寫轉換，所以觸發的事件名稱，需要完全符合監聽這個事件所用的名稱。舉個例子，如果想觸發一個 camelCase (小駝峰) 名字的事件:

     methods: {
       update() {
         this.$emit('myEvent') 
         // html 'E'會視為'e'讓 JS 讀不到, 可改用 myevent、my-event or my_event
		   }
		 }
		

則監聽這個名字的 kebab-case 版本是不會有任何效果的

	<!-- 没有效果 無效! -->
	<card @my-event="doSomething"></card>

不像元件和 props，事件名稱不會被用來當作一個 JS 的變數或 property 名稱，所以不需要使用駝峰式命名
[Ref. Vue.js $emit/自訂事件](https://cn.vuejs.org/v2/guide/components-custom-events.html)

- eventbus是什麼?
1. eventbus 是跨元件傳遞。
2. 利用bus的實體，以事件對事件的形式(完全不需要html屬性，只需要在\$emit和$on使用相同事件名稱即可)，在同層級的元件傳遞資料

     // 在外層先新增一個Vue實體
     Vue.prototype.$bus = new Vue();
     
     // card 1 (推資料)
     Vue.component('card1',{
       template:`<div @click='updateData'>{{text}}</div>`,
       data(){
         return {
           text: 'card1的資料'
        } 
       },
       method(){
         updateData(){
           this.$bus.$emit('updateCard2', this.text)
         }
       } 
     })
     
     // card 2 (收資料)
     Vue.component('card2',{
       template:`<div>{{anotherData}}</div>`,
       data(){
         return {
           anotherData: '還未修改的資料'
        } 
       },
       created(){
         // 接收
         this.$bus.$on('updateCard2',function(para){
             console.log('接收到的事件', para);
         })
         //如果想變更 this.anotherData 可以將函式改為箭頭函式
         this.$bus.$on('updateCard2', para => {
           console.log('接收到的事件', para)
           this.anotherData = para
         }) 
         //updateCard2 為自訂名稱
         //$bus 的缺點：很難除錯
       }
     })

由於eventbus使用相同名稱的事件名稱來傳遞，如果是在畫面上會重複出現的元件，就不建議使用這個方式做資料傳遞(有同樣接收器，無法區分是要傳遞給哪一個元件的資料)，容易出錯。
使用時機：適合一對一的元件

### 元件生命週期
- 生命週期是什麼?
- 元件從建立到移除的過程。
- 如果想維持住生命週期，不希望元件重新循環生命週期，可使用`<keep-alive>`標籤包住
- 搭配 v-if 的問題 `<keep-alive>`
- 只有 v-if, v-for 才會觸發生命週期的事件， v-show 不會，v-show 是使用 display: none
- jQuery 為什麼會抓不到元素，mounted 後才抓得到元素
- 哪個重要:
1. created
- 資料建立之後
- 適合處理資料
2. mounted
- 元件渲染出html之後
- 適合處理 DOM

### 主線任務相關
1. 這禮拜一定要看影片才能順利做任務
2. 任務的登入驗證不用給帳號密碼

### 遇到困難的話...
#### 如果有以下情況
1. 看範例作品都會寫,蓋起來就不會
2. 老師直播時都懂,但要自己運用就卡卡的
3. 寫完作業好像失憶一般,再寫一次也不一定有把握

#### 請練習以下兩種方式
1. 寫自己的筆記
寫一次撰寫程式時,搭配筆記做紀錄
第二次撰寫的時候,只能看筆記
2. 練習拆解٩(ˊωˋ*)و✧

### 自閉合组件
- [HTML 并不支持自闭合的自定义元素](https://cn.vuejs.org/v2/style-guide/#%E8%87%AA%E9%97%AD%E5%90%88%E7%BB%84%E4%BB%B6%E5%BC%BA%E7%83%88%E6%8E%A8%E8%8D%90)