SFC是什麼

Single-file components單一元件檔是一個集合HTML、JavaScript 及 CSS的檔案，用.vue檔案作為一個元件。

從建置好的Vue CLI中打開App.vue可以看到它是由三部分組成

<template>
  <img alt="Vue logo" src="./assets/logo.png">
  <HelloWorld msg="Welcome to Your Vue.js App"/>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

1. template模板: HTML模板，用法就和之前學的一樣
2. script元件主程式: 元件實體比需用export default的方式輸出
3. style元件樣式: 放置CSS樣式的地方，要注意樣式汙染問題

同時有a.vue與b.vue，a.vue的紅色樣式也會染到b.vue身上

a.vue

<template>
  <h1>This Component A!</h1>
</template>

<style>
h1 {
  color: red;
}
</style>

b.vue

<template>
  <h1>This Component A!</h1>
</template>

App.vue
<template>
  <component-a />
  <component-b />
</template>

<script>
import componentA from "./components/a.vue";
import componentB from "./components/b.vue";

export default {
  name: "App",
  components: {
    componentA,
    componentB,
  },
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

為了解決這個問題，可以用scoped做到區隔，b.vue的字就會變回原本的黑色

a.vue

<template>
  <h1>This Component A!</h1>
</template>

<style scoped>
h1 {
  color: red;
}
</style>

檢視的時候也可以看到Vue.js是透過隨機生成的[data-v-xxxx]來幫兩個元件的css做區隔

另外，若希望樣式能帶到子元件身上的話可以在父層的css做改寫，使用::v-deep([selector])，如此一來就可以將加了scoped的樣式給子元件

<style scoped>
::v-deep(h3) {
  color: red;
}
</style>

外部檔案作為來源引入

注意!!!只有style可以引入多個

<template src="./hello.html"></template>

<script src="./hello.js"></script>

<style src="./hello.css"></style>

lang使用其他語言開發

可以利用其他程式語言轉成SFC，像是最常見的template可以用pug，script可以用TypeScript撰寫，只要先裝相對應的plugin(https://cli.vuejs.org/core-plugins/)，並在lang上指定使用的語言就可以順利撰寫了!!

<template lang="pug"></template>

<script lang="ts"></script>

<style lang="scss"></style>