iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 11
0
Modern Web

30天手把手的vue.js教學!系列 第 11

2020it邦鐵人賽-30天手把手的Vue.js教學 Day11 - 認識Vue Components

tags: Vue.js ItIron2020

前言

昨天我們介紹了Vue生命週期的概念,那是個有些抽象難懂的概念,坦白說我那篇文章下方的參考文章都寫得比我清楚得多:D 我只是根據我個人的理解做了最基本的整理,希望多少能對你們有些幫助! 而今天我們要介紹的是另一個重要的概念,
Vue Components,組件化是Vue & React的特色之一,藉由組件化可以讓程式碼管理更加容易,不過其中自然也有一些眉角是你要注意的! 我們馬上就開始今天的進度吧!

什麼是Vue component?

Vue提供了組件化的概念讓你的網站有著更好的結構方便管理,每一個Vue組件其實就是一個Vue實體,其中自然包含著

  • markup template(HTML)
  • logic (JS)
  • style (CSS)

同時你之前學到的所有屬性也可以在組件中使用

  • data
  • methods
  • computed
  • watch
  • ...etc

vue組件的用意都在於藉由組件內的自我管理,讓後續的管理更加輕鬆(你只要處理對應組件中的程式碼),如果你覺得這樣很複雜,那就先這樣記著

Vue組件就是有名字的Vue實體

好喔 然後呢?

我總是認為有例子會更好了解,我們看一下今天的範例,是一個簡單的todo list,首先請打開這個demo

start

<template>
  <div id="app">
    <h1>My Todo List</h1>
    <div :class="[todos[0].isComplete ? 'success' : 'error', 'todo-wrapper']">
      <div class="todo-title">
        {{ todos[0].title }}
      </div>
      <div class="todo-icons">
        <i class="fa fa-check" aria-hidden="true"></i>
        <i class="fa fa-trash-alt" aria-hidden="true"></i>
      </div>
    </div>
  </div>
</template>

<script>
const todos = [
  {
    title: "Get dressed",
    isComplete: false
  },
  {
    title: "Buy food",
    isComplete: false
  },
  {
    title: "Eat lunch",
    isComplete: true
  },
  {
    title: "Write Article",
    isComplete: true
  }
];

export default {
  data() {
    return {
      message: "Welcome to Vue!",
      todos: todos
    };
  },
  methods: {}
};
</script>

目前我們是寫的死死的,聰明的你一定想到我們可以用v-for來列出所有的todo,請將上方的程式碼做一個簡單的修改

<div :class="[todo.isComplete ? 'success' : 'error', 'todo-wrapper']" v-for="todo in todos" :key="todo.id">
      <div class="todo-title">
        {{ todo.title }}
      </div>
      <div class="todo-icons">
        <i class="fa fa-check" aria-hidden="true"></i>
        <i class="fa fa-trash-alt" aria-hidden="true"></i>
      </div>
</div>

你應該會看到這樣的畫面

v-for

效果上沒什麼問題,但如果今天你這樣的todos要在很多地方使用呢?
你當然可以在每一個頁面都寫一次一模一樣的東西,但人生很美好,這種無趣的重複動作我們還是能省則省吧!

註冊global vue component

我們現在要做的是,建立一個全新的vue組件,讓我們可以在任何地方使用,這樣的話上方的例子最終就可以改寫為類似以下的東西

<template>
  <div id="app">
    <h1>My Todo List</h1>
    <todo-list v-for="todo in todos" :key="todo.id"></todo-list>
  </div>
</template>

如何,是不是相當精簡呢? 藉由這樣的組件化管理,你在每一隻vue檔案裡面要關心的事情就會變少,維護起來自然也比較容易! 我們需要利用以下的語法註冊vue組件

Vue.component('組件名稱', {
  傳入的選項
}); 

現在我們要建立的是一個名為todo-list的組件,所以請你在程式碼中新增以下的部分,你也許注意到裡面的內容有些不一樣,這個我之後會說明。

Vue.component('todo-list', {
  template: `
    <div class="todo-wrapper">
      <div class="todo-title">
        Write Article
      </div>
      <div class="todo-icons">
        <i class="fa fa-check" aria-hidden="true"></i>
        <i class="fa fa-trash-alt" aria-hidden="true"></i>
      </div>
    </div>
  `
}); 

接著馬上在我們的template中使用我們剛註冊的vue組件吧!
請將原本的程式碼改為

<template>
  <div id="app">
    <h1>My Todo List</h1>
    <todo-list v-for="todo in todos" :key="todo.id"></todo-list>
  </div>
</template>

你應該會看到以下的畫面,那就表示你成功囉!

component

結語

今天我們介紹了組件化的概念,雖然我們成功的改寫了原先的頁面(今天完整版的demo在這),讓它看起來相當乾淨整潔,不過你馬上就會注意到幾個問題

  1. 本來左邊用來判斷完成狀態的紅綠條消失了
  2. todo title全都一樣

這兩者的原因是相同的,在原先我們的寫法中,我們是利用傳入的todos去渲染每一個todo的標題,並根據其中的isComplete變數去決定左側的狀態顯示,但我們現在並沒有把這些資訊傳進我們新建立的組件,組件內的template是完全寫死的! 也因此會造成這樣的結果! 那..該怎麼解決呢? 這個就留在明天說吧:D 大家加油!

此文章同步發布於個人部落格,有興趣的大大也可以來參觀一下:D


上一篇
2020it邦鐵人賽-30天手把手的Vue.js教學 Day10- 認識Vue Lifecycle
下一篇
2020it邦鐵人賽-30天手把手的Vue.js教學 Day12 - 認識props屬性,從外向內的資料傳遞
系列文
30天手把手的vue.js教學!30

尚未有邦友留言

立即登入留言