跳至主要内容

Vue 基本架構

SFC (Single-File Components 單文件組件)​

Vue 的 SFC 有點像 codepen 的組成，將 HTML、CSS、JavaScript 寫在一頁裡面， 另外官方文件有提到常見的『關注點分離』的議題，有興趣可以去官方文件參閱。

  1. 檔名：要有一~兩個英文單字組成例 App.vue 或 HelloWorld.vue
  2. 副檔名： .vue
  3. 基本格式
  • 這裡要記得加上 setup 和 scoped
    • <style> 如果不加上 scoped 就會變成全域的樣式

基本架構​

<script setup></script>

<template>
  <h1>標題</h1>
</template>

<style scoped></style>

HTML vs SFC 寫法的差異 (composition)​

HTML​

  • 副檔名為 .html
<script type="module">
import { createApp, ref } from 'vue'

createApp({
  setup() {
    const titleClass = ref('title')

    return {
      titleClass
    }
  }
}).mount('#app')
</script>

<div id="app">
  <h1>Make me red</h1> <!-- add dynamic class binding here -->
</div>

SFC​

  • 副檔名為 .vue
<script setup>
import { ref } from 'vue'

const titleClass = ref('title')
</script>

<template>
  <h1>Make me red</h1> <!-- add dynamic class binding here -->
</template>
備註

回到Vue3 必學知識點列表