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. 組件的數據傳遞

組件之間的數據傳遞主要通過propsemit實現。

Props:用於父組件向子組件傳遞數據。子組件可以通過defineComponentprops選項聲明接收的數據。

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-bindv-bind:key用於綁定列表元素的唯一標識,v-bind:class用於動態綁定CSS類。
  • v-model:用於數據雙向綁定,v-model:value綁定數據,v-model:expression用於計算屬性。
  • v-onv-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屬性的noneblock來切換可見性。

6. 計算屬性與偵聽器

  • 計算屬性data對象中的函數,當依賴的propsdata屬性改變時,計算屬性會自動重新計算。
  • 偵聽器watch對象,監聽數據的變化,當數據變化時執行回調。
data() {
return {
count: 0
}
},
computed: {
formattedCount() {
return this.count.toLocaleString();
}
},
watch: {
count(newCount) {
console.log('Count has changed:', newCount);
}
}

7. 條件渲染與列表渲染

  • 條件渲染:v-ifv-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.numberv-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 MasteryVue Mastery提供了許多免費的 Vue 3 教程視頻,適合初學者和進階開發者。
  3. Vue SchoolVue 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 使用refreactive函數來創建響應式數據。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安裝weblogic 1、配置java環境weblogic運行依賴java環境,所以第一步先配置java環境上傳、解壓jdk安裝包[root@bogon ~]# rz -be[root@bogon ~]# tar -zxvf jdk1.8.tar.gz 配置java環境變數[root@ ...
  • 背景 根據orangepi zero2用戶手冊說明,linux5.13內核不能使用 modprobe fbtft_device 驅動spi lcd 查看linux內核源碼提交記錄,發現在v5.4-rc3中刪除了fbtft_device.c文件 commit如下 staging/fbtft: Remo ...
  • 一、卸載mariadb的rpm包 1、首先,你需要找出已安裝的MariaDB包的具體名稱。可以使用以下命令列出所有已安裝的MariaDB包: rpm -qa | grep mariadb 2、刪除命令(安裝mysql不一定需要卸載)yum -y remove +【上圖的文件名】或者rpm -e -- ...
  • 前言 應用中的信息傳遞是為了實現各種功能和交互。信息傳遞可以幫助用戶和應用之間進行有效的溝通和交流。通過信息傳遞,應用可以向用戶傳遞重要的消息、通知和提示,以提供及時的反饋和指導。同時,用戶也可以通過信息傳遞嚮應用發送指令、請求和反饋,以實現個性化的需求和操作。 信息傳遞還可以幫助應用之間實現數 ...
  • Symbol 引用 iconfont icon圖標庫 Symbol 引用 這是一種全新的使用方式,應該說這才是未來的主流,也是平臺目前推薦的用法。相關介紹可以參考這篇文章 這種用法其實是做了一個 SVG 的集合,與另外兩種相比具有如下特點: 支持多色圖標了,不再受單色限制。 通過一些技巧,支持像字體 ...
  • XML中的字元串數據類型表示字元序列,包括換行、回車和製表符。處理器不修改值。`normalizedString`去除這些特殊字元,`token`則進一步移除前導和尾隨空格及多餘空格。字元串類型可使用枚舉、長度等限制。`date`和`dateTime`數據類型表示日期和時間,`duration`表示... ...
  • 一、是什麼 HMR全稱 Hot Module Replacement,可以理解為模塊熱替換,指在應用程式運行過程中,替換、添加、刪除模塊,而無需重新刷新整個應用 例如,我們在應用運行過程中修改了某個模塊,通過自動刷新會導致整個應用的整體刷新,那頁面中的狀態信息都會丟失 如果使用的是 HMR,就可以實 ...
  • theme: nico 寫在前面 主頁有更多其他篇章的方法,歡迎訪問查看。 本篇我們介紹radash中對象相關方法的使用和源碼解析。 assign:遞歸合併兩個對象 使用說明 功能說明:類似於 JavaScript 的 Object.assign 方法,用於將 override 對象的屬性和值複製到 ...
一周排行
    -Advertisement-
    Play Games
  • 通過WPF的按鈕、文本輸入框實現了一個簡單的SpinBox數字輸入用戶組件並可以通過數據綁定數值和步長。本文中介紹了通過Xaml代碼實現自定義組件的佈局,依賴屬性的定義和使用等知識點。 ...
  • 以前,我看到一個朋友在對一個系統做初始化的時候,通過一組魔幻般的按鍵,調出來一個隱藏的系統設置界面,這個界面在常規的菜單或者工具欄是看不到的,因為它是一個後臺設置的關鍵界面,不公開,同時避免常規用戶的誤操作,它是作為一個超級管理員的入口功能,這個是很不錯的思路。其實Winform做這樣的處理也是很容... ...
  • 一:背景 1. 講故事 前些天有位朋友找到我,說他的程式每次關閉時就會自動崩潰,一直找不到原因讓我幫忙看一下怎麼回事,這位朋友應該是第二次找我了,分析了下 dump 還是挺經典的,拿出來給大家分享一下吧。 二:WinDbg 分析 1. 為什麼會崩潰 找崩潰原因比較簡單,用 !analyze -v 命 ...
  • 在一些報表模塊中,需要我們根據用戶操作的名稱,來動態根據人員姓名,更新報表的簽名圖片,也就是電子手寫簽名效果,本篇隨筆介紹一下使用FastReport報表動態更新人員簽名圖片。 ...
  • 最新內容優先發佈於個人博客:小虎技術分享站,隨後逐步搬運到博客園。 創作不易,如果覺得有用請在Github上為博主點亮一顆小星星吧! 博主開始學習編程於11年前,年少時還只會使用cin 和cout ,給單片機點點燈。那時候,類似async/await 和future/promise 模型的認知還不是 ...
  • 之前在阿裡雲ECS 99元/年的活動實例上搭建了一個測試用的MINIO服務,以前都是直接當基礎設施來使用的,這次準備自己學一下S3相容API相關的對象存儲開發,因此有了這個小工具。目前僅包含上傳功能,後續計劃開發一個類似圖床的對象存儲應用。 ...
  • 目錄簡介快速入門安裝 NuGet 包實體類User資料庫類DbFactory增刪改查InsertSelectUpdateDelete總結 簡介 NPoco 是 PetaPoco 的一個分支,具有一些額外的功能,截至現在 github 星數 839。NPoco 中文資料沒多少,我是被博客園群友推薦的, ...
  • 前言 前面使用 Admin.Core 的代碼生成器生成了通用代碼生成器的基礎模塊 分組,模板,項目,項目模型,項目欄位的基礎功能,本篇繼續完善,實現最核心的模板生成功能,並提供生成預覽及代碼文件壓縮下載 準備 首先清楚幾個模塊的關係,如何使用,簡單畫一個流程圖 前面完成了基礎的模板組,模板管理,項目 ...
  • 假設需要實現一個圖標和文本結合的按鈕 ,普通做法是 直接重寫該按鈕的模板; 如果想作為通用的呢? 兩種做法: 附加屬性 自定義控制項 推薦使用附加屬性的形式 第一種:附加屬性 創建Button的附加屬性 ButtonExtensions 1 public static class ButtonExte ...
  • 在C#中,委托是一種引用類型的數據類型,允許我們封裝方法的引用。通過使用委托,我們可以將方法作為參數傳遞給其他方法,或者將多個方法組合在一起,從而實現更靈活的編程模式。委托類似於函數指針,但提供了類型安全和垃圾回收等現代語言特性。 基本概念 定義委托 定義委托需要指定它所代表的方法的原型,包括返回類 ...