2020it邦鐵人賽-30天手把手的Vue.js教學 Day15 – 認識Single file components(SFC)

2020it邦鐵人賽-30天手把手的Vue.js教學 Day15 – 認識Single file components(SFC)

tags: Vue.js ItIron2020

前言

我們在之前認識了vue實體、vue組件以及如何在父子層的組件透過props & emit相互溝通，作為額外補充還簡單介紹了一下slot的概念，也因此體會到了vue組件的方便。今天則要介紹SFC的概念，可謂vue的核心概念之一，但內容並不困難，不用擔心! 我們馬上就開始吧!

什麼是SFC(single file components)

single file components是一個vue檔案，每一個vue檔案就是一個完整的組件，其中包含著三大部分

• HTML (template)
• Javascript (script)
• CSS (style)

一個SFC會有著以下的結構

<template>
    <div>
        <!--HTML-->
    </div>
</template>

<script>
    // JAvaScript
</script>

<style>
    /*CSS*/
</style>

很眼熟對吧，是的。我們目前用的vue pen就是一個標準的SFC~! surprised!

為什麼我們需要SFC

我們在之前的練習中了解到註冊全域vue組件、以及組件的方便性，不過如果你當時有自己註冊過一個全域組件，例如我們昨天的slot範例。

Vue.component("post", {
  template: `
  <div>
    <slot name="title"></slot>
    <slot name="body"></slot>
    <slot></slot>
  </div>
  `,
});

這樣的作法有著一些缺點

• 全域命名問題，組件名稱不能重複(專案規模大的時候就會比較麻煩)
• 不支援CSS使用
• template只能以字串方式撰寫，不支援編輯器highlight與縮排
  在專案規模小的時候不算是太嚴重的問題，但一旦專案規模擴大，這些小細節會相當的煩人，而藉由SFC則可以解決以上的問題，同時SFC還支援webpack等打包建置的服務，使用上可以免去許多問題!

了解SFC template

template區塊的內容就是你在註冊全域組件時寫入的字串，它經過編譯之後會有一模一樣的結果。 一個template只能有一個根元素(root element)，也就是說所有的內容都要用一個容器包起來，比如說

<template>
    <div>
        <!--這樣的寫法就是OK的-->
    </div>
</template>

<template>
    <div>
        <h1>我是Danny</h1>
    </div>
    <div>
        <!--這樣的寫法就是出局的-->
    </div>
</template>

值得一提的是，正式上線的Vue3.0以及移除了只能有一個根元素的限制，這點我們會在鐵人賽的最後一併探討:D

template預設的markup是HTML，不過你也可以藉由lang屬性改寫為你習慣的樣板。

<template lang="pug">
    div
      Hello world
</template>

了解SFC script

script區塊就是我們之前探討的各種vue屬性與hooks，一個SFC內只能有一個script區塊，且最終需要輸出成一個vue實體，若你有需要引入外部的js檔案，則可以使用require或是import達成。以下是script標籤內的基本架構

import dayjs from 'dayjs' // 引入npm套件
import {helper} from '../utils.js' // 以相對路徑引入自己專案內的js檔案

export default {
  data() {
    return {

    };
  },
  methods: {

  },
  computed: {

  },
  mounted() {

  }
};
</script>

了解SFC style

一個SFC內可以有著複數個style，特別注意的是預設的style是全域管理，如果你只希望在這個組件中套用指定的樣式，可以加入scoped屬性

<style scoped>
    /*CSS*/
</style>

同時你也可以利用lang屬性套用想要的預處理器，像是scss或是stylus之類的(在此之前記得要先透過npm安裝對應的預處理器與loader)

<style  lang="stylus" scoped>
    /*CSS*/
</style>

在single file components中使用其他組件

在SFC內使用其他的vue組件分成幾個部分，首先你需要先透過import載入指定的組件，假設現在有兩個SFC，分別是A、B兩個組件，若我今天想在A中使用B，首先我就必須先載入該組件，就像剛剛在script區塊載入外部的js檔案一樣的寫法

import ComponentA from '../src/components/A.vue' 

接著在該組件加入components屬性

export default {
  components: {
    ComponentA
  }
};
</script>

最後在template中使用

<template>
    <div>
        <component-a></component-a>
    </div>
</template>

特別需要注意的是，不管你引入的組件是如何命名的，一旦你需要在template中使用，一律轉為kebab-case、小寫並以-相連

MyApp -> my-app
componentA -> component-a

結語

今天我們介紹了SFC的基本結構與使用，之後我們搭建本地專案時，你會更清楚SFC的好處! 這裡就容我先賣個關子，我們明天再見囉:D 今天沒有demo，很輕鬆吧!

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

參考文章

vue-官方文件

前言

我們在之前認識了vue實體、vue組件以及如何在父子層的組件透過props & emit相互溝通，作為額外補充還簡單介紹了一下slot的概念，也因此體會到了vue組件的方便。今天則要介紹SFC的概念，可謂vue的核心概念之一，但內容並不困難，不用擔心! 我們馬上就開始吧!

什麼是SFC(single file components)

single file components是一個vue檔案，每一個vue檔案就是一個完整的組件，其中包含著三大部分

• HTML (template)
• Javascript (script)
• CSS (style)

一個SFC會有著以下的結構

<template>
    <div>
        <!--HTML-->
    </div>
</template>

<script>
    // JAvaScript
</script>

<style>
    /*CSS*/
</style>

很眼熟對吧，是的。我們目前用的vue pen就是一個標準的SFC~! surprised!

為什麼我們需要SFC

我們在之前的練習中了解到註冊全域vue組件、以及組件的方便性，不過如果你當時有自己註冊過一個全域組件，例如我們昨天的slot範例。

Vue.component("post", {
  template: `
  <div>
    <slot name="title"></slot>
    <slot name="body"></slot>
    <slot></slot>
  </div>
  `,
});

這樣的作法有著一些缺點

• 全域命名問題，組件名稱不能重複(專案規模大的時候就會比較麻煩)
• 不支援CSS使用
• template只能以字串方式撰寫，不支援編輯器highlight與縮排
  在專案規模小的時候不算是太嚴重的問題，但一旦專案規模擴大，這些小細節會相當的煩人，而藉由SFC則可以解決以上的問題，同時SFC還支援webpack等打包建置的服務，使用上可以免去許多問題!

了解SFC template

template區塊的內容就是你在註冊全域組件時寫入的字串，它經過編譯之後會有一模一樣的結果。 一個template只能有一個根元素(root element)，也就是說所有的內容都要用一個容器包起來，比如說

<template>
    <div>
        <!--這樣的寫法就是OK的-->
    </div>
</template>

<template>
    <div>
        <h1>我是Danny</h1>
    </div>
    <div>
        <!--這樣的寫法就是出局的-->
    </div>
</template>

值得一提的是，正式上線的Vue3.0以及移除了只能有一個根元素的限制，這點我們會在鐵人賽的最後一併探討:D

template預設的markup是HTML，不過你也可以藉由lang屬性改寫為你習慣的樣板。

<template lang="pug">
    div
      Hello world
</template>

了解SFC script

script區塊就是我們之前探討的各種vue屬性與hooks，一個SFC內只能有一個script區塊，且最終需要輸出成一個vue實體，若你有需要引入外部的js檔案，則可以使用require或是import達成。以下是script標籤內的基本架構

import dayjs from 'dayjs' // 引入npm套件
import {helper} from '../utils.js' // 以相對路徑引入自己專案內的js檔案

export default {
  data() {
    return {

    };
  },
  methods: {

  },
  computed: {

  },
  mounted() {

  }
};
</script>

了解SFC style

一個SFC內可以有著複數個style，特別注意的是預設的style是全域管理，如果你只希望在這個組件中套用指定的樣式，可以加入scoped屬性

<style scoped>
    /*CSS*/
</style>

同時你也可以利用lang屬性套用想要的預處理器，像是scss或是stylus之類的(在此之前記得要先透過npm安裝對應的預處理器與loader)

<style  lang="stylus" scoped>
    /*CSS*/
</style>

在single file components中使用其他組件

在SFC內使用其他的vue組件分成幾個部分，首先你需要先透過import載入指定的組件，假設現在有兩個SFC，分別是A、B兩個組件，若我今天想在A中使用B，首先我就必須先載入該組件，就像剛剛在script區塊載入外部的js檔案一樣的寫法

import ComponentA from '../src/components/A.vue' 

接著在該組件加入components屬性

export default {
  components: {
    ComponentA
  }
};
</script>

最後在template中使用

<template>
    <div>
        <component-a></component-a>
    </div>
</template>

特別需要注意的是，不管你引入的組件是如何命名的，一旦你需要在template中使用，一律轉為kebab-case、小寫並以-相連

MyApp -> my-app
componentA -> component-a

結語

今天我們介紹了SFC的基本結構與使用，之後我們搭建本地專案時，你會更清楚SFC的好處! 這裡就容我先賣個關子，我們明天再見囉:D 今天沒有demo，很輕鬆吧!

參考文章

vue-官方文件