iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 8
0
Modern Web

網頁設計靠 Vue.js 轉前端系列 第 8

Vue[08]-Components

還記得一開始提過的component觀念嗎?我們把會重復使用的網頁結構寫成一個元件,需要時就引用它,這麼做不但能減少不必要的重工,還能讓維護更加方便有效率!現在就來說明一下該怎麼寫吧!

Component範例實做

在資料夾src底下,其實vue已經幫我們建好一個components資料夾了,裡面放了一個HelloWorld.vue的範例檔,我們另外在旁邊新增一個吧,我就做一張card來示範好了!
對著components頁籤按下右鍵新增一個vue檔,取名Card.vue,或是偷懶一點直接復製「HelloWorld.vue範例檔」,再刪掉內容,留下基本的標籤如下:

<template>
  <div class="card">
    
  </div>
</template>

<script>
    export default {

    }
</script>

<style scoped></style>
  • <template>是寫html的地方,記得內容必需用一個標籤包住所有內容,我是用<div class="card">包起。
  • <script>是寫vue程式的地方。
  • <style scoped>是寫css的地方,scoped指的是這個<style>裡的內容,只限這個card component用,它不會變成全域而發生css衝突。

接下來我寫一個陽春的內容樣式當範例就好!

<template>
  <div class="card">
    <div class="card_title">
        卡片標題
    </div>
    <div class="card_body">
        卡片內容
    </div>
  </div>
</template>

<script>
export default {
  
}
</script>

<style scoped>
    .card {
        width: 300px;
        margin: 10px;
        background: white;
        border: 1px solid #cccccc;
        border-radius: 6px;
        box-shadow: 0 0 4px 0 rgba(0,0,0,0.2);
    }
    .card_title {
        padding: 16px;
        border-bottom: 1px solid #cccccc;
        color: black;
        font-size: 20px;
        line-height: 26px;
        font-weight: bold;
    }
    .card_body {
        padding: 16px;
        color: #555555;
        font-size: 16px;
        line-height: 22px;
    }
</style>

引用Component實做

目前都使用基本的css而已,相信對一般網頁設計師而言非常容易的,那我就不對css多做說明了!
現在做好component,我們就要來引用它了!接著換到首頁App.vue寫入以下內容(為了避免影響閱讀,我先移掉了前幾天的範例內容):

<template>
  <div id="app">
    <Card />
  </div>
</template>

<script>
  import Card from './components/Card'
  
  export default {
    components: {
      Card
    }
  }
</script>

引用Component範例解說

  1. <Card />標籤放在<template>裡你需要用的地方。
  2. <script>寫入import Card from './components/Card'跟它說我要引用哪個component,位置在哪。
  3. export default底下加入:
components: {
  Card
}

代表我要使用它。

完成以上簡單三步驟你就能輕鬆使用component了!
聰明的你一定會想到內容如果都不同呢?不可能寫死在component裡吧?這樣怎麼共用它?剛剛只是示範用而已,所以我放了假字進去,要讓component能共用,內容就要用資料綁進去才行,要多張卡片只需要用v-for寫就行了!

那該怎麼綁?它一定不是寫在component的data裡,每頁需要的內容可能不同!因此component在邏輯上是屬於接收資料的那一方,而不是存放資料,我們可將資料寫在頁面的data,依照頁面需要的內容傳資料給component,那該怎麼傳進去?component又該怎麼接收它?這就要講到重要的props啦!明天我們就專門來看資料的傳遞!


上一篇
Vue[07]-陣列v-for
下一篇
Vue[09]-Props接收資料
系列文
網頁設計靠 Vue.js 轉前端30

尚未有邦友留言

立即登入留言