Vue3 學習教程,從入門到精通,Vue 3 全局 API 語法知識點及案例詳解(32)

Vue 3 全局 API 語法知識點及案例詳解

Vue 3 提供了豐富的全局 API,用于創建應用實例、注冊全局組件、指令、插件等。以下將詳細介紹 Vue 3 的主要全局 API,并結合詳細的案例代碼進行說明。每個案例代碼都包含中文注釋,幫助初學者更好地理解。

目錄

  1. createApp
  2. app.mount()
  3. app.unmount()
  4. app.component()
  5. app.directive()
  6. app.use()
  7. app.config.globalProperties
  8. Vue.nextTick()
  9. Vue.set() 和 Vue.delete()
  10. Vue.computed()
  11. Vue.observable()
  12. Vue.mixin()
  13. Vue.version

1. createApp

語法

import { createApp } from 'vue';
const app = createApp(rootComponent, rootProps);

說明

createApp 用于創建一個新的 Vue 應用實例。它接受一個根組件和一個可選的根 props 對象作為參數。

案例代碼

<!-- index.html -->
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>Vue 3 createApp 示例</title><script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
</head>
<body><div id="app"></div><script>// 導入 createAppconst { createApp } = Vue;// 定義根組件const App = {template: `<div><h1>{{ message }}</h1><button @click="updateMessage">點擊更新消息</button></div>`,data() {return {message: 'Hello, Vue 3!'};},methods: {updateMessage() {this.message = '消息已更新!';}}};// 創建 Vue 應用實例const app = createApp(App, { /* rootProps */ });// 掛載應用app.mount('#app');</script>
</body>
</html>

解釋

  • 導入 createApp: 從 Vue 中導入 createApp 函數。
  • 定義根組件: 使用一個包含模板、數據和方法的對象定義根組件。
  • 創建應用實例: 使用 createApp 創建一個新的 Vue 應用實例,并傳入根組件。
  • 掛載應用: 使用 app.mount('#app') 將應用掛載到頁面的 #app 元素上。

2. app.mount()

語法

app.mount('#app');

說明

app.mount() 用于將 Vue 應用掛載到一個 DOM 元素上。它接受一個選擇器字符串或一個實際的 DOM 元素作為參數。

案例代碼

(與 createApp 示例相同)

解釋

  • 掛載應用: app.mount('#app') 將 Vue 應用掛載到 <div id="app"></div> 上。

3. app.unmount()

語法

app.unmount();

說明

app.unmount() 用于卸載一個已掛載的 Vue 應用,銷毀所有相關的組件和事件監聽器。

案例代碼

<!-- index.html -->
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>Vue 3 app.unmount 示例</title><script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
</head>
<body><div id="app"></div><button id="unmount">卸載應用</button><script>const { createApp } = Vue;const App = {template: `<div><h1>{{ message }}</h1><button @click="updateMessage">點擊更新消息</button></div>`,data() {return {message: 'Hello, Vue 3!'};},methods: {updateMessage() {this.message = '消息已更新!';}}};const app = createApp(App);app.mount('#app');// 卸載應用按鈕點擊事件document.getElementById('unmount').addEventListener('click', () => {app.unmount();alert('Vue 應用已卸載');});</script>
</body>
</html>

解釋

  • 卸載應用: 點擊“卸載應用”按鈕后,調用 app.unmount() 卸載 Vue 應用,銷毀所有組件和事件監聽器。

4. app.component()

語法

app.component('組件名', 組件選項);

說明

app.component() 用于全局注冊一個組件,使其在應用的任何地方都可以使用。

案例代碼

<!-- index.html -->
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>Vue 3 app.component 示例</title><script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
</head>
<body><div id="app"><my-button></my-button></div><script>const { createApp } = Vue;// 定義全局組件 MyButtonconst MyButton = {template: `<button @click="handleClick">點擊我</button>`,methods: {handleClick() {alert('按鈕被點擊了!');}}};// 創建應用并注冊全局組件const app = createApp({template: `<div><h1>全局組件示例</h1><my-button></my-button></div>`});app.component('my-button', MyButton);app.mount('#app');</script>
</body>
</html>

解釋

  • 定義全局組件: 使用 app.component('my-button', MyButton) 全局注冊組件 MyButton
  • 使用全局組件: 在根組件的模板中使用 <my-button></my-button>,無需額外導入。

5. app.directive()

語法

app.directive('指令名', 指令選項);

說明

app.directive() 用于全局注冊一個自定義指令,使其在應用的任何地方都可以使用。

案例代碼

<!-- index.html -->
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>Vue 3 app.directive 示例</title><script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script><style>.focused {border: 2px solid blue;}</style>
</head>
<body><div id="app"><input v-focus type="text" placeholder="請輸入內容"></div><script>const { createApp } = Vue;// 定義全局指令 focusconst app = createApp({data() {return {message: 'Hello, Vue 3!'};}});app.directive('focus', {mounted(el) {el.focus();},updated(el) {el.focus();}});app.mount('#app');</script>
</body>
</html>

解釋

  • 定義全局指令: 使用 app.directive('focus', { ... }) 全局注冊指令 v-focus
  • 指令邏輯: mountedupdated 鉤子中調用 el.focus(),使元素獲得焦點。
  • 使用指令: 在模板中使用 v-focus 指令,元素加載時會自動獲得焦點。

6. app.use()

語法

app.use(plugin, options);

說明

app.use() 用于安裝 Vue 插件。插件可以添加全局功能,如全局指令、組件、混入等。

案例代碼

<!-- index.html -->
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>Vue 3 app.use 示例</title><script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script><script src="https://unpkg.com/vue-router@4"></script>
</head>
<body><div id="app"></div><script>const { createApp, ref } = Vue;const { createRouter, createWebHistory } = VueRouter;// 定義插件const myPlugin = {install(app, options) {app.config.globalProperties.$myMethod = () => {console.log('插件方法被調用');};}};// 創建應用并使用插件const app = createApp({template: `<div><h1>{{ message }}</h1><button @click="invokePlugin">點擊調用插件方法</button></div>`,data() {return {message: 'Hello, Vue 3!'};},methods: {invokePlugin() {this.$myMethod();}}});app.use(myPlugin);app.mount('#app');</script>
</body>
</html>

解釋

  • 定義插件: 創建一個插件 myPlugin,在 install 方法中為 app.config.globalProperties 添加 $myMethod 方法。
  • 使用插件: 使用 app.use(myPlugin) 安裝插件。
  • 調用插件方法: 在組件的方法中通過 this.$myMethod() 調用插件中定義的方法。

7. app.config.globalProperties

語法

app.config.globalProperties.$propertyName = value;

說明

app.config.globalProperties 用于向 Vue 應用實例添加全局屬性,使其在所有組件中都可以訪問。

案例代碼

<!-- index.html -->
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>Vue 3 app.config.globalProperties 示例</title><script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
</head>
<body><div id="app"><h1>{{ $greeting }}</h1><button @click="showGreeting">點擊顯示問候語</button></div><script>const { createApp } = Vue;const app = createApp({data() {return {message: 'Hello, Vue 3!'};},methods: {showGreeting() {alert(this.$greeting);}}});// 添加全局屬性 $greetingapp.config.globalProperties.$greeting = '歡迎使用 Vue 3!';app.mount('#app');</script>
</body>
</html>

解釋

  • 添加全局屬性: 使用 app.config.globalProperties.$greeting = '歡迎使用 Vue 3!' 添加全局屬性 $greeting
  • 訪問全局屬性: 在組件中通過 this.$greeting 訪問全局屬性。

8. Vue.nextTick()

語法

Vue.nextTick(callback);

說明

Vue.nextTick() 接受一個回調函數,在下一次 DOM 更新循環之后執行該回調函數。常用于在數據變化后操作 DOM。

案例代碼

<!-- index.html -->
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>Vue 3 Vue.nextTick 示例</title><script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
</head>
<body><div id="app"><h1 ref="title">{{ message }}</h1><button @click="updateMessage">點擊更新消息</button></div><script>const { createApp, ref, nextTick } = Vue;const app = createApp({setup() {const message = ref('Hello, Vue 3!');const title = ref(null);const updateMessage = () => {message.value = '消息已更新!';nextTick(() => {console.log('DOM 已更新');console.log(title.value.innerText);});};return {message,updateMessage,title};}});app.mount('#app');</script>
</body>
</html>

解釋

  • 使用 nextTick: 在 updateMessage 方法中更新數據后,使用 nextTick 確保 DOM 已更新,然后進行后續操作,如訪問更新后的 DOM 內容。

9. Vue.set() 和 Vue.delete()

語法

Vue.set(target, propertyName/index, value);
Vue.delete(target, propertyName/index);

說明

Vue.set()Vue.delete() 用于向響應式對象中添加或刪除屬性,確保這些操作是響應式的。

案例代碼

<!-- index.html -->
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>Vue 3 Vue.set 和 Vue.delete 示例</title><script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
</head>
<body><div id="app"><h1>{{ user.name }}</h1><h2>{{ user.age }}</h2><button @click="addAge">添加年齡</button><button @click="removeAge">刪除年齡</button></div><script>const { createApp, reactive, Vue } = Vue;const app = createApp({data() {return {user: reactive({ name: '張三' })};},methods: {addAge() {Vue.set(this.user, 'age', 25);},removeAge() {Vue.delete(this.user, 'age');}}});app.mount('#app');</script>
</body>
</html>

解釋

  • 添加屬性: 使用 Vue.set(this.user, 'age', 25) 向響應式對象 user 中添加 age 屬性。
  • 刪除屬性: 使用 Vue.delete(this.user, 'age')user 中刪除 age 屬性。
  • 響應式更新: 這些操作確保 user 對象的變化是響應式的,視圖會自動更新。

10. Vue.computed()

語法

const computedProperty = computed(() => { /* 計算邏輯 */ });

說明

Vue.computed() 用于創建計算屬性,基于依賴進行緩存,只有在相關依賴發生變化時才會重新計算。

案例代碼

<!-- index.html -->
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>Vue 3 Vue.computed 示例</title><script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
</head>
<body><div id="app"><h1>{{ fullName }}</h1><button @click="changeName">更改名字</button></div><script>const { createApp, reactive, computed } = Vue;const app = createApp({setup() {const user = reactive({firstName: '李',lastName: '四'});const fullName = computed(() => {return `${user.firstName} ${user.lastName}`;});const changeName = () => {user.firstName = '王';};return {user,fullName,changeName};}});app.mount('#app');</script>
</body>
</html>

解釋

  • 定義計算屬性: 使用 computed 定義 fullName 計算屬性,基于 user.firstNameuser.lastName 計算。
  • 響應式更新: 當 user.firstNameuser.lastName 發生變化時,fullName 會自動更新。

11. Vue.observable()

語法

const observableObject = Vue.observable({ /* 對象 */ });

說明

Vue.observable() 用于將一個普通對象轉換為響應式對象,使其在 Vue 應用中具有響應式特性。

案例代碼

<!-- index.html -->
<!DOCTYPE html>
<html lang="zh-CN>
<head><meta charset="UTF-8"><title>Vue 3 Vue.observable 示例</title><script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
</head>
<body><div id="app"><h1>{{ state.count }}</h1><button @click="increment">點擊增加</button></div><script>const { createApp, Vue } = Vue;const state = Vue.observable({ count: 0 });const app = createApp({setup() {const increment = () => {state.count++;};return {state,increment};}});app.mount('#app');</script>
</body>
</html>

解釋

  • 創建響應式對象: 使用 Vue.observable({ count: 0 }) 創建一個響應式對象 state
  • 修改狀態: 通過 state.count++ 修改 count 的值,視圖會自動更新。

12. Vue.mixin()

語法

Vue.mixin(mixin);

說明

Vue.mixin() 用于全局混入一個對象,混入對象的選項會被合并到每個組件的選項中。

案例代碼

<!-- index.html -->
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>Vue 3 Vue.mixin 示例</title><script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
</head>
<body><div id="app"><h1>{{ message }}</h1><h2>{{ sharedData }}</h2></div><script>const { createApp, Vue } = Vue;// 定義混入對象const myMixin = {data() {return {sharedData: '這是混入的數據'};},created() {console.log('混入的 created 鉤子');}};const app = createApp({mixins: [myMixin],data() {return {message: 'Hello, Vue 3!'};},created() {console.log('組件的 created 鉤子');}});app.mount('#app');</script>
</body>
</html>

解釋

  • 定義混入對象: 使用 myMixin 定義一個包含 datacreated 鉤子的混入對象。
  • 使用混入: 在組件中通過 mixins: [myMixin] 使用混入對象。
  • 合并邏輯: 混入對象的 datacreated 鉤子會被合并到組件中,共享數據 sharedData 可以在組件中使用。

13. Vue.version

語法

console.log(Vue.version);

說明

Vue.version 返回當前 Vue 版本的字符串。

案例代碼

<!-- index.html -->
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>Vue 3 Vue.version 示例</title><script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
</head>
<body><div id="app"><h1>當前 Vue 版本: {{ version }}</h1></div><script>const { createApp, ref, Vue } = Vue;const app = createApp({setup() {const version = ref(Vue.version);return {version};}});app.mount('#app');</script>
</body>
</html>

解釋

  • 獲取版本號: 使用 Vue.version 獲取當前 Vue 版本,并將其賦值給 version 變量。
  • 顯示版本號: 在模板中顯示 version 的值。

總結

以上介紹了 Vue 3 的主要全局 API 及其用法。通過這些 API,開發者可以更高效地構建和管理 Vue 應用。理解并掌握這些全局 API 對于深入學習 Vue 3 是至關重要的。希望這些示例代碼和解釋能幫助你更好地理解 Vue 3 的全局 API。

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/pingmian/92516.shtml
繁體地址,請注明出處:http://hk.pswp.cn/pingmian/92516.shtml
英文地址,請注明出處:http://en.pswp.cn/pingmian/92516.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

UE5多人MOBA+GAS 41、制作一個飛彈,添加準心索敵

文章目錄添加新角色&#xff08;不寫了&#xff09;創建一個發射技能創建一個飛彈類添加擊中特效添加準星UI獲取瞄準目標添加新角色&#xff08;不寫了&#xff09; 將原本的機器人藍圖改為BP_PlayerCharacter&#xff0c;以此創建子藍圖 創建動畫藍圖模板&#xff08;具體就…

解決渲染抖動與滾動錨點定位不準確問題的方法與經驗分享

場景描述&#xff1a;React 虛擬列表&#xff08;Virtualized List&#xff09;是當我們在處理大列表時&#xff0c;為了提升性能而采用的一種技術。然而在實現過程中&#xff0c;可能會遇到渲染抖動問題以及滾動錨點定位不準確的問題。??解決方案&#xff1a;React虛擬列表實…

OpenAI 時隔多年再開源!GPT-OSS 120B/20B 發布,支持本地部署,消費級 GPU 即可運行

OpenAI 近期做出了一項令人矚目的戰略轉變&#xff1a;宣布推出兩款開放權重&#xff08;Open Weight&#xff09; 語言模型 GPT-OSS-120B 和 GPT-OSS-20B。這不僅是其自 GPT-2 之后首次開源模型&#xff0c;更關鍵的是&#xff0c;這兩款模型特別針對消費級硬件進行了深度優化…

MySQL高可用方案之MySQL Group Replication高可用架構搭建完全指南

MySQL Group Replication高可用架構搭建完全指南 前言 在當今互聯網應用中,數據庫高可用性已成為系統設計的核心需求。MySQL作為最流行的開源關系型數據庫之一,其高可用解決方案備受關注。MySQL Group Replication是MySQL官方推出的原生高可用解決方案,它基于Paxos協議實現…

網站SSL證書到期如何更換?簡單完整操作指南

----------------------------------------------------------------------------------------------- 這是我在我的網站中截取的文章&#xff0c;有更多的文章歡迎來訪問我自己的博客網站rn.berlinlian.cn&#xff0c;這里還有很多有關計算機的知識&#xff0c;歡迎進行留言或…

Spring Boot 開發三板斧:POM 依賴、注解與配置管理

引言 Spring Boot 是一個功能強大且廣受歡迎的框架&#xff0c;用于快速構建基于 Spring 的應用。它通過簡化配置和自動化管理&#xff0c;幫助開發者專注于業務邏輯的實現。然而&#xff0c;要想高效地開發 Spring Boot 應用&#xff0c;掌握以下三個關鍵點至關重要&#xff1…

kubernetes安裝搭建

個人博客站—運維鹿:http://www.kervin24.top/ CSDN博客—做個超努力的小奚&#xff1a; https://blog.csdn.net/qq_52914969?typeblog 一、kubernetes介紹 Kubernetes本質是一組服務器集群&#xff0c;它可以在集群的每個節點上運行特定的程序&#xff0c;來對節點中的容…

MySQL高可用方案之MySQL InnoDB Cluster高可用架構實戰指南:從零搭建到生產部署

MySQL InnoDB Cluster高可用架構實戰指南:從零搭建到生產部署 一、引言:為什么選擇MySQL InnoDB Cluster 在當今數據驅動的商業環境中,數據庫高可用性已成為企業IT基礎設施的核心需求。MySQL作為全球最受歡迎的開源關系型數據庫,其高可用解決方案備受關注。而MySQL InnoD…

祝融號無線電工作頻段

前面深入查證了旅行者1號的無線電工作頻段&#xff1a; 旅行者1號無線電工作頻段-CSDN博客 下面嘗試查證我國祝融號無線電工作頻段。 一、百度百科 來自百度百科&#xff1a; 我注意到一條關鍵信息&#xff1a; 這說明祝融號在國際上是有合作的&#xff0c;而不是我們國家單…

Kafka生產者相關原理

前言前面已經介紹了Kafka的架構知識并引出了Kafka的相關專業名稱進行解釋這次分享一下Kafka對生產者發送消息進行處理的運行機制和原理生產者發送消息兩種方式同步發送消息程序中線程執行完消息發送操作之后會等待Kafka的消息回應ack默認等待30秒沒有回應就會拋出異常等待時間和…

Python 獲取對象信息的所有方法

在 Python 里&#xff0c;我們經常需要檢查一個對象的類型、屬性、方法&#xff0c;甚至它的源碼。這對調試、學習和動態編程特別有用。今天我們就來聊聊獲取對象信息的常見方法&#xff0c;按由淺入深的順序來學習。 參考文章&#xff1a;Python 獲取對象信息 | 簡單一點學習…

vuhub Beelzebub靶場攻略

靶場下載&#xff1a; 下載地址&#xff1a;https://download.vulnhub.com/beelzebub/Beelzebub.zip 靶場攻略&#xff1a; 主機發現&#xff1a; nmap 192.168.163.1/24 端口掃描&#xff1a; nmap -p-65535 -A 192.168.163.152 發現沒有額外端口。 頁面掃描&#xff1…

開啟單片機

前言&#xff1a;為未來拼搏的第n天&#xff0c;從單片機開始。為什么要學習單片機呢&#xff0c;單片機的工作涉及范圍及其廣如&#xff1a;消費電子&#xff0c;游戲機音響&#xff1b;工業控制&#xff1a;機器人控制&#xff1b;醫療設備&#xff0c;通信設備&#xff0c;物…

人工智能系列(8)如何實現無監督學習聚類(使用競爭學習)?

案例&#xff1a;鳶尾花數據集的聚類一.聚類簡介神經網絡能夠從輸入數據中自動提取有意義的特征&#xff0c;而競爭學習規則使得單層神經網絡能夠根據相似度將輸入樣本進行聚類&#xff0c;每個聚類由一個輸出神經元代表并作為該類別的“原型”&#xff0c;從而實現對輸入模式的…

Windows安裝mamba全流程(全網最穩定最成功)

windows系統下安裝mamba會遇到各種各樣的問題。博主試了好幾天&#xff0c;把能踩的坑都踩了&#xff0c;總結出了在windows下安裝mamba的一套方法&#xff0c;已經給實驗室的windows服務器都裝上了。只要跟著我的流程走下來&#xff0c;大概率不會出問題&#xff0c;如果遇到其…

Autosar Dem配置-最大存儲的DTC信息個數配置-基于ETAS軟件

文章目錄 前言 Autosar Dem相關配置 ETAS工具中的配置 生成文件分析 測試驗證 總結 前言 診斷DTC開發中,會有故障快照和擴展數據的存儲需求,但由于控制器的可用存儲空間有限,所以無法存儲所有DTC的信息,這時就需要限制存儲的數量,本文介紹該參數在ETAS軟件中的配置。 Au…

【MySQL】EXISTS 與 NOT EXISTS 深度解析:從原理到實戰的完整指南

在復雜的業務查詢中&#xff0c;我們常常需要判斷“是否存在滿足某條件的記錄”或“找出不滿足某些條件的記錄”。這時&#xff0c;EXISTS 和 NOT EXISTS 子查詢便成為強大的工具。它們不僅邏輯清晰、語義明確&#xff0c;而且在某些場景下性能遠超 IN 或 JOIN。然而&#xff0…

面對信號在時頻平面打結,VNCMD分割算法深度解密

“ 信號迷宮中的破壁者&#xff1a;VNCMD如何分解糾纏的時空密碼&#xff1f;——從鯨歌到機械故障&#xff0c;寬帶信號分解新紀元。”01—痛點直擊&#xff1a;為什么傳統方法集體失效&#xff1f;2017年&#xff0c;上海交大團隊提出了一項突破性研究&#xff1a;變分非線性…

CSS優先級、HTTP響應狀態碼

CSS優先級 優先級&#xff1a;看CSS的來源、樣式引入方式、選擇器、源碼順序。 行內樣式/內聯樣式&#xff1a;直接在HTML元素的style屬性中編寫CSS樣式。這種方式適用于少量樣式的情況&#xff0c;但不推薦在大規模開發中使用&#xff0c;因為它會使HTML文件變得冗長和難以維…

項目一系列-第2章 Git版本控制

第2章 Git版本控制 2.1 Git概述 Git是什么&#xff1f;Git是一個分布式版本控制工具&#xff0c;于管理開發過程中的文件。 Git有哪些作用&#xff1f; 遠程備份&#xff1a;Git可以將本地代碼備份到遠程服務器&#xff0c;防止數據丟失。多人協作&#xff1a;Git運行多個開發者…