VUE3核心语法

在这里插入图片描述
在这里插入图片描述

💟💟前言

友友们大家好,我是你们的小王同学😗😗
今天给大家打来的是 VUE3核心语法
希望能给大家带来有用的知识
觉得小王写的不错的话麻烦动动小手 点赞👍 收藏⭐ 评论📄
小王的主页:小王同学🚗
小王的gitee:小王同学🏩🏩
小王的github:小王同学💦

OptionsAPI 与 CompositionAPI

  • vue2的API设计是Options(配置)风格的
  • vue3的API设计是Composition风格的

OptionsAPI的弊端

Options类型的API,数据,方法,计算属性等。是分散在data、
methods、computed中的,若想新增或者修改一个需求,就需要分别修改:data、methods、computed,不便与维修和复用!!

CompositionAPI的优势

可以用函数的方式,更加优雅的组织代码,让相关功能的代码更加有序的组织到一起。

setup概念

setup是vue3中一个新的配置项,值是一个函数,他是CompositionAPI
表演的舞台,组件中所用到的:数据、方法、计算属性、监视等等
均配置在setup

  • setup函数返回的对象中的内容,可直接在模版里使用
  • setup中访问this是undefined
  • setup函数会在beforeCreate前调用,它是领先所有钩子执行的

vue3是支持写多个根标签的
在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

vue2的data 跟method是选项式API

setup中的this是undefined!!

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

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

相关文章

数据结构习题--旋转链表

数据结构习题–旋转链表 给你一个链表的头节点 head ,旋转链表,将链表每个节点向右移动 k 个位置。注意这里的k可能超过链表的长度 方法:双指针 分析 旋转K次,我们其实就是相当于找到倒数第K个结点,让其成为头结点…

基于Springboot的考研资讯平台

基于SpringbootVue的考研资讯平台的设计与实现 开发语言:Java数据库:MySQL技术:SpringbootMybatis工具:IDEA、Maven、Navicat 系统展示 用户登录 首页 考研资讯 报考指南 资料信息 论坛信息 后台登录 考研资讯管理 学生管理 资…

Python重点数据结构基本用法

Python重点数据结构用法 运算符描述[] [:]下标&#xff0c;切片**指数~ -按位取反, 正负号* / % //乘&#xff0c;除&#xff0c;模&#xff0c;整除 -加&#xff0c;减>> <<右移&#xff0c;左移&按位与^ < < > >小于等于&#xff0c;小于&#…

微信公众号菜单管理接口开发

1、创建数据表 SET NAMES utf8mb4; SET FOREIGN_KEY_CHECKS = 0;-- ---------------------------- -- Table structure for wx_menu -- ---------------------------- DROP TABLE IF EXISTS `wx_menu`; CREATE TABLE `wx_menu` (`id` bigint(20) NOT NULL AUTO_INCREMENT COM…

学pyhton的第二十二天

原文链接&#xff1a;Python 图形化界面设计&#xff08;Tkinter&#xff09; - 简书 (jianshu.com) 相关博客链接 接第十八天Tkinter的内容&#xff1a; 单选按钮&#xff08;控件&#xff1a;Radiobutton&#xff09;&#xff1a; 除共有属性外&#xff0c;还具有显示文本…

数据结构 : 树的分类及在数据库索引中的运用

文章目录 一 &#xff1a;树的分类1、二叉树&#xff08;Binary Tree&#xff09;&#xff1a;2、二叉搜索树&#xff08;Binary Search Tree, BST&#xff09;&#xff1a;3、平衡二叉树&#xff1a;4、字典树&#xff08;Trie&#xff09;&#xff1a;5、多叉树&#xff08;M…

算法学习笔记Day9——动态规划基础篇

一、介绍 本文解决几个问题&#xff1a;动态规划是什么&#xff1f;解决动态规划问题有什么技巧&#xff1f;如何学习动态规划&#xff1f; 1. 动态规划问题的一般形式就是求最值。动态规划其实是运筹学的一种最优化方法&#xff0c;只不过在计算机问题上应用比较多&#xff…

opencv_17_翻转与旋转

一、图像翻转 1&#xff09;void flip_test(Mat& image); 2&#xff09;void ColorInvert::flip_test(Mat& image) { Mat dst; //flip(image, dst, 0); //上下翻转 flip(image, dst, 1); //左右翻转 // flip(image, dst, -1); //180度翻转 imsho…

OpenVINO安装教程 vcpkg版

通过 vcpkg 安装 OpenVINO™ Runtime 请注意&#xff0c;vcpkg 发行版&#xff1a; 仅提供 C/C API 不支持 NPU 推理 专用于所有主要操作系统的用户&#xff1a;Windows、Linux 和 macOS &#xff08;所有 x86_64 / ARM64 架构&#xff09; 系统要求处理器说明软件要求 完整…

B站美化插件,支持自定义,太酷辣~

大公司的软件和网站通常具有优雅的默认界面设计。 以国内二次元聚集地B站为例&#xff0c;可以说它的UI设计非常吸引人。与其他视频网站繁复的设计相比&#xff0c;B站的界面设计可以说是遥遥领先 然而&#xff0c;总有些人对默认的用户界面感到不满意&#xff0c;他们渴望尝试…

接口自动化测试框架

接口自动化测试框架&#xff1a;pythonunittest/pytestrequestsddtopenpyxlpymysqllogging 框架设计思路数据驱动结构分层&#xff08;可读性、可维护性、可扩展性&#xff09;数据驱动将维护数据与代码分离&#xff0c;接口调用行为一致&#xff0c;针对不同的参数组合驱动不同…

fiddler提示“The system proxy was changed.Click to reenable capturing.”的原因及解决办法

一、现象描述 运行fiddler时&#xff0c;提示“The system proxy was changed.Click to reenable capturing.”&#xff0c;即使点击了该提示&#xff0c;重新进行抓包&#xff0c;不一会儿&#xff0c;该提示又会出现&#xff0c;又不能进行抓包了。 二、解决方法 2.1 原因一&…

Java 高级面试问题及答案

Java 高级面试问题及答案 问题 1: 在 Java 中&#xff0c;什么是强引用、软引用、弱引用和虚引用&#xff1f;它们分别有什么用途&#xff1f; 探讨过程&#xff1a; 在Java中&#xff0c;对象的引用类型决定了垃圾回收器如何回收对象。强引用是最常见的&#xff0c;它阻止垃…

java 根据对象的boolean字段对集合进行排序

java 根据对象的boolean字段对集合进行排序 ‍ 需求大概如下&#xff1a; 把boolean为true的排序到前面,false排序到后面 ‍ 排序后, boolean为true的会在前面, 为false的会在后面 , isHasMaterial 为boolean类型 Data Builder public class MoguPoiBaseInfo {/*** 是否有…

输电线路的“天眼”:双目协同图像视频监测装置

在广袤的天地之间&#xff0c;纵横交错的输电线路如同血脉一般&#xff0c;为我们的生活输送着源源不断的电力。然而&#xff0c;这些“血脉”也常常面临着各种挑战&#xff0c;如外力破坏、恶劣天气等。为了守护这些重要的“生命线”&#xff0c;鼎信智慧研发了一款智能监控设…

LeetCode 1146. 快照数组【哈希表+二分查找】中等

本文属于「征服LeetCode」系列文章之一&#xff0c;这一系列正式开始于2021/08/12。由于LeetCode上部分题目有锁&#xff0c;本系列将至少持续到刷完所有无锁题之日为止&#xff1b;由于LeetCode还在不断地创建新题&#xff0c;本系列的终止日期可能是永远。在这一系列刷题文章…

云原生Kubernetes: K8S 1.29版本 部署GitLab

目录 一、实验 1.环境 2.搭建NFS 3.K8S 1.29版本 部署Redis 4.K8S 1.29版本 部署Postgresql 5.K8S 1.29版本 部署GitLab 6.K8S 部署istio微服务 7.K8S 部署ingress应用路由 二、问题 1.K8S部署gitlab报错 2.gitlab创建失败 3.生成网关资源报错 4.安装istio 报错 …

APP自定义身份证相机(Android +iOS)

基本上同时兼容安卓和苹果的插件都需要付费&#xff0c;这里我找了2个好用的免费插件 1.仅支持安卓&#xff1a;自定义身份证相机&#xff08;支持蒙版自定义&#xff09;&#xff0c;内置蒙版&#xff0c;照片预览&#xff0c;身份证裁剪 - DCloud 插件市场、 2.支持iOS(已测…

打水问题(贪心算法)

题目&#xff1a;有n个人排队到r个水龙头去打水&#xff0c;他们装满水桶的时间t1、t2………tn为整数且各不相等&#xff0c;应如何安排他们的打水顺序才能使他们总共花费的时间最少&#xff1f;通过键盘输入排队打水的人数以及每人打水的时间和水龙头数&#xff0c;使用贪心算…

泰迪智能科技受邀参加2024年粤港澳大湾区产教融合技能人才培养联盟理事会会议

4月24日下午&#xff0c;2024年粤港澳大湾区产教融合技能人才培养联盟&#xff08;以下简称联盟&#xff09;理事会会议在白云区成功举办。 会议由广州市人力资源和社会保障局、广州市发展和改革委员会、广州市教育局、广州市工业和信息化局、广州市总工会等单位指导&#xff…