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运行多个开发者…