Vue 元件化概念

Vue 元件化概念 筆記

  1. 使用元件化切出複雜頁面
  2. 使用vue-router 做耊面
  3. 使用 vuex（資料中心）統一狀態更動
    Alt text

元件化

  • App.vue是大元件
  • 什麼是元件化？
  • 將網頁依照頁面、功能拆分
  • 小至一個按鈕、大到整個頁面或程式
  • Single File Component

    Vue 元件化概念

  • 新增 / 使用元件
  • 傳遞屬性 props
  • 釋放事件 $emit
  • 元件重用控制 :key

新增 / 使用元件

每個元件都有自己的 data / computed / methods
data需要是回傳資料的函數（非物件）

1
2
3
4
5
6
7
8
Vue.component('post', {
	template:: {
		...
	},
	data(){
		...
	}
})

傳遞屬性 props

Vue Props Document
使用 v-bind:屬性 或 :屬性，傳值給元件

1
<component v-bind:value='10' :post=post><component>

元件收到值後，會當成內部資料使用
1
2
3
4
5
6
7
8
9
10
data: {
	props: ['propname'],
	data: {...}
}
或是
data: {
	props: {
		title: String
	}
}

propD: {
dafault: 100
}

釋放事件 $emit

1
2
3
<component @save='...'><component>

this.$emit('save', somedata)

釋出 save事件，並釋出一些 data
在元件的外面儲存，收到卡片@save的事件，事件save後，卡片資料放上去。

重用控制 :key

1
<component @key='...'><component>

根據 key 有沒有改變，控制資料是否要變更。

比如說控制卡片列表是否要重新渲染，是否要重新產生方塊
Alt text

雜學校的每個文章：卡片每個都有獨立的key，如果規則不同（標題不同），則重新產生卡片。
使用時機：文章建立、頁面建立時

初始化專案

  • pug
  • pug-loader
  • pug-filters
  • sass

    安裝 Pug、Sass 套件

    1
    2
    npm install pug pug-loader pug-filters --save
    npm install sass sass-loader node-sass --save
  • 指定開發語言
    1
    2
    <template lang='pug'></template>
    <style lang='sass'></style>
  • 建立專案環境，專案名稱：vuecomp，採用webpack-simple樣板
    1
    2
    3
    4
    vue init webpack-simple vuecomp
    cd vuecomp
    npm install //安裝相依性的套件
    npm run dev // hot load方式開啟本機環境：localhost:8080
    data不是 object，是函數喔