Vue和Vue-Element-Admin(十四):vue3.x与vue2区别分析

目录

vue3.x组合式api

vue2 定义属性和方法

vue3 定义属性和方法

router 使用的区别

vue2.x router使用

定义router

在main.js中引入router

在vue中使用

vue3.x使用router

定义router

在main.js中引用

在vue中使用router

定义全局方法,变量

vue2.x定义全局方法

vue2.x中使用全局方法

vue3.x定义全局方法

vue3.x中使用全局方法

父子组件调用

vue2.x 父组件调用子组件

定义子组件

定义父组件

vue2.x子组件调用父组件

定义子组件

定义父组件

vue3.x父组件调用子组件

定义子组件

定义父组件

vue3.x子组件调用父组件

定义子组件

定义父组件

watch的使用

vue2.x使用watch

vue3.x使用watch

生命周期

vue2.x生命周期

vue3.x生命周期

根节点不同

总结


先了解vue3.x 的setup语法糖,这个语法糖的确好用,不用每个都去return,实际开发中经常忘记return,这个语法糖就很好用了,对于setup语法糖是3.2才支持的。主要讲解我们开发中经常用到的一些内容,包括 router,prototype,父子组件调用 等。

vue3.x组合式api

vue2 定义属性和方法

<template><div><div>简单属性</div><div>{{ msg }}</div><div><button @click="updateMsg">修改马杀鸡</button></div><div>对象属性</div><div>{{ ObjMsg.msg }}</div><div><button @click="updateObjMsg">修改对象马杀鸡</button></div></div>
</temp

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

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

相关文章

将大模型生成数据存入Excel,并用增量的方式存入Excel

将大模型生成数据存入Excel&#xff0c;并用增量的方式存入Excel 1. 需求与要解决的问题2. 代码3. 部分代码分析 1. 需求与要解决的问题 首先就是大模型对话特别耗时&#xff0c;所以通过需要异步执行。 其次是中间对话会有终端或像死锁的那种情况&#xff0c;循环不再继续&am…

基于YOLOv8深度学习的医学影像阿尔兹海默症检测诊断系统研究与实现(PyQt5界面+数据集+训练代码)

阿尔茨海默症&#xff08;Alzheimer’s disease&#xff09;是一种常见的神经退行性疾病&#xff0c;主要表现为记忆丧失、认知能力下降以及行为和人格改变。随着全球老龄化问题的加剧&#xff0c;阿尔茨海默症的发病率也在逐年上升&#xff0c;给患者及其家庭带来了巨大的经济…

鸿蒙学习生态应用开发能力全景图-鸿蒙开发套件(2)

文章目录 1、HarmonyOS 设计套件2、开发套件3、测试套件3.1测试标准3.2测试工具4、运维套件4.1上架分发测试能力4.2运维分析1、HarmonyOS 设计套件 Harmony Design 是面向全场景智能体验的设计系统,致力于构建一个和谐的数字世界,其秉承万物归一、和谐共生、衍生万物的设计理…

记一次 MongoDB 选主问题的解决及分析

目录 一、副本集构成 二、问题发生与解决 三、问题分析 1. 为何触发重新选举 2. 主何时被认为已失效 3. 选主过程 4. 关于候选节点&#xff08;Candidate Node&#xff09; &#xff08;1&#xff09;候选节点的定义 &#xff08;2&#xff09;候选节点的产生条件 &a…

iOS逆向入门:使用theos注入第三方依赖库

背景 theos是一个跨平台的软件开发框架&#xff0c;常用于管理&#xff0c;开发和部署iOS项目&#xff0c;同时也是开发iOS越狱插件的主要工具。和MonkeyDev不同的是&#xff0c;它不依赖于xcode&#xff0c;可以在多个操作系统上运行。一个完整的iOS越狱开发流程包括&#xf…

mysql8.4+mysql router读写分离

以下为容器环境内搭建 准备工作: 拉取镜像: 镜像版本mysql8.4container-registry.oracle.com/mysql/community-router8.4 下载mysql_shell mysql-shell-9.0.1-linux-glibc2.17-x86-64bit.tar.gz 下载地址: https://downloads.mysql.com/archives/shell/ 参考 这里对这篇文章…

STM32电源管理—实现低功耗

注&#xff1a; 本文是学习野火的指南针开发板过程的学习笔记&#xff0c;可能有误&#xff0c;详细请看B站野火官方配套视频教程&#xff08;这个教程真的讲的很详细&#xff0c;请给官方三连吧&#xff09; 在响应绿色发展的同时&#xff0c;在很多应用场合中都对电子设备的功…

【FPGA开发】AXI-Stream总线协议解读

文章目录 AXI-Stream概述协议中一些定义字节定义流的定义 数据流类别字节流连续对齐流连续不对齐流稀疏流 协议的信号信号列表 文章为个人理解整理&#xff0c;如有错误&#xff0c;欢迎指正&#xff01; 参考文献 ARM官方手册 《IHI0051B》 AXI-Stream概述 协议中一些定义 A…

LogViewer NLog, Log4Net, Log4j 文本日志可视化

LogViewer 下载 示例&#xff1a;NLog文本日志可视化软件&#xff0c;并且能够实时监听输出最新的日志 nlog.config 通过udp方式传输给LogViewer (udp://ip:port) <?xml version"1.0" encoding"utf-8" ?> <nlog xmlns"http://www.nlog-…

ES-针对某个字段去重后-获取某个字段值的所有值

针对上面表的数据&#xff0c;现在想根据age分组&#xff0c;并获取每个分组后的name有哪些(去重后)。 select age, GROUP_CONCAT(DISTINCT(name)) from testtable group by age ; 结果&#xff1a; 如果想要增加排序&#xff1a; SELECT age, GROUP_CONCAT(DISTINCT name)…

LabVIEW三针自动校准系统

基于LabVIEW的智能三针自动校准系统采用非接触式激光测径仪对标准三针进行精确测量。系统通过LabVIEW软件平台与硬件设备的协同工作&#xff0c;实现了数据自动采集、处理及报告生成&#xff0c;大幅提高了校准精度与效率&#xff0c;并有效降低了人为操作误差。 一、项目背景…

流程图图解@RequestBody @RequestPart @RequestParam @ModelAttribute

RequestBody 只能用一次&#xff0c;因为只有一个请求体 #mermaid-svg-8WZfkzl0GPvOiNj3 {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-8WZfkzl0GPvOiNj3 .error-icon{fill:#552222;}#mermaid-svg-8WZfkzl0GPvOiNj…

【机器学习】机器学习中用到的高等数学知识-7.信息论 (Information Theory)

熵 (Entropy)&#xff1a;用于评估信息的随机性&#xff0c;常用于决策树和聚类算法。交叉熵 (Cross-Entropy)&#xff1a;用于衡量两个概率分布之间的差异&#xff0c;在分类问题中常用。 信息论作为处理信息量和信息传输的数学理论&#xff0c;在机器学习中具有广泛的应用。…

猎板PCB罗杰斯板材的应用案例

以下是几个猎板 PCB 与罗杰斯板材结合的具体案例&#xff1a; 案例一&#xff1a;5G 通信基站天线 PCB 在 5G 通信基站的天线系统中&#xff0c;对高频信号的传输和处理要求极高。猎板 PCB 采用罗杰斯板材&#xff0c;凭借其稳定的低介电常数&#xff08;如 RO4003C 板材&…

解读InnoDB数据库索引页与数据行的紧密关联

目录 一、快速走进索引页结构 &#xff08;一&#xff09;整体展示说明 &#xff08;二&#xff09;内容说明 File Header&#xff08;文件头部&#xff09; Page Header&#xff08;页面头部&#xff09; Infimum Supremum&#xff08;最小记录和最大记录&#xff09; …

【UNIAPP】uniapp版图片压缩工具

二次封装的uniapp版本图片压缩、上传工具&#xff0c;支持全端&#xff08;H5、小程序、APP&#xff09; 新建文件&#xff1a;file-util.js class FileUtil {/*** [文件上传]* param {[object]} fileObj [图片地址]* param {[object]} formData [参数]* param {[str…

Python去除图像白色背景

使用Pillow去除图像背景 安装依赖&#xff1a; pip install pillow 实现步骤&#xff1a; 使用Pillow库加载图像&#xff0c;并将其转换为RGBA模式&#xff0c;以支持透明度。遍历图像的每个像素&#xff0c;检查其红色、绿色和蓝色值是否都高于预设的阈值。对于被视为白色…

Spring Cache之本地缓存注解@Cacheable,@CachePut,@CacheEvict使用

*使用前需要在启动类上添加一个注解&#xff1a;EnableCaching 先说一下SpringCache是不支持灵活的缓存时间设置的&#xff0c;但可以自己实现。且不支持集群&#xff0c;因为是缓存到每台机器上&#xff0c;除非所有机器都有缓存。 所以使用场景一般是数据量较小的单机服务。…

Excel如何把两列数据合并成一列,4种方法

Excel如何把两列数据合并成一列,4种方法 参考链接:https://baijiahao.baidu.com/s?id=1786337572531105925&wfr=spider&for=pc 在Excel中,有时候需要把两列或者多列数据合并到一列中,下面介绍4种常见方法,并且提示一些使用注意事项,总有一种方法符合你的要求:…

uniApp项目运行到鸿蒙手机,应用图标一直是H,应用名一直是HBuilder问题

项目运行到鸿蒙手机&#xff0c;应用图标一直是H,应用名一直是HBuilder问题 应用运行到鸿蒙手机和鸿蒙模拟器&#xff0c;应用图标一直是H,应用名一直是HBuilder&#xff0c;在自动生成的harmony-configs文件夹下也没有配置的文件&#xff0c; 这时候需要你将DevEco Studio 下…