Vue学习计划-Vue3--核心语法(一)OptionsAPI、CompositionAPI与setup

1. OptionsAPICompositionAPI
  • Vue2API设计是Options(配置)风格的
  • Vue3API设计是Composition(组合)风格的

Options API的弊端:
Options类型的API,数据、方法、计算属性等,是分散在:datamethodscomputed中的,若想新增或者修改一个需求,就需要分别修改:datamothodscomputed,不便于维护和复用
在这里插入图片描述在这里插入图片描述

Composition API的优势:
可以用函数的方式,更加优雅的组织代码,让相关公告的代码更加有序的组织在一起
在这里插入图片描述
在这里插入图片描述
说明:以上四张动图原创作者:大帅老猿

2. setup
  1. 概述:
    setupVue3中一个新的配置项,值是一个函数,它是Composition API"表演的舞台",组件中所用到的:数据、方法、计算属性、监视…等等,均配置在setup
  2. 特点:
    1. setup函数返回的对象中的内容,可直接在模板中使用
    2. setup中访问thisundefined
    3. setup函数会在beforeCreate之前调用,它是"领先"所有钩子执行的
  3. 注意:
  1. 选项式写法和setup混写的话:datamethods等中可以访问setup中定义的数据,但是setup中不能访问data等中定义的数据
  1. 示例:

    1. App.vue
      在这里插入图片描述

    2. Person.vue
      在这里插入图片描述

  2. setup语法糖

    1. Person.vue
      在这里插入图片描述

    2. 浏览器效果
      在这里插入图片描述

    注意哦?我们是在Person.vue组件中写的代码,通常Person也就是我们的组件名称。但是不排除我们有时候组件名称与组件文件名不一致,需要我们自定义组件名称,此时呢,我们需要在<script lang="ts" setup name="Person234">标签中通过name定义组件名称,单纯的定义名称可以看到效果图中,vue-tools中还是Person,所以我们要怎么使name生效呢?
    3. 安装依赖npm i vite-plugin-vue-setup-extend -D或者yarn add vite-plugin-vue-setup-extend
    4. vite.config.ts添加配置
    在这里插入图片描述

    1. 重启项目,打开浏览器,重新打开控制台,组件名称name就起效果了
      在这里插入图片描述

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

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

相关文章

【操作系统xv6】学习记录2 -RISC-V Architecture

说明&#xff1a;看完这节&#xff0c;不会让你称为汇编程序员&#xff0c;知识操作系统的前置。 ref&#xff1a;https://binhack.readthedocs.io/zh/latest/assembly/mips.html https://www.bilibili.com/video/BV1w94y1a7i8/?p7 MIPS MIPS的意思是 “无内部互锁流水级的微…

Maple 2021安装包下载及安装教程

Maple 2021下载链接&#xff1a;https://docs.qq.com/doc/DUk9MQ1BPRHRYWU9s 1.鼠标右键解压到“Maple 2021” 2.选中Setup&#xff0c;鼠标右击选择“以管理员身份运行” 3.点击“Next” 4.选择I accept the agreement&#xff0c;点击“Next” 5.选择软件安装路径&#xff0c…

YOLOv8-Seg改进:Backbone改进 | 支持restnet50和restnet101

🚀🚀🚀本文改进: 将restnet50和restnet101作为backbone引入到YOLOv8-seg,下表为参数量和计算量的对比 layersparametersgradientsGFLOPsyolov8m-seg3312724022727240211

数据库系统原理例题之——数据管理技术的发展

数据管理技术的发展 第八章 数据管理技术的发展【例题】一 、单选题二 、填空题【答案&解析】一、单选题二、填空题【延伸知识点】【延伸知识点答案&解析】第八章 数据管理技术的发展 【例题】 一 、单选题 69.由数据结构 、关系操作和数据完整性三部分组成的是( ) …

IDEA JAVA Spring Boot运行Hello World(1.8)

参考资料&#xff1a; Spring Boot运行Hello World - 知乎https://blog.csdn.net/weixin_44005516/article/details/108293228(解决bug)SpringBoot入门第一章&#xff1a;Hello World-java教程-PHP中文网 (仅参考如何运行程序)java 8安装教程 java 8安装教程_java8安装-CSDN博…

uView Button 按钮

该组件内部实现以uni-appbutton组件为基础&#xff0c;进行二次封装&#xff0c;主要区别在于&#xff1a; 按钮type值有更多的主题颜色按钮size值有更多的尺寸可选 注意 此组件内部使用uni-appbutton组件为基础&#xff0c;除了开头中所说的增加的功能&#xff0c;另外暴露…

力扣:763. 划分字母区间(贪心,哈希)

题目&#xff1a; 给你一个字符串 s 。我们要把这个字符串划分为尽可能多的片段&#xff0c;同一字母最多出现在一个片段中。 注意&#xff0c;划分结果需要满足&#xff1a;将所有划分结果按顺序连接&#xff0c;得到的字符串仍然是 s 。 返回一个表示每个字符串片段的长度…

SpringBoot集成MQTT协议

简介 MQTT 可以被解释为一种低开销&#xff0c;低带宽占用的即时通讯协议&#xff0c;可以用较少的代码和带宽为远程设备连接提供实时可靠的消息服务&#xff0c;它适用于硬件性能低下的远程设备以及网络状况糟糕的环境下&#xff0c;因此 MQTT 协议在 IoT&#xff08;Interne…

1月3日代码随想录反转二叉树

226翻转二叉树 给你一棵二叉树的根节点 root &#xff0c;翻转这棵二叉树&#xff0c;并返回其根节点。 示例 1&#xff1a; 输入&#xff1a;root [4,2,7,1,3,6,9] 输出&#xff1a;[4,7,2,9,6,3,1]示例 2&#xff1a; 输入&#xff1a;root [2,1,3] 输出&#xff1a;[2,3,…

Java---- 静态内部类与非静态内部类的区别

在面试中回答的很不全&#xff0c;所以再此做一个总结。 1 static 静态修饰符 在程序中任何变量或者代码都是在编译时由系统自动分配内存来存储的。 static修饰表示静态的&#xff0c;在类加载时JVM会把它放到方法区&#xff0c;被本类以及本类中所有实例所公用。在编译后所分…

原生JS做别踩白块游戏

思路 创建初始一个按钮并为他添加点击监听开始创建随机方块&#xff0c;并样式_box.offsetTop speed px结合setInterval使得方块不断下移创建和删除方块的原则&#xff1a;box.offsetTop>0&#xff08;可视区上部没有方块了&#xff09;时候需要创建一行方块&#xff0c;…

江西速欣商务咨询有限公司:深度解析停息挂账,助您财务重启

停息挂账问题可能对个人或企业财务产生严重影响&#xff0c;但江西速欣商务咨询有限公司以其深度解析停息挂账的专业能力&#xff0c;致力于助您重新启动财务&#xff0c;实现财务的良性发展。 专业团队&#xff0c;深度解析挂账难题 速欣商务咨询拥有一支专业团队&#xff0c…

域名授权验证系统PHP源码,盗版追踪、双重授权和在线加密功能,附带安装教程

源码介绍 PHP域名授权验证系统是一个功能强大的系统&#xff0c;提供了多项功能来保护你的域名和软件的合法性。它包括盗版追踪、域名IP双重授权、在线加密等功能&#xff0c;同时还提供了PHP授权验证更新系统的完整版&#xff0c;方便你进行一键更新和生成自助授权。 盗版追…

【谷歌云】注册谷歌云 创建Compute Engine

文章目录 一、Google Cloud注册1.1 账号信息1.2 付款信息验证1.3 验证成功 二、Compute Engine创建2.1 启动Compute Engine API2.2 创建实例2.3 新建虚拟机实例2.4 等待实例创建完成2.5 查看虚拟机配置信息2.6 创建防火墙规则2.7 SSH远程连接虚拟机 三、参考链接 一、Google Cl…

ChatGPT 4.0真的值得花钱买入吗?

性能提升&#xff1a; ChatGPT 4.0的推出不仅意味着更先进的技术&#xff0c;还代表着更强大的性能。相较于3.5&#xff0c;4.0在处理任务时更为高效&#xff0c;响应更迅速。 更智能的理解&#xff1a; 随着版本的升级&#xff0c;ChatGPT 4.0对语境的理解能力得到了进一步的…

集群部署篇--Redis 集群动态伸缩

文章目录 前言一、redis 节点的添加1.1 redis 的实例部署&#xff1a;1.2 redis 节点添加&#xff1a;1.3 槽位分配&#xff1a;1.4 添加从节点&#xff1a; 二、redis 节点的减少2.1 移除主节点2.1.1 迁移槽位2.1.1 删除节点&#xff1a; 三、redis 删除节点的重新加入3.1 加入…

hibernate入门笔记

如何使用 导入依赖 <dependencies><dependency><groupId>mysql</groupId><artifactId>mysql-connector-java</artifactId><version>8.0.19</version></dependency><dependency><groupId>org.hibernate<…

odoo17 | 用户界面的基本交互

前言 现在我们已经创建了我们的新模型及其 相应的访问权限&#xff0c;是时候了 与用户界面交互。 在本章结束时&#xff0c;我们将创建几个菜单以访问默认列表 和窗体视图。 数据文件 &#xff08;XML&#xff09; Odoo在很大程度上是数据驱动的&#xff0c;因此模块定义的…

深度学习MLP_实战演练使用感知机用于感情识别_keras

目录 &#xff08;1&#xff09;why deep learning is game changing?&#xff08;2&#xff09;it all started with a neuron&#xff08;3&#xff09;Perceptron&#xff08;4&#xff09;Perceptron for Binary Classification&#xff08;5&#xff09;put it all toget…

跨年烟花-Html5实现_附完整源码【可直接运行】

文章目录 &#x1f37b;前言&#x1f538;目录结构⚫完整源码&#x1f535;源码分析&#x1f4ae;注意事项 &#x1f488;总结 &#x1f37b;前言 随着科技的进步和互联网的普及&#xff0c;人们对于跨年庆祝的方式也在不断变化。传统的烟花燃放虽然美丽&#xff0c;但存在环境…