VUE3照本宣科——应用实例API与setup

VUE3照本宣科——应用实例API与setup

  • 前言
  • 一、应用实例API
    • 1.createApp()
    • 2.app.use()
    • 3.app.mount()
  • 二、setup


前言

👨‍💻👨‍🌾📝记录学习成果,以便温故而知新

“VUE3照本宣科”是指照着中文官网和菜鸟教程这两个“本”来学习一下VUE3。以前也学过VUE2,当时只再gitee留下一些代码,却没有记录学习的心得体会,有时也免不了会追忆一下。

以后出现“中文官网”不做特殊说明就是指:https://cn.vuejs.org/;菜鸟教程就是指:https://www.runoob.com/vue3/vue3-tutorial.html


一、应用实例API

中文文档中应用实例API 有很多,本文选择前文所述的“zbxk”项目中默认代码中出现的API介绍。

前文讲过“index.html”是前端应用的入口,
在这里插入图片描述首先能看到的是一个ID为app的div,这是SPA渲染的根;然后看到的是引入了src目录下的“main.js”。
接着看main.js,如图:
在这里插入图片描述
从截图中可以看到createApp() 、app.use() 及app.mount() 3个应用实例API,中文文档实际上有一堆的应用实例API,但是zbxk项目中没有出现,所以不做介绍。有需要深入了解的请参看应用实例 API 。

1.createApp()

功能是创建一个应用实例。

function createApp(rootComponent: Component, rootProps?: object): App
第一个参数是根组件。第二个参数可选,它是要传递给根组件的 props。

项目中的代码:

const app = createApp(App)

是用组件App创建应用app,而组件App是整个项目的父组件

2.app.use()

功能是安装一个插件。

interface App {
use(plugin: Plugin, …options: any[]): this
}
第一个参数应是插件本身,可选的第二个参数是要传递给插件的选项。
插件可以是一个带 install() 方法的对象,亦或直接是一个将被用作 install() 方法的函数。插件选项 (app.use() 的第二个参数) 将会传递给插件的 install() 方法。
若 app.use() 对同一个插件多次调用,该插件只会被安装一次。

项目中的代码:

app.use(createPinia())
app.use(router)

安装了2个插件,分别是状态管理器与路由。

3.app.mount()

功能是将应用实例挂载在一个容器元素中。

参数可以是一个实际的 DOM 元素或一个 CSS 选择器 (使用第一个匹配到的元素)。返回根组件的实例。
如果该组件有模板或定义了渲染函数,它将替换容器内所有现存的 DOM 节点。否则在运行时编译器可用的情况下,容器元素的 innerHTML 将被用作模板。
对于每个应用实例,mount() 仅能调用一次。

项目中的代码:

app.mount('#app')

是把新建的实例app挂载到ID为app的div上。有时也会说成渲染到ID为app的div上,所表达的是一个意思。

二、setup

setup() 钩子是在组件中使用组合式 API 的入口,通常只在以下情况下使用:

1.需要在非单文件组件中使用组合式 API 时。
2.需要在基于选项式 API 的组件中集成基于组合式 API 的代码时。

对于结合单文件组件使用的组合式 API,推荐通过 <script setup> 以获得更加简洁及符合人体工程学的语法。

所以本系列如果不做特别说明,都是尽量使用<script setup>

在src/view目录下AboutView.vue文件添加如下代码:

<script>
export default {setup(props, context) {// 透传 Attributes(非响应式的对象,等价于 $attrs)console.log(context.attrs)// 插槽(非响应式的对象,等价于 $slots)console.log(context.slots)// 触发事件(函数,等价于 $emit)console.log(context.emit)// 暴露公共属性(函数)console.log(context.expose)}
}
</script>

来看一下setup() 钩子的效果。
运行效果如图:
在这里插入图片描述

setup 函数的第一个参数是组件的 props。和标准的组件一致,一个 setup 函数的 props 是响应式的,并且会在传入新的 props 时同步更新。
setup 函数的第二个参数是一个 Setup 上下文对象。上下文对象暴露了其他一些在 setup 中可能会用到的值。

setup() 中需要介绍的内容内容还有一些,zbxk项目没有现成代码,所以就放到后续来介绍。

setup() 请参看https://cn.vuejs.org/api/composition-api-setup.html
<script setup> 请参看https://cn.vuejs.org/api/sfc-script-setup.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/93203.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Multiple CORS header ‘Access-Control-Allow-Origin‘ not allowed

今天在修改天天生鲜超市项目的时候&#xff0c;因为使用了前后端分离模式&#xff0c;前端通过网关统一转发请求到后端服务&#xff0c;但是第一次使用就遇到了问题&#xff0c;比如跨域问题&#xff1a; 但是&#xff0c;其实网关里是有配置跨域的&#xff0c;只是忘了把前端项…

JavaSE | 初识Java(七) | 数组 (下)

Java 中提供了 java.util.Arrays 包 , 其中包含了一些操作数组的常用方法 代码实例&#xff1a; import java.util.Arrays int[] arr {1,2,3,4,5,6}; String newArr Arrays.toString(arr); System.out.println(newArr); // 执行结果 [1, 2, 3, 4, 5, 6] 数组拷贝 代码实例…

青云1000

青云1000帮助文档 注意事项&#xff01;&#xff01;&#xff01;&#xff01; type-c只用于数据传输不能供电DC供电和锂电池不能同时供电&#xff0c;会烧掉风扇正负级不要插反 账户密码 HwHiAiUser 密码Mind123 TypeC USB IP 192.168.2.2&#xff08;由原来192.168.1.2改…

mongodb、mysql、redis 区别

MongoDB、MySQL 和 Redis 是三种不同的数据库管理系统,它们在数据存储、访问模型和使用场景方面有一些显著的区别。 1. 数据存储模型: MongoDB:MongoDB 是一种文档数据库,它使用 BSON(Binary JSON)格式来存储数据。数据以文档的形式组织,每个文档可以有不同的字段,文档…

VRRP配置案例(路由走向分析,端口切换)

以下配置图为例 PC1的配置 acsw下行为access口&#xff0c;上行为trunk口&#xff0c; 将g0/0/3划分到vlan100中 <Huawei>sys Enter system view, return user view with CtrlZ. [Huawei]sysname acsw [acsw] Sep 11 2023 18:15:48-08:00 acsw DS/4/DATASYNC_CFGCHANGE:O…

Python 无废话-基础知识元组Tuple详讲

“元组 Tuple”是一个有序、不可变的序列集合&#xff0c;元组的元素可以包含任意类型的数据&#xff0c;如整数、浮点数、字符串等&#xff0c;用()表示&#xff0c;如下示例&#xff1a; 元组特征 1) 元组中的各个元素&#xff0c;可以具有不相同的数据类型&#xff0c;如 T…

python使用mitmproxy和mitmdump抓包在手机上抓包(三)

现在手机的使用率远超过电脑&#xff0c;所以这篇记录用mitmproxy抓手机包&#xff0c;实现手机流量监控。 环境&#xff1a;win10 64位&#xff0c;Python 3.10.4&#xff0c;雷电模拟器4.0.78&#xff0c;android版本7.1.2&#xff08;设置-拉至最底部-关于平板电脑&#xf…

Grander因果检验(格兰杰)原理+操作+解释

笔记来源&#xff1a; 1.【传送门】 2.【传送门】 前沿原理介绍 Grander因果检验是一种分析时间序列数据因果关系的方法。 基本思想在于&#xff0c;在控制Y的滞后项 (过去值) 的情况下&#xff0c;如果X的滞后项仍然有助于解释Y的当期值的变动&#xff0c;则认为 X对 Y产生…

IDEA2023 常用配置(JDK/系统设置等常用配置)

目录 一、JDK及编译目录设置 1 项目的JDK设置 2 out目录和编译版本 二、相关详细设置 1 打开详细配置界面 1、显示工具栏 2、默认启动项目配置 3、取消自动更新 2 设置整体主题 1、选择主题 2、设置菜单和窗口字体和大小 3、设置IDEA背景图 3 设置编辑器主题样式…

Office 2021 小型企业版商用办公软件评测:提升工作效率与协作能力的专业利器

作为一名软件评测人员&#xff0c;我将为您带来一篇关于 Office 2021 小型企业版商用办公软件的评测文章。在这篇评测中&#xff0c;我将从实用性、使用场景、优点和缺点等多个方面对该软件进行客观分析&#xff0c;在专业角度为您揭示它的真正实力和潜力。 一、实用性&#xf…

家用无线路由器如何用网线桥接解决有些房间无线信号覆盖不好的问题(低成本)

环境 光猫ZXHN F6600U 水星MW325R 无线百兆路由器 100M宽带&#xff0c;2.4G无线网络 苹果手机 安卓平板电脑 三室一厅94平 问题描述 家用无线路由器如何用网线桥接解决有些房间无线信号不好问题低成本解决&#xff0c;无线覆盖和漫游 主路由器用的运营商的光猫自带无…

MATLAB算法实战应用案例精讲-【优化算法】抗冠状病毒优化算法(ACVO)(附MATLAB代码实现)

前言 (ACVO)算法是一种多智能体策略,其中每个智能体都是一个人,通过观察控制协议试图保持健康并减缓 COVID-19 的传播。该算法由三个主要步骤组成:社交距离、隔离和隔离。在社交距离阶段,算法试图保持人与人之间的安全物理距离并限制密切接触。在隔离阶段,算法隔离疑似…

Gorsonpy的计算器

Gorsonpy的计算器 0.页面及功能展示1. PSP表格2.解题思路描述3.设计实现过程4.程序性能改进5.异常处理6.单元测试展示7.心路历程和收获 这个作业属于哪个课程https://bbs.csdn.net/forums/ssynkqtd-05这个作业要求在哪里https://bbs.csdn.net/topics/617294583这个作业的目标完…

docker基础学习

1. 安装docker #安装 yum 源 docker wget https://mirrors.aliyun.com/docker-ce/linux/centos/docker-ce.repo -O /etc/yum.repos.d/docker-ce.repo #安装 docker 此处安装的是18版本的&#xff0c;还有19,20等等更高版本 yum -y install docker-ce-18.06.1.ce-3.el7 #…

SVM(上):如何用一根棍子将蓝红两色球分开?

⭐️⭐️⭐️⭐️⭐️欢迎来到我的博客⭐️⭐️⭐️⭐️⭐️ 🐴作者:秋无之地 🐴简介:CSDN爬虫、后端、大数据领域创作者。目前从事python爬虫、后端和大数据等相关工作,主要擅长领域有:爬虫、后端、大数据开发、数据分析等。 🐴欢迎小伙伴们点赞👍🏻、收藏⭐️、…

Config

title: “Config” createTime: 2022-01-04T17:12:4708:00 updateTime: 2022-01-04T17:12:4708:00 draft: false author: “name” tags: [“config”] categories: [“docker”] description: “docker run的相关配置文件” daemon.json {"api-cors-header":"…

软考 系统架构设计师系列知识点之软件架构风格(1)

这个十一注定是一个不能放松、保持“紧”的十一。由于报名了全国计算机技术与软件专业技术资格&#xff08;水平&#xff09;考试&#xff0c;11月4号就要考试&#xff0c;因此8天长假绝不能荒废&#xff0c;必须要好好利用起来。现在将各个核心知识点一一进行提炼并做记录。 所…

〔024〕Stable Diffusion 之 模型训练 篇

✨ 目录 🎈 训练集准备🎈 训练集预处理🎈 数据清洗🎈 下载训练源码🎈 训练文件配置🎈 脚本运行🎈 实战测试🎈 训练集准备 声明: 该文中所涉及到的女神图片均来自于网络,仅用作技术教程演示,图片已码一般同一个训练集需要准备 20~40 张不同角度的照片,当然可…

《XSS-Labs》01. Level 1~10

XSS-Labs 索引Level-1题解 Level-2题解 Level-3题解总结 Level-4题解 Level-5题解总结 Level-6题解 Level-7题解 Level-8题解 Level-9题解 Level-10题解 靶场部署在 VMware - Win7。 靶场地址&#xff1a;https://github.com/do0dl3/xss-labs 只要手动注入恶意 JavaScript 脚本…

一文拿捏基于redis的分布式锁、lua、分布式性能提升

1.分布式锁 jdk的锁&#xff1a; 1、显示锁&#xff1a;Lock 2、隐式锁&#xff1a;synchronized 使用jdk锁保证线程的安全性要求&#xff1a;要求多个线程必须运行在同一个jvm中 但现在的系统基本都是分布式部署的&#xff0c;一个应用会被部署到多台服务器上&#xff0c;s…