springboot和vue:十、vue2和vue3的差异+组件间的传值
首先用vue-cli创建一个vue2的项目。
vue2和vue3的差异
main.js的语法有所差别。
vue2是
import Vue from 'vue'
import App from './App.vue'new Vue({render: h => h(App),
}).$mount('#app')
vue3是
import { createApp } from 'vue'
import App from './App.vue'createApp(App).mount('#app')
自定义组件的template有所差别
vue2自定义组件的template中所有标签必须在同一个父标签下,即只有一个根标签。所以一般写的时候都写一个div标签包裹着。
vue3没有该限制。
组件间的传值
内部data提供数据
譬如现在自定义了一个Movie组件,上面的template从下面的script中导出的data中拿值。
<template><div><h1>{{ title }}</h1></div>
</template><script>
export default {name: "Movie",data: function () {return {title: "金刚狼"}}
}
</script>
父组件通过prop的方式传值。
自定义Movie组件中是这样的代码
<template><div><h1>{{ title }}</h1></div>
</template><script>
export default {name: "Movie",props: ["title"],data: function () {return {}}
}
</script>
使用Movie的父组件(一般都是App.vue)即可在使用Movie标签的同时直接传值
<template><div id="app"><Movie :title="金刚狼" ></Movie></div>
</template>
兄弟组件通过Vuex等统一数据源共享数据
在后面的博客会详细介绍。
element ui
Element是国内饿了么公司提供的一套开源前端框架,简洁优雅,提供了Vue、React、Angular等多个版本。
- 文档地址:https://element.eleme.cn/#/zh-CN/
- 安装:npm i element-ui
- 引入 Element:

第三方图标库
Font Awesome提供了675个可缩放的矢量图标,可以使用CSS所提供的所有特性对它们进行更改。
- 文档地址:http://fontawesome.dashgame.com/
- 安装:npm install font-awesome
- 使用:import ‘font-awesome/css/font-awesome.min.css’
相关文章:
springboot和vue:十、vue2和vue3的差异+组件间的传值
首先用vue-cli创建一个vue2的项目。 vue2和vue3的差异 main.js的语法有所差别。 vue2是 import Vue from vue import App from ./App.vuenew Vue({render: h > h(App), }).$mount(#app)vue3是 import { createApp } from vue import App from ./App.vuecreateApp(App).…...
SQL:增、删、改、查 基本语句 Navicat建库(用法 + 例子)
文章目录 新建数据库新建表 增、删、改、查select 查找insert 添加delete 删除update 修改where 扩展 < > < > ! <> 比较运算符and or 逻辑运算符between...and... 介于..和..之间in 包含like 模糊查询is null 为空的 查询扩展order by 排序limit start coun…...
vue-cli搭建过程(HBuilder X搭建)
vue.js:前端主流框架(对某一方面技术完整的封装,是一套完善的解决方案) vue-cli搭建项目(官方提供脚手架) vue脚手架:是一套项目搭建的快捷方式,可以将项目中的依赖集成进来,生成统…...
MySQL索引:结构、语法、分类和优化
MySQL索引是数据库中非常关键的性能优化手段。它们提供了快速访问数据的方法,同时也可以极大地提高查询效率。本文将深入介绍MySQL索引的结构、语法、分类,以及如何使用Profile和EXPLAIN来优化查询性能,带有详细的实例演示。 索引结构 MySQ…...
Vue中添加旋转动画
// transform: scale(1.2) rotate(-180deg); 放大 旋转 // transform: rotate(-180deg); 旋转 <i class"el-icon-close"></i>i {font-size: 20px;line-height: 24px;transition: transform 0.2s linear;}i:hover {color: red;transform-origin: cen…...
基于SSM农产品商城系统
基于SSM农产品商城系统的设计与实现,前后端分离,文档 开发语言:Java数据库:MySQL技术:SpringSpringMVCMyBatisVue工具:IDEA/Ecilpse、Navicat、Maven 系统展示 农产品列表 产品详情 个人中心 登陆界面 管…...
基于matlab创作简易表白代码
一、程序 以下是一个基于MATLAB的简单表白代码: % 表白代码 clc; % 清除命令行窗口 clear; % 清除所有变量 close all; % 关闭所有图形窗口 % 输入被表白者的名字 name input(请输入被表白者的名字:, s); % 显示表白信息 fprintf(\n); fprintf(亲爱的…...
pandas
一、pandas初级 安装matplotlib:pip install matplotlib 安装pandas:pip install pandas 本地C:\Users\Administrator\pip,在此目录配置清华园的远程下载 配置内容: [global] index-urlhttps://pypi.tuna.tsinghua.edu.cn/simple [install] trusted-ho…...
使用关键字interface来声明使用接口-PHP8知识详解
继承特性简化了对象、类的创建,增加了代码的可重用性。但是php8只支持单继承,如果想实现多继承,就需要使用接口。PHP8可以实现多个接口。 接口类通过关键字interface来声明,接口中不能声明变量,只能使用关键字const声明…...
计算机毕业设计 基于SSM的高校毕业论文管理系统小程序的设计与实现 Java实战项目 附源码+文档+视频讲解
博主介绍:✌从事软件开发10年之余,专注于Java技术领域、Python人工智能及数据挖掘、小程序项目开发和Android项目开发等。CSDN、掘金、华为云、InfoQ、阿里云等平台优质作者✌ 🍅文末获取源码联系🍅 👇🏻…...
【Java 进阶篇】JDBC查询操作详解
在数据库编程中,查询是一项非常常见且重要的操作。JDBC(Java Database Connectivity)提供了丰富的API来执行各种类型的查询操作。本篇博客将详细介绍如何使用JDBC进行查询操作,包括连接数据库、创建查询语句、执行查询、处理结果集…...
我的企业证书是正常的但是下载应用app到手机提示无法安装“app名字”无法安装此app,因为无法验证其完整性解决方案
我的企业证书是正常的但是下载应用app到手机提示无法安装“app名字”无法安装此app,因为无法验证其完整性解决方案 首先,确保您从可信任的来源下载并安装企业开发者签名过的应用程序。如果您不确定应用程序的来源,建议您联系应用程序提供者…...
【数据结构】排序(2)—冒泡排序 快速排序
目录 一. 冒泡排序 基本思想 代码实现 时间和空间复杂度 稳定性 二. 快速排序 基本思想 代码实现 hoare法 挖坑法 前后指针法 时间和空间复杂度 稳定性 一. 冒泡排序 基本思想 冒泡排序是一种交换排序。两两比较数组元素,如果是逆序(即排列顺序与排序后…...
Redis与分布式-分布式锁
接上文 Redis与分布式-集群搭建 1.分布式锁 为了解决上述问题,可以利用分布式锁来实现。 重新复制一份redis,配置文件都是刚下载时候的不用更改,然后启动redis服务和redis客户。 redis存在这样的命令:和set命令差不多࿰…...
docker安装nginx详解
创建html的挂载目录docker volume create nginx8020 创建conf的挂载目录mkdir -p /opt/nginx/conf 拉取镜像docker pull nginx 初始化挂载目录的配置文件docker run --rm --name nginx-short -p 8020:80 -d nginx docker cp nginx-short:/etc/nginx/nginx.conf /opt/nginx/…...
优化思考二
优化思考一_云湖在成长的博客-CSDN博客 翻到了两年前写文章,有了不一样的观点。 先说一样的想法吧:数据(输入)>>优化模型(处理)>>结果方案(输出)。优化是其中最重要的…...
大模型微调概览
文章目录 微调 和 高效微调高效微调技术方法概述高效微调方法一:LoRA高效微调方法二: Prefix Tuning高效微调方法三: Prompt Tuning高效微调方法四: P-Tuning v2基于强化学习的进阶微调方法RLHF 训练流程微调 和 高效微调 微调,Fine-Tuning, 一般指全参数的微调(全量微调),…...
利用norm.ppfnorm.interval分别计算正态置信区间[实例]
scipy.stats.norm.ppf用于计算正态分布的累积分布函数CDF的逆函数,也称为百分位点函数。它的作用是根据给定的概率值,计算对应的随机变量值。scipy.stats.norm.interval:用于计算正态分布的置信区间,可指定均值和标准差。scipy.st…...
计算机网络各层设备
计算机网络通常被分为七层,每一层都有对应的设备。以下是各层设备的简要介绍: 物理层(Physical Layer):负责传输二进制数据位流的物理媒体和设备,例如网线、光纤、中继器、集线器等。 数据链路层…...
java this用法
在Java中,this是一个关键字,表示当前对象。它可以用来引用当前对象的实例变量、实例方法或者调用当前对象的构造方法。在本文中,我们将深入探讨Java中this关键字的用法。 1. 引用当前对象的实例变量 在Java中,this关键字可以用来…...
全国跨省搬家专业靠谱无套路排行 跨省搬家公司选哪个物流平台便宜省心?哪个搬家公司专业安全保障,没有半路加价?
用户最担心的“半路加价”问题,几乎所有“搬家公司/搬家平台”每天都发生各样“半路加价”问题。本文根据各大社交平台用户避雷贴,统计出搬家公司/搬家平台专业靠谱无套路程度前5名,方便广大需要跨省搬家的用户,接近跨省搬家公司选…...
WarcraftHelper:3步解决魔兽争霸3卡顿与兼容性问题终极指南
WarcraftHelper:3步解决魔兽争霸3卡顿与兼容性问题终极指南 【免费下载链接】WarcraftHelper Warcraft III Helper , support 1.20e, 1.24e, 1.26a, 1.27a, 1.27b 项目地址: https://gitcode.com/gh_mirrors/wa/WarcraftHelper 你是否还在为魔兽争霸3在现代电…...
GPT-Image-2提示词工程实战:从原理到应用,解锁高质量AI图像生成
1. 项目概述:一份高质量的GPT-Image-2提示词工程指南如果你正在使用OpenAI的GPT-Image-2模型,并且厌倦了反复尝试却只能得到平庸、不符合预期的图片,那么你找对地方了。我最近深度研究并实践了Anil-matcha维护的“Awesome GPT-Image-2 API Pr…...
AI大模型学习路线!手把手带你入门_AI大模型学习路线及相关资源推荐
本文详细介绍了AI大模型的基础信息、主要特点、类型,并提供了完整的学习路线图及丰富资源。内容涵盖数学、编程、机器学习、深度学习、自然语言处理等基础知识,以及Transformer模型、预训练模型等核心技术。此外,还强调了理论学习、实践操作和…...
弯曲波触觉反馈技术:为触摸屏注入真实按键手感的工程实践
1. 项目概述:当触摸屏需要“手感”在2012年,如果你告诉一个家电设计师,未来的微波炉、冰箱或烤箱面板将是一块完全平整、没有任何物理凸起的玻璃或塑料板,他可能会皱起眉头。因为这意味着用户将失去最直接的交互反馈——那个“咔哒…...
从FPGA工程师的视角看AMBA总线:手把手教你用Verilog实现一个简易APB外设
从FPGA工程师的视角看AMBA总线:手把手教你用Verilog实现一个简易APB外设 在FPGA和数字IC设计领域,AMBA总线协议就像城市中的交通网络,负责协调各个功能模块之间的数据流动。而APB(Advanced Peripheral Bus)作为AMBA家族…...
模拟真人手写软件,支持随机调节
软件介绍 前阵子公司要求我们签一份保密承诺书,还特别强调必须手写。这下可把不少同事难住了,平时都用电脑打字,手写都快生疏了。于是有同事让我帮忙找找能把手写字做出来的软件。我一开始找了几款手写字体,但写出来的效果太规整…...
Metz Connect工业连接器国产替代技术解析
在工业自动化、楼宇控制以及通信基础设施领域,连接器作为底层物理连接单元,直接影响系统的稳定性与长期可靠运行。Metz Connect作为德国知名连接技术厂商,其产品涵盖工业以太网连接器、PCB端子、RJ45模块化接口、M12工业连接器以及DIN导轨I/O…...
PixelAnnotationTool终极指南:如何用智能分水岭算法实现高效像素级图像标注
PixelAnnotationTool终极指南:如何用智能分水岭算法实现高效像素级图像标注 【免费下载链接】PixelAnnotationTool Annotate quickly images. 项目地址: https://gitcode.com/gh_mirrors/pi/PixelAnnotationTool 你是否曾经为图像标注工作感到头疼ÿ…...
Arm CoreLink CMN-600硬件错误解析与解决方案
1. Arm CoreLink CMN-600硬件错误深度解析在复杂SoC设计中,互连架构的质量直接决定整个系统的稳定性和性能。作为Arm Neoverse平台的核心组件,CoreLink CMN-600(Coherent Mesh Network)承担着处理器集群、内存控制器和I/O设备之间…...
