Vue 3 元件基礎與模板語法詳解

Amd794發表於2024-05-24

Vue元件

title: Vue 3 元件基礎與模板語法詳解
date: 2024/5/24 16:31:13
updated: 2024/5/24 16:31:13
categories:

前端開發

tags:

Vue3特性
CompositionAPI
Teleport
Suspense
Vue3安裝
元件基礎
模板語法

Vue 3 簡介

1. Vue 3 的新特性

Vue 3引入了許多新的特性，以提高框架的效能和可維護性。下面是一些主要的新特性：

Composition API：這是Vue 3中最大的變化之一，它提供了一種更靈活的方式來組織和重用元件的邏輯。
Teleport：這是一個新的API，允許我們在元件樹中將元素“傳送”到其他位置。
Suspense：這是一個新的API，允許我們在元件樹中等待非同步資料載入。
Fragment：這是一個新的內建元件，允許我們在元件中渲染多個根節點。
v-memo：這是一個新的指令，允許我們在渲染過程中快取元件的輸出。
更快的渲染速度：Vue 3中的渲染器已經重寫，提供了更快的渲染速度。

2. 安裝與配置

要使用Vue 3，我們需要先安裝它。可以使用npm或yarn來安裝Vue 3：

npm install vue@next
# or
yarn add vue@next

安裝完成後，我們可以在JavaScript中使用Vue 3：

import { createApp } from 'vue'

const App = {
data() {
return {
message: 'Hello Vue 3!'
}
}
}

const app = createApp(App)
app.mount('#app')

或者在HTML中使用Vue 3：


<script src="https://unpkg.com/vue@next"></script>

<div id="app">
  {{ message }}
</div>

<script>
  const {createApp} = Vue

  const App = {
    data() {
      return {
        message: 'Hello Vue 3!'
      }
    }
  }

  const app = createApp(App)
  app.mount('#app')

Vue 3 元件基礎

1. 元件的概念

在Vue中，元件是構成應用程式的基本單位。元件是獨立的、可複用的Vue例項，具有自己的屬性、事件、生命週期鉤子等。元件可以看作是頁面的最小單位，透過組合這些元件，我們可以構建出複雜的頁面。

2. 元件的建立與註冊

建立Vue元件的方式有多種，可以透過Vue的建構函式，也可以使用defineComponent函式。

// 使用Vue建構函式
const MyComponent = new Vue({
data() {
return {
message: 'Hello'
}
},
template: '
<div>{{ message }}</div>'
})

// 使用defineComponent
const MyComponent = defineComponent({
data() {
return {
message: 'Hello'
}
},
template: '
<div>{{ message }}</div>'
})

註冊元件可以透過app.component方法，也可以在元件內部使用components選項。

// 全域性註冊
const app = createApp({})
app.component('my-component', MyComponent)

// 區域性註冊
const MyApp = createApp({})
MyApp.component('my-component', MyComponent)

3. 元件的資料傳遞

元件之間的資料傳遞主要透過props和emit實現。

Props：用於父元件向子元件傳遞資料。子元件可以透過defineComponent的props選項宣告接收的資料。

const MyComponent = defineComponent({
props: {
message: {
type: String,
required: true
}
},
template: '
<div>{{ message }}</div>'
})

Emits：用於子元件向父元件傳遞資料。子元件可以透過emit方法觸發事件，並傳遞資料。

const MyComponent = defineComponent({
methods: {
sendMessage() {
this.$emit('message', 'Hello from child')
}
},
template: `
<button @click="sendMessage">Send</button>`
})

4. Props和Emits

Props是父元件傳遞給子元件的資料。
Emits是子元件傳送給父元件的事件。

5. Slots：插槽是Vue提供的一種機制，允許元件的內容被分發到元件的模板中。

// 父元件
<template>
  <MyComponent>
    <template v-slot:default>Default Slot Content</template>
    <template v-slot:other>Other Slot Content</template>
  </MyComponent>
</template>

// 子元件
<template>
  <div>
    <slot name="default"></slot>
    <slot name="other"></slot>
  </div>
</template>

6. 元件的生命週期

Vue元件的生命週期包括建立、掛載、更新和銷燬四個階段。每個階段都有對應的生命週期鉤子，可以在這個階段執行特定的操作。

defineComponent({
created() {
// 元件建立完成後呼叫
},
mounted() {
// 元件掛載到DOM後呼叫
},
updated() {
// 元件更新後呼叫
},
destroyed() {
// 元件銷燬後呼叫
}
})

7. 元件的樣式

Vue元件的樣式可以透過幾種方式來定義：

在元件的<style>標籤中定義樣式。
使用scoped屬性來限制樣式的作用域，使其只應用於當前元件。
透過外部CSS檔案引入樣式。


<style scoped>
  .my-class {
    color: red;
  }
</style>

Vue 3 模板語法

1. 插值表示式 (Interpolation)

在Vue 3中，使用{{ }}包圍的表示式會進行資料繫結。例如：

<p>Message: {{ message }}</p>

當message的值改變時，頁面會自動更新顯示。

2. 指令基礎

Vue的指令是HTML元素上可以附加的行為。常見的指令有v-bind,v-model, 和v-on。

v-bind：用於資料繫結，等同於v-bind:attr="expression"，如v-bind:class="{ active: isActive }".
v-model：用於雙向資料繫結，主要用於表單輸入，如<input v-model="username">.
v-on：用於監聽事件，如<button v-on:click="doSomething">Click me</button>.

3. v-bind, v-model, v-on

v-bind：v-bind:key用於繫結列表元素的唯一標識，v-bind:class用於動態繫結CSS類。
v-model：用於資料雙向繫結，v-model:value繫結資料，v-model:expression用於計算屬性。
v-on：v-on:click用於繫結點選事件，v-on:input用於監聽輸入事件。

4. v-for

v-for指令用於渲染陣列或物件的每個元素，如：


<ul>
  <li v-for="item in items" :key="item.id">{{ item.name }}</li>
</ul>

5. v-if 與 v-show

v-if：條件渲染，當表示式為真時元素會被渲染，為假時會被移除。
v-show：條件渲染，無論條件是否滿足，元素都會被新增到DOM中，只是透過display屬性的none或block來切換可見性。

6. 計算屬性與偵聽器

計算屬性：data物件中的函式，當依賴的props或data屬性改變時，計算屬性會自動重新計算。
偵聽器：watch物件，監聽資料的變化，當資料變化時執行回撥。

data() {
return {
count: 0
}
},
computed: {
formattedCount() {
return this.count.toLocaleString();
}
},
watch: {
count(newCount) {
console.log('Count has changed:', newCount);
}
}

7. 條件渲染與列表渲染

條件渲染：v-if和v-show用於根據條件展示或隱藏元素。
列表渲染：v-for遍歷陣列或物件，可以巢狀使用，方便生成動態列表。

8. 事件處理

使用v-on繫結事件，如<button v-on:click="doSomething">Click</button>。
可以使用.sync修飾符同步原生事件，如<input v-model.sync="value">。

9. 表單輸入繫結

v-model用於表單輸入的雙向繫結，如<input type="text" v-model="username">。
v-model.number或v-model.integer等修飾符用於型別驗證。

高階元件開發

1. 動態元件

動態元件允許你在執行時切換元件。要使用動態元件，你可以使用const component = new VueComponent()
建立一個元件例項，然後使用this.$refs.someRef.component = component來替換它。

// 定義一個動態元件
const DynamicComponent = {
template: '
<div>Dynamic Component</div>'
}

// 在元件中動態替換元件
new Vue({
el: '#app',
components: {
'dynamic-component': DynamicComponent
},
methods: {
changeComponent() {
this.$refs.dynamicComponent.component = DynamicComponent
}
}
})

2. 非同步元件

非同步元件是為了減少初始載入時間而設計的。你可以透過返回一個Promise來定義一個非同步元件：

const AsyncComponent = () => ({
// 這裡可以使用Promise
component: import('./MyComponent'),
loading: LoadingComponent, // 載入中的元件
error: ErrorComponent // 載入錯誤的元件
})

在元件中使用非同步元件：

components: {
'async-component': AsyncComponent
}

3. 遞迴元件

遞迴元件是指那些可以呼叫自身的元件。為了防止無限遞迴，Vue提供了一個max屬性來限制遞迴深度：

const RecursiveComponent = {
template: `
<div>
  {{ message }}
  <recursive-component :max="max - 1" :message="message"></recursive-component>
</div>
`,
props: {
max: {
type: Number,
default: 5
},
message: String
}
}

4. 函式式元件

函式式元件不接受props，也不維護任何例項狀態。它們只是返回一個渲染函式：

const FunctionalComponent = () => {
// 函式式元件的邏輯
return
<div>Functional Component</div>
}

在元件中使用函式式元件：

components: {
'functional-component': FunctionalComponent
}

5. 自定義指令

自定義指令允許你定義自己的HTML attribute，這些指令可以應用於任何元素，並且可以繫結不同的行為。

Vue.directive('my-directive', (el, binding, vnode) => {
// 指令的邏輯
})

在元件中使用自定義指令：


<div v-my-directive="someValue"></div>

構建一個簡單的部落格應用

1. 環境準備

使用 Vue CLI 建立一個新的 Vue.js 專案。
安裝所需的依賴，如vue-router用於頁面路由，vuex用於狀態管理，axios用於 HTTP 請求等。

2. 專案結構

simple-blog/
|-- public/
|-- src/
|   |-- assets/
|   |-- components/
|   |   |-- BlogPost.vue
|   |   |-- Navigation.vue
|   |-- views/
|   |   |-- Home.vue
|   |   |-- PostList.vue
|   |-- App.vue
|   |-- main.js
|-- package.json

3. 實現邏輯

Navigation.vue：實現頂部導航欄。
Home.vue：實現首頁佈局。
PostList.vue：實現部落格文章列表。
BlogPost.vue：實現單篇部落格文章的展示。
main.js：入口檔案，建立 Vue 例項，配置路由等。

4. 示例程式碼

// main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'

new Vue({
router,
render: h => h(App),
}).$mount('#app')

<!-- App.vue -->
<template>
  <div id="app">
    <Navigation/>
    <router-view/>
  </div>
</template>

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

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

<!-- Navigation.vue -->
<template>
  <nav>
    <!-- 導航連結 -->
  </nav>
</template>

<!-- PostList.vue -->
<template>
  <div>
    <h1>部落格文章列表</h1>
    <ul>
      <li v-for="post in posts" :key="post.id">
        {{ post.title }}
      </li>
    </ul>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        posts: [] // 從後端 API 獲取資料
      }
    },
    created() {
      // 呼叫 API 獲取文章列表
    }
  }
</script>

<!-- BlogPost.vue -->
<template>
  <div>
    <h1>{{ post.title }}</h1>
    <p>{{ post.content }}</p>
  </div>
</template>

<script>
  export default {
    props: {
      post: Object
    }
  }
</script>

5. 執行專案

使用npm run serve命令啟動專案，然後訪問http://localhost:8080檢視效果。

這是一個基本的部落格應用，可以根據實際需求繼續擴充套件和最佳化。

附錄

Vue 3 資源推薦

官方文件：Vue 3 官方文件提供了詳盡的指南和 API 參考，是學習 Vue 3 的最佳起點。
Vue Mastery：Vue Mastery提供了許多免費的 Vue 3 教程影片，適合初學者和進階開發者。
Vue School：Vue School提供了付費的 Vue 3 課程，涵蓋從基礎到高階的所有內容。
GitHub 倉庫：Vue 3 的 GitHub 倉庫是檢視原始碼和貢獻程式碼的好地方。
社群論壇：Vue.js 論壇是提問和分享經驗的好地方。

常見問題解答

如何升級到 Vue 3？
- 首先，確保你的專案依賴支援 Vue 3。然後，更新package.json中的 Vue 依賴版本到 3.x。最後，檢查並更新你的程式碼以適應 Vue 3
  的新特性和變化。
Vue 3 和 Vue 2 有什麼主要區別？
- Vue 3 引入了 Composition API，提供了更好的邏輯複用和程式碼組織方式。此外，Vue 3 在效能上有所提升，包括更快的虛擬 DOM
  和更小的包體積。
如何在 Vue 3 中使用 Vuex？
- Vuex 4 是專為 Vue 3 設計的版本。你可以透過安裝vuex@next來使用 Vuex 4，並在你的 Vue 3 專案中配置和使用它。
Vue 3 支援 TypeScript 嗎？
- 是的，Vue 3 對 TypeScript 提供了更好的支援。你可以使用 TypeScript 來編寫 Vue 3 元件，並利用 Vue 3 的型別宣告來提高開發效率。
如何處理 Vue 3 中的響應式資料？
- Vue 3 使用ref和reactive函式來建立響應式資料。ref用於建立單個響應式資料，而reactive用於建立響應式物件。
Vue 3 中的 Teleport 是什麼？
- Teleport 是 Vue 3 中的一個新特性，允許你將元件的內容渲染到 DOM 樹的另一個位置，這在建立模態框或彈出選單時非常有用。
Vue 3 中的 Fragment 是什麼？
- 在 Vue 3 中，元件可以返回多個根節點，這被稱為 Fragments。這允許你編寫更簡潔的模板，而不需要額外的包裝元素。
如何除錯 Vue 3 應用程式？
- 你可以使用瀏覽器的開發者工具來除錯 Vue 3 應用程式。Vue 3 支援 Vue 2 的開發者工具擴充套件，你可以透過它來檢查元件狀態和追蹤事件。

史上最詳細VUE2.0全套demo講解基礎1（模板語法）
2017-03-25
Vue
Vue基礎語法
2019-08-14
Vue
Blazor和Vue對比學習（基礎1.2）：模板語法和Razor語法
2022-05-06
BlazorVue
Vue模板語法
2020-07-16
Vue
vue 模板語法
2019-03-01
Vue
Python基礎：語法基礎（3）
2018-12-22
Python
vue元件詳解（一）——元件與複用
2018-04-08
Vue元件
基礎控制元件詳解
2017-08-04
控制元件
Vue 元件基礎
2019-03-03
Vue元件
Vuejs 基礎與語法
2018-09-06
VueJS
Python3 基礎語法
2023-12-19
Python
Java基礎-基礎語法-變數與常量
2020-12-18
Java變數
vue-cli3 搭建的前端專案基礎模板
2018-11-16
Vue前端
Python程式設計入門基礎語法詳解
2019-06-21
Python程式設計
Vue--元件基礎
2019-03-28
Vue元件
vue-元件基礎
2018-08-13
Vue元件
vue基礎-元件&插槽
2021-10-23
Vue元件
GOLANG簡介與基礎語法
2021-02-03
Golang
nginx與location語法詳解
2018-12-07
Nginx
Vue 元件的使用語法
2019-01-28
Vue元件
JavaSE基礎語法3-陣列
2020-11-14
Java陣列
Vue快速上門(2)-模板語法
2022-12-12
Vue
Vue3內建元件Teleport用法詳解
2021-10-20
Vue元件
Java基礎-語法基礎
2020-07-27
Java
.net 開源模板引擎jntemplate 教程：基礎篇之語法
2021-03-04
基礎語法
2020-11-04
Vue3 使用setup語法糖時，元件name命名
2024-04-18
Vue元件
新知識：jQuery語法基礎與操作
2018-05-06
jQuery
英語語法基礎
2009-03-18
Vue 的初階黑魔法 —— 模板語法
2019-06-04
Vue
VUE.js第三課模板語法
2019-02-16
Vue.js
Vue 第一天:模板語法
2018-01-29
Vue
Python程式設計入門——基礎語法詳解（經典）
2018-12-05
Python程式設計
scala基礎語法-----Spark基礎
2020-09-29
Spark
模板語法 if 與 with 的區別
2021-01-31
【乾貨】Vue3 元件通訊方式詳解
2024-06-26
Vue元件
Dart語法基礎
2019-03-08
Dart
Java 基礎語法
2021-09-09
Java