Vue 元件
Vue 中的元件可以將我們的網頁分解成易於處理的小塊。
我們可以獨立於網頁的其餘部分來使用 Vue 元件，元件擁有自己的內容和邏輯。
一個網頁通常由許多 Vue 元件組成。
什麼是元件？
元件是可重用的、自包含的程式碼塊，它們封裝了使用者介面的特定部分，因此我們可以構建可擴充套件且易於維護的 Vue 應用程式。
我們可以自己建立 Vue 元件，也可以使用稍後會學到的內建元件，例如 <Teleport> 或 <KeepAlive>。在這裡，我們將專注於我們自己建立的元件。
建立元件
Vue 的元件是一個非常強大的工具，因為它能讓我們的網頁更具可擴充套件性，並且使大型專案更容易處理。
讓我們建立一個元件並將其新增到我們的專案中。
在
src資料夾內建立一個名為components的新資料夾。在
components資料夾內，建立一個名為FoodItem.vue的新檔案。元件通常以 PascalCase 命名約定命名，不帶空格，其中每個新單詞都以大寫字母開頭，包括第一個單詞。確保
FoodItem.vue檔案如下所示：
FoodItem.vue 元件內的程式碼
<template>
<div>
<h2>{{ name }}</h2>
<p>{{ message }}</p>
</div>
</template>
<script>
export default {
data() {
return {
name: 'Apples',
message: 'I like apples'
}
}
};
</script>
<style></style>如上例所示，元件也像我們的主 App.vue 檔案一樣，由 <template>、<script> 和 <style> 標籤組成。
新增元件
請注意，上面示例中的 <script> 標籤以 export default 開頭。這意味著包含資料屬性的物件可以在另一個檔案中接收或匯入。我們將使用此功能，透過在 main.js 檔案中匯入 FoodItem.vue 元件來將其整合到我們現有的專案中。
首先，在您的原始 main.js 檔案中將最後一行重寫為兩行：
main.js:
import { createApp } from 'vue'
import App from './App.vue'
const app = createApp(App)
app.mount('#app')
現在，透過在 main.js 檔案中插入第 4 行和第 7 行來新增 FoodItem.vue 元件：
main.js:
import { createApp } from 'vue'
import App from './App.vue'
import FoodItem from './components/FoodItem.vue'
const app = createApp(App)
app.component('food-item', FoodItem)
app.mount('#app')
在第 7 行，添加了該元件，以便我們可以在 App.vue 檔案的 <template> 標籤中使用它，作為自定義標籤 <food-item/>，如下所示：
App.vue:
<template>
<h1>Food</h1>
<food-item/>
<food-item/>
<food-item/>
</template>
<script></script>
<style></style>另外，讓我們在 App.vue 檔案的 <style> 標籤中新增一些樣式。確保開發伺服器正在執行，並檢視結果。
示例
App.vue:
<template>
<h1>Food</h1>
<food-item/>
<food-item/>
<food-item/>
</template>
<script></script>
<style>
#app > div {
border: dashed black 1px;
display: inline-block;
margin: 10px;
padding: 10px;
background-color: lightgreen;
}
</style>開發模式：在處理 Vue 專案時，透過在終端中執行以下命令，始終將專案置於開發模式非常有用：
npm run dev
單獨的元件
Vue 中處理元件時一個非常有用且強大的屬性是，我們可以讓它們獨立工作，而無需像使用純 JavaScript 那樣標記具有唯一 ID 的元素。Vue 會自動處理，將每個元件視為獨立的。
讓我們讓 <div> 元素在被點選時進行計數。
我們新增到主應用程式檔案 App.vue 的唯一內容是 CSS，以便在懸停時將游標顯示為指向的手形，暗示存在某種點選功能。
新增到 App.vue 中 <style> 標籤的 CSS 程式碼：
#app > div:hover {
cursor: pointer;
}
在我們的元件檔案 FoodItem.vue 中，我們必須新增一個名為 count 的資料屬性，為 <div> 元素新增一個點選監聽器，新增一個在點選時執行以增加計數器的函式，以及使用文字插值 {{}} 來顯示計數。
示例
FoodItem.vue:
<template>
<div v-on:click="countClicks">
<h2>{{ name }}</h2>
<p>{{ message }}</p>
<p id="red">You have clicked me {{ clicks }} times.</p>
</div>
</template>
<script>
export default {
data() {
return {
name: 'Apples',
message: 'I like apples',
clicks: 0
}
},
methods: {
countClicks() {
this.clicks++;
}
}
}
</script>
<style>
#red {
font-weight: bold ;
color: rgb(144, 12, 12);
}
</style>我們不必定義唯一的 ID 或執行任何額外工作，Vue 就會自動為每個 <div> 元素獨立處理計數，Vue 就會自動完成。
但是，除了不同的計數器值之外，<div> 元素的內容仍然相同。在下一頁中，我們將瞭解更多關於元件的知識，以便以更有意義的方式使用元件。例如，在每個 <div> 元素中顯示不同種類的食物會更有意義。
