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

来源:https://www.cnblogs.com/Amd794/p/18211256
-Advertisement-
Play Games

title: Vue 3 組件基礎與模板語法詳解 date: 2024/5/24 16:31:13 updated: 2024/5/24 16:31:13 categories: 前端開發 tags: Vue3特性 CompositionAPI Teleport Suspense Vue3安裝 組件 ...


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

  • 前端開發

tags:

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

image

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 資源推薦

  1. 官方文檔：Vue 3 官方文檔提供了詳盡的指南和 API 參考，是學習 Vue 3 的最佳起點。
  2. Vue Mastery：Vue Mastery提供了許多免費的 Vue 3 教程視頻，適合初學者和進階開發者。
  3. Vue School：Vue School提供了付費的 Vue 3 課程，涵蓋從基礎到高級的所有內容。
  4. GitHub 倉庫：Vue 3 的 GitHub 倉庫是查看源代碼和貢獻代碼的好地方。
  5. 社區論壇：Vue.js 論壇是提問和分享經驗的好地方。

常見問題解答

  1. 如何升級到 Vue 3？

    • 首先，確保你的項目依賴支持 Vue 3。然後，更新package.json中的 Vue 依賴版本到 3.x。最後，檢查並更新你的代碼以適應 Vue 3
      的新特性和變化。

  2. Vue 3 和 Vue 2 有什麼主要區別？

    • Vue 3 引入了 Composition API，提供了更好的邏輯復用和代碼組織方式。此外，Vue 3 在性能上有所提升，包括更快的虛擬 DOM
      和更小的包體積。

  3. 如何在 Vue 3 中使用 Vuex？

    • Vuex 4 是專為 Vue 3 設計的版本。你可以通過安裝vuex@next來使用 Vuex 4，併在你的 Vue 3 項目中配置和使用它。

  4. Vue 3 支持 TypeScript 嗎？

    • 是的，Vue 3 對 TypeScript 提供了更好的支持。你可以使用 TypeScript 來編寫 Vue 3 組件，並利用 Vue 3 的類型聲明來提高開發效率。

  5. 如何處理 Vue 3 中的響應式數據？

    • Vue 3 使用ref和reactive函數來創建響應式數據。ref用於創建單個響應式數據，而reactive用於創建響應式對象。

  6. Vue 3 中的 Teleport 是什麼？

    • Teleport 是 Vue 3 中的一個新特性，允許你將組件的內容渲染到 DOM 樹的另一個位置，這在創建模態框或彈出菜單時非常有用。

  7. Vue 3 中的 Fragment 是什麼？

    • 在 Vue 3 中，組件可以返回多個根節點，這被稱為 Fragments。這允許你編寫更簡潔的模板，而不需要額外的包裝元素。

  8. 如何調試 Vue 3 應用程式？

    • 你可以使用瀏覽器的開發者工具來調試 Vue 3 應用程式。Vue 3 支持 Vue 2 的開發者工具擴展，你可以通過它來檢查組件狀態和追蹤事件。

您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • centos7安裝weblogic14
    Centos7安裝weblogic 1、配置java環境weblogic運行依賴java環境，所以第一步先配置java環境上傳、解壓jdk安裝包[root@bogon ~]# rz -be[root@bogon ~]# tar -zxvf jdk1.8.tar.gz 配置java環境變數[root@ ...
  • orangepi zero2在linux5.4以上內核使用ili9341
    背景 根據orangepi zero2用戶手冊說明，linux5.13內核不能使用 modprobe fbtft_device 驅動spi lcd 查看linux內核源碼提交記錄，發現在v5.4-rc3中刪除了fbtft_device.c文件 commit如下 staging/fbtft: Remo ...
  • MySQL 8.0 Reference Manual（讀書筆記57節--Optimizing for InnoDB Tables）
    一、卸載mariadb的rpm包 1、首先，你需要找出已安裝的MariaDB包的具體名稱。可以使用以下命令列出所有已安裝的MariaDB包： rpm -qa | grep mariadb 2、刪除命令（安裝mysql不一定需要卸載）yum -y remove +【上圖的文件名】或者rpm -e -- ...
  • 鴻蒙HarmonyOS實戰-Stage模型（信息傳遞載體Want）
    前言 應用中的信息傳遞是為了實現各種功能和交互。信息傳遞可以幫助用戶和應用之間進行有效的溝通和交流。通過信息傳遞，應用可以向用戶傳遞重要的消息、通知和提示，以提供及時的反饋和指導。同時，用戶也可以通過信息傳遞嚮應用發送指令、請求和反饋，以實現個性化的需求和操作。 信息傳遞還可以幫助應用之間實現數 ...
  • Symbol 引用 iconfont icon圖標庫
    Symbol 引用 iconfont icon圖標庫 Symbol 引用 這是一種全新的使用方式，應該說這才是未來的主流，也是平臺目前推薦的用法。相關介紹可以參考這篇文章 這種用法其實是做了一個 SVG 的集合，與另外兩種相比具有如下特點： 支持多色圖標了，不再受單色限制。 通過一些技巧，支持像字體 ...
  • 第二周第四天
    XML中的字元串數據類型表示字元序列，包括換行、回車和製表符。處理器不修改值。`normalizedString`去除這些特殊字元，`token`則進一步移除前導和尾隨空格及多餘空格。字元串類型可使用枚舉、長度等限制。`date`和`dateTime`數據類型表示日期和時間，`duration`表示... ...
  • 說說webpack的熱更新是如何做到的？原理是什麼？
    一、是什麼 HMR全稱 Hot Module Replacement，可以理解為模塊熱替換，指在應用程式運行過程中，替換、添加、刪除模塊，而無需重新刷新整個應用 例如，我們在應用運行過程中修改了某個模塊，通過自動刷新會導致整個應用的整體刷新，那頁面中的狀態信息都會丟失 如果使用的是 HMR，就可以實 ...
  • lodash已死？radash庫方法介紹及源碼解析 —— 對象方法篇
    theme: nico 寫在前面 主頁有更多其他篇章的方法，歡迎訪問查看。 本篇我們介紹radash中對象相關方法的使用和源碼解析。 assign：遞歸合併兩個對象 使用說明 功能說明：類似於 JavaScript 的 Object.assign 方法，用於將 override 對象的屬性和值複製到 ...
一周排行
    -Advertisement-
    Play Games
  • 記一次 .NET某機械臂上位系統 卡死分析
    一：背景 1. 講故事 前些天有位朋友找到我，說他們的程式會偶發性的卡死一段時間，然後又好了，讓我幫忙看下怎麼回事？窗體類的程式解決起來相對來說比較簡單，讓朋友用procdump自動抓一個卡死時的dump，拿到dump之後，上 windbg 說話。 二：WinDbg 分析 1. 主線程在做什麼 要想 ...
  • C#控制項ListView支持添加TextBox\PictureBox等其他控制項
    功能說明 使用ListView時，希望可以在單元格顯示圖片或其他控制項，發現原生的ListView不支持，於是通過拓展，實現ListView可以顯示任意控制項的功能，效果如下： 實現方法 本來想著在單元格裡面實現控制項的自繪的，但是沒找到辦法，最後是通過在單元格的錶面顯示對應控制項的，浮於錶面達到目的。 實 ...
  • 【New Relic】給基於.NET Framework 4.0 的 exe 程式安裝New Relic
    由於.NET Framework 4.0 是比較古老的版本，只有New Relic 7.0以下的版本才會支持.NET Framework 4.0的引用程式。 Technical support for .NET Framework 4.0 or lower 你可以參考這個官方Install New ...
  • XAF 屬性編輯器（PropertyEditor）- 原理篇
    前言 隨著 DEV24.1.3 的發佈，XAF Blazor 中的屬性編輯器（PropertyEditor）也進行了很大的改動，在使用體驗上也更接近 WinForm 了，由於進行了大量的封裝，理解上沒有 WinForm 直觀，所以本文通過對屬性編輯器的原理進行解析，並對比新舊版本中的變化，使大家能夠 ...
  • 使用C#開發OPC UA伺服器
    OPC基金會提供了OPC UA .NET標準庫以及示常式序，但官方文檔過於簡單，光看官方文檔和示常式序很難弄懂OPC UA .NET標準庫怎麼用，花了不少時間摸索才略微弄懂如何使用，以下記錄如何從一個控制台程式開發一個OPC UA伺服器。 安裝Nuget包 安裝OPCFoundation.NetSt ...
  • dotnet 將本地的 Phi-3 模型與 SemanticKernel 進行對接
    今天在技術群里，石頭哥向大家提了個問題："如何在一個以System身份運行的.NET程式（Windows Services）中，以其它活動的用戶身份啟動可互動式進程（桌面應用程式、控制台程式、等帶有UI和互動式體驗的程式）"？ 我以前有過類似的需求，是在GitLab流水線中運行帶有UI的自動化測試程 ...
  • .NET 8 中的後臺服務：IHostedService 和 BackgroundService
    .Net 中提供了一系列的管理對象集合的類型，數組、可變列表、字典等。從類型安全上集合分為兩類，泛型集合 和 非泛型集合，傳統的非泛型集合存儲為Object，需要類型轉。而泛型集合提供了更好的性能、編譯時類型安全，推薦使用。 ...
  • 在Winform程式中動態繪製系統名稱，代替圖片硬編碼名稱
    在以前我做程式的時候，一般在登錄視窗裡面顯示程式名稱，登錄視窗一般設置一張背景圖片，由於程式的名稱一般都是確定的，所以也不存在太大的問題，不過如果客戶定製不同的系統的時候，需要使用Photoshop修改下圖層的文字，再生成圖片，然後替換一下也可以了。不過本著減少客戶使用繁瑣性，也可以使用空白名稱的通... ...
  • 聊一聊 Monitor.Wait 和 Pulse 的底層玩法
    一：背景 1. 講故事 在dump分析的過程中經常會看到很多線程卡在Monitor.Wait方法上，曾經也有不少人問我為什麼用 !syncblk 看不到 Monitor.Wait 上的鎖信息，剛好昨天有時間我就來研究一下。 二：Monitor.Wait 底層怎麼玩的 1. 案例演示 為了方便講述，先 ...
  • .NET-9-電腦思想-構建器模式(Builder Pattern)
    目錄前言學習參考過程總結: 前言 做個自由仔。 學習參考 ChatGpt; https://www.cnblogs.com/zhili/p/DesignPatternSummery.html(大佬的，看了好多次) 過程 原由： 一開始只是想查查鏈式調用原理，以為是要繼承什麼介面,實現什麼方法才可以實 ...
所有分類