開始使用 Vue 元件

5 分鐘

根據定義，元件是「較大整體的一個組件或元素」。當您考慮建立應用程式時，通常會使用較小的組件，並將其合併成較大的整體：您的應用程式。 Vue 可讓您建立元件，繼而用來建立完整的應用程式。

Vue 元件

雖然您可以使用 JavaScript 檔案來建立元件，但更常用的方法是使用 .vue 檔案內的 Vue 語法建立單一檔案元件。單一檔案元件可讓您有更簡潔的結構和更獨立的設定。此外甚至還可讓您使用各種前置處理器，例如 Pug 或 Stylus。

在建立元件時，基本上您會建立可在應用程式中以類似一般 HTML 標籤的方式使用的新標籤。這種形式的語意標籤可說明頁面上顯示的內容。類似 <booking-form></booking-form> 的標籤可能會顯示建立預約的表單，而 <booking-list></booking-list> 可能會顯示預約清單。

Vue 元件結構

Vue 元件包含三個主要區段：style、script 和 template。

style

style 區段可包含任何有效的 CSS，或您可能使用的任何前置處理器的語法。

您也可以使用 scoped 屬性，將 CSS 的範圍設為該特定元件。如此，樣式就只會套用至該元件，讓您能夠建立類別和其他設定，而無須擔心是否會不慎修改頁面的其他部分。

<style>
.demo {
    font-family: Verdana
}
</style>

script

script 區段會儲存用於元件的指令碼。如同 Vue JavaScript 元件，您也可以匯出各種 Vue 屬性和方法，例如 data()、methods 和 components。

<script>
export default {
    data() {
        return {
            product: {
                name: 'Cruise to the moon',
                description: 'A cool cruise to the moon!'
            }
        }
    }
}
</script>

template

template 區段含有您想要用來顯示資訊，以及讓使用者與資料互動的 HTML 範本。當您使用以 JavaScript 為基礎的元件時，template 通常會位於 .html 檔案內，或者是 JavaScript 檔案中的字串常值。

在 template 中使用的 HTML 語法與以 JavaScript 為基礎的元件相同，包括使用 handlebars ({{}}) 來顯示資料。

<template>
  <div id="product">
    <div>{{ product.name }}</div>
    <div>{{ product.description }}</div>
  </div>
</template>

注意

範本必須有一個根元素。也就是說，以 product 作為 id 的 div 元素不可有任何同層級。它只能有子元素，如上述程式碼所示。

載入和元件

如先前所述，單一檔案元件會以 .vue 副檔名儲存。您可以使用 import 陳述式，以類似的方式將這些元件載入至其他課程模組。您可以使用 components 屬性加以註冊。元件經註冊後，即可用作 template 內的標籤。

注意

當您使用 import 匯入程式庫時，標準做法是使用 PascalCase 來命名，將每個字的第一個字母顯示為大寫 (例如 PascalCase)。但在 HTML 中，照慣例是讓標籤名稱使用 kebab-case：每個字皆為小寫字母，並且以虛線 (-) 連接。 Vue 會自動管理這兩種不同的慣例。

<template>
<product-display></product-display>
</template>
<script>
import ProductDisplay from './ProductDisplay.vue'
export default {
    components: {
        ProductDisplay
    }
}

在前述程式碼中，元件 ProductDisplay 會匯入並新增至 components 屬性。然後，在範本中使用 ProductDisplay 時，Vue 的編譯器可以分辨此元件是其剖析時所需的項目，而不是一般 HTML 元素。

關注點分離

將 HTML、CSS 和 JavaScript 放入一個檔案中，似乎違背了為每個類型建立個別檔案的最佳做法。在實務上，在這些檔案間切換，有可能因其間的相互依存性而導致開發速度緩慢。此外，必須在檔案之間切換時，也將伴隨著相關認知負載。

單一檔案元件可讓您使用 src 屬性為 script 和 style 區段建立個別的檔案。

<template>
    <div>Hello, world</div>
</template>
<script src="./hello.js"></script>
<style src="./style.css"></style>