適合初學者的 VueJs VueJs 部分創建、導入和使用元件

創建您的第一個組件

---

什麼是組件？
元件是 Vue 應用程式的建構塊。每個元件都有自己的功能和視圖，元件可以在整個應用程式中重複使用。組件的一個範例是可以在不同頁面上存取的導覽列。

建立基本組件

• 在元件資料夾中建立一個名為 HelloWorld.vue 的新元件檔案（如果需要，您可以更改檔案名稱）（如果尚不存在，請建立一個新的元件資料夾）。

• HelloWorld 組件：
  

<template>
  <div>
    <h1>Hello, World!</h1>
  </div>
</template>

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

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

• 在App.vue中匯入並使用HelloWord元件

<template>
  <div id="app">
    <HelloWorld />
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'; //adjust according to the path to your component

export default {
  components: {
    HelloWorld
  }
}
</script>

現在您應該可以看到 App.vue 元件中渲染的 HelloWorld 元件。

以上是適合初學者的 VueJs VueJs 部分創建、導入和使用元件的詳細內容。更多資訊請關注PHP中文網其他相關文章！