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 MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類