当前位置: 首页 > news >正文

Vue3

1.目前已支持 vue3 的UI组件库

  • ant-design-vue
    https://antdv.com/docs/vue/introduce-cn/

    ant-design-vue 是 Ant Design 的 Vue 实现,组件的风格与 Ant Design 保持同步

    目前支持 Vue 3.0 的 2.0.0 测试版 已发布

  • element-plus
    https://element-plus.gitee.io/#/zh-CN

Element Plus,一套为开发者、设计师和产品经理准备的基于 Vue 3.0 的桌面端组件库

  • vant
    https://vant-contrib.gitee.io/vant/v3/#/zh-CN

轻量、可靠的移动端 Vue 组件库

Vant 是有赞前端团队开源的移动端组件库,于 2016 年开源,已持续维护 4 年时间

目前 Vant 已完成了对 Vue 3.0 的适配工作,并发布了 Vant 3.0 版本

  • VueUse
    https://vueuse.org/

基于composition组合api的常用集合,小兔仙项目会部分使用

2. Vue3带来的新变化

2.1性能提升

  • 首次渲染更快
  • diff算法更快
  • 内存占用更少
  • 打包体积变小

2.2 更好的Typescript支持

2.3 Composition API

在使用vue2.x版本开发较复杂的组件时,逻辑难以复用,组合式api的出现可以解决此类问题

相关阅读:

  1. Vue3 中文文档 https://vue3js.cn/docs/zh/
  2. Vue3 设计理念 https://vue3js.cn/vue-composition/

3. 破坏性语法更新

  • vue3.0对于2.0版本的大部分语法都是可以兼容的,但是也有一些破坏性的语法更新,这个大家要格外注意
  1. 实例方法$on移除 (eventBus现有实现模式不再支持 可以使用三方插件替代)
  2. 过滤器filter移除 (插值表达式里不能再使用过滤器 可以使用methods替代)
  3. .sync语法移除 (和v-model语法合并)

更多阅读:
https://v3.cn.vuejs.org/guide/migration/introduction.html

4. Vue3开发环境搭建

4.1 创建脚手架命令

vue create xxxxx(项目名)

4.2选择自定义配置

在这里插入图片描述

4.3 选中自定义安装版本

在这里插入图片描述

4.4 选择3.x版本

在这里插入图片描述
后面的点回车就可以了,vue-cli会帮助我们跑起来一个内置了vue3版本的vue项目

5. Vue3一些文件的变化

  • 首先我们可以看一下package.json文件,在dependencies配置项中显示,我们当前使用的版本为3.0.0
"dependencies": {"core-js": "^3.6.5","vue": "^3.0.0"
}
  • 然后打开main.js入口文件,发现Vue的实例化发生了一些变化,由先前的new关键词实例化,转变为createApp方法的调用形式 (更多详情:https://www.bilibili.com/read/cv10133036)

vue2.x

new Vue({el: '#app',render: h => h(App)
})

vue3.x

import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')
  • 最后我们打开一个单文件组件发现,vue3.0的单文件组件中不再强制要求必须有唯一根元素
<template><img alt="Vue logo" src="./assets/logo.png"><HelloWorld msg="Welcome to Your Vue.js App"/>
</template>

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈,一经查实,立即删除!

Vue3.0 过度和动画

一、css基础动画 animation、keyframes 的用法 菜鸟教程 animation 传送门 https://www.runoob.com/cssref/css3-pr-animation.html .animation{position: absolute;border: 1px solid red;animation: leftrightleft 10s infinite;transition: all 3s;}keyframes leftrightlef…...

QT大作业:学生管理系统(通过mysql数据库)

一、前言 学校实验室进行第二轮考核&#xff0c;第二次qt作业是学生管理系统。 要求如下&#xff1a; 1、连接数据库&#xff0c;对学生信息进行增删改查操作&#xff0c;可以使用qt的SQLITE&#xff0c;但大家需自行学习sql语句的语法才能实现相关功能&#xff08;建议使用MY…...

三种方法安装CUDA--看出你是【入门】算法工程师还是【高级】算法工程师

三种方法安装CUDA–看出你是【入门】算法工程师还是【高级】算法工程师 文章目录 三种方法安装CUDA--看出你是【入门】算法工程师还是【高级】算法工程师0 微信交流群:1 前言:2 显卡驱动安装3 CUDA9.2卸载2.1 10.0及之前2.2 cuda10.1及之后2.3 pwd2.4 卸载2.5 清除残留2.6 验…...

Java岗大厂面试官常问的那些问题,涨姿势!

前言 分布式&#xff0c;是程序员必备技能之一&#xff0c;在面试过程中属于必备类的&#xff0c;在工作中更是会经常用到。而Kafka是一个分布式的基于发布订阅的消息队列&#xff0c;目前它的魅力是无穷的&#xff0c;对于Kafka的奥秘&#xff0c;还需要我们细细去探寻。 要…...

[HDU2520]我是菜鸟,我怕谁(每日一题5.30)

题目链接&#xff1a;Problem - 2520 (hdu.edu.cn) 乍一看这个题&#xff0c;发现不就是匀加速直线运动么&#xff0c;于是写出了如下的代码&#xff1a; #include <iostream>using namespace std;int d(int t);int main() {int T;cin >> T;while(T--){int t;cin …...

初步理解类加载运行机制和类加载过程,全套教学资料

一道面试题 让我们开门见山&#xff0c;直面主题&#xff1a;Dubbo 服务里面有个服务端&#xff0c;还有个消费端你知道吧&#xff1f; 服务端和消费端都各有一个线程池你知道吧&#xff1f; 那么面试题来了&#xff1a;一般情况下&#xff0c;服务提供者比服务消费者多吧。…...

第二讲:基本飞行姿态

四旋翼在其四个轴臂上四个桨的高速转动作用下&#xff0c;会受到四个桨的拉力&#xff0c;拉力方向与机身垂直&#xff0c;当四个桨产生的拉力总和大于机身重力时&#xff0c;飞机处于上升状态&#xff1b;当总拉力小于机身重力时&#xff0c;飞机处于下降状态&#xff1b;当总…...

小程序单页面应用,解决跳转10层问题

文章目录问题背景解决思路需要解决的问题内容实现初始页面布局自定义导航头控制页面显隐左滑回退子组件上拉加载问题&#xff08;父组件调用子组件方法&#xff09;存在问题问题背景 小程序存在10层爆栈问题&#xff0c;在开发中因为流程过长&#xff0c;且存在其他页面跳转当…...

MySQL索引用法实例分析

建议看原文&#xff1a;https://www.jb51.net/article/88846.htm 这篇文章主要介绍了MySQL索引用法,结合实例形式较为详细的分析了mysql索引的功能、定义、使用方法与相关注意事项,需要的朋友可以参考下 本文实例分析了MySQL索引用法。分享给大家供大家参考&#xff0c;具体如下…...

必看!LuatOS自定义C库全新教程,一文极速上手

今天继续讲LuatOS的开发&#xff0c;上一期简单说了一下如何移植LuatOS&#xff0c;相信很多朋友已经看过了。那么今天&#xff0c;我就开始讲C和Lua调用的部分教程。 LuatOS相关资料及Lua语言的官方定义&#xff0c;详见以下链接&#xff1a; LuatOS仓库&#xff1a; https:/…...

Xshell 连接不上Linux Centos 7的解决方法之设置静态IP

前序 最近在开发项目&#xff0c;需要在服务器部署数据库、ftp文件管理等相关内容时&#xff0c;为了方便操作&#xff0c;使用Xshell会话管理工具进行服务器操作。出现连不上服务器网络的问题&#xff0c;就所遇问题进行学习解决方案及总结记录。 配置虚拟机网络 1.在虚拟机…...

ann2snn的代码分析

首先&#xff0c;主函数是if_cnn_mnist_work.py 1.输出snn测试结果的就是这么一些代码&#xff1a; utils.pytorch_ann2snn(model_namemodel_name,norm_tensornorm_tensor,test_data_loadertest_data_loader,devicedevice,TT,log_dirlog_dir,configconfig)2.ctrl鼠标左键点击py…...

基于域名访问网站1(作业)

搭建一个基于http://www.zuoye.com:22222访问的web网站&#xff0c;网站首页在/www/http/&#xff0c;内容为zuoye 结果 过程&#xff1a; 创建网页的根目录&#xff0c;并编辑网页内容为zuoye 编辑/etc/httpd/conf.d/zuoye.conf 关闭防火墙 关闭selinux 重启httpd 编辑/…...

虚拟内存和地址空间

目录 一、物理内存vs虚拟内存 二、物理内存空间和虚拟内存空间 三、32bit的地址空间 四、cpu位宽和cpu地址总线宽 五、虚拟内存地址空间划分 六、虚拟地址和物理地址的映射 早期的计算机程序都是直接跑在物理内存上的&#xff0c;这就要求程序大小不能超过物理内存的上限…...

HttpClient请求Https证书问题解决

本地使用HttpClient请求https时没有问题&#xff0c;但是放到服务器上&#xff0c;运行出现报错&#xff0c;出现异常为&#xff1a; javax.net.ssl.SSLHandshakeException: sun.security.validator.ValidatorException: PKIX path building failed: sun.security.provider.ce…...

STM32CubMx自学笔记(一)-LED灯翻转

STM32CubMX自学笔记&#xff08;一&#xff09;---LED灯翻转工程创建系统具体配置工程代码编写下载验证结语工程创建 首先得安装STM32CubMx软件。具体安装步骤参照 保姆级安装步骤&#xff0c;这里将不再赘述&#xff0c;第一节主要是介绍新工程的创建&#xff0c;首先在桌面打…...

十四、Python第十四课——文件和异常

&#xff08;请先看这篇文章&#xff1a;https://blog.csdn.net/GenuineMonster/article/details/104495419&#xff09; 如果看完这篇博文&#xff0c;你的问题还是没有解决&#xff0c;那么请关注我的公众号&#xff0c;后台发消息给我吧&#xff0c;当天回复&#x…...

LeetCode: 523. 连续的子数组和

给你一个整数数组 nums 和一个整数 k &#xff0c;编写一个函数来判断该数组是否含有同时满足下述条件的连续子数组&#xff1a; 子数组大小 至少为 2 &#xff0c;且 子数组元素总和为 k 的倍数。 如果存在&#xff0c;返回 true &#xff1b;否则&#xff0c;返回 false 。 …...

Linux下安装sqlite3

文章目录前言安装步骤测试安装成功前言 sqlite3的安装 安装步骤 依次执行以下命令&#xff1a; 1)wget http://www.sqlite.org/sqlite-3.5.6.tar.gz 2)tar -xzvf sqlite-3.5.6.tar.gz 3)cd sqlite-3.5.6 4)./configure 5)make 6)make install测试安装成功 出现红色方框信息…...

面向对象的程序语言设计-2021春季学期面向对象程序设计第十四周上机练习#1

Set 描述 现有一整数集&#xff08;允许有重复元素&#xff09;&#xff0c;初始为空。我们定义如下操作&#xff1a; add x 把x加入集合 del x 把集合中所有与x相等的元素删除 ask x 对集合中元素x的情况询问 对每种操作&#xff0c;我们要求进行如下输出。 add 输出操作后集…...

Vue全家桶之前端路由

Vue全家桶之前端路由 文章目录Vue全家桶之前端路由1.路由的基本概念与原理1.1 路由1.1.1 后端路由1.1.2 SPA1.1.3 前端路由1.1.4 实现简易前端路由1.2 Vue Router2.vue-router的基本使用2.1 基本使用步骤2.2路由重定向3. vue-router嵌套路由3.1嵌套路由用法4.vue-router动态路由…...

MySQL安装教程

文章目录.msi安装下载.msi安装包安装配置环境变量登陆MySQLzip archive 免安装版下载zip配置文件启动MySQL数据库登陆MySQL并修改密码MySQL有两种安装方式&#xff0c;一是通过.msi来安装&#xff0c;一是zip archive免安装版。 官网链接&#xff1a;https://www.mysql.com/dow…...

CentOS7.8搭建Kubernetes集群(kubeadm方式)

Kubernetes集群的架构图 Kubernetes集群的搭建方式选择 1、minikube学习体验方式 minikube与 kind 类似&#xff0c;minikube 是一个工具&#xff0c; 能让你在本地运行 Kubernetes。 minikube 在你本地的个人计算机&#xff08;包括 Windows、macOS 和 Linux PC&#xff09;运…...

在java.library.path中找不到允许在生产环境中实现最佳性能的基于APR的Apache Tom.....

在java.library.path中找不到允许在生产环境中实现最佳性能的基于APR的Apache Tom… 2021-6-2 19:55:17 org.apache.catalina.core.AprLifecycleListener init 信息: The APR based Apache Tomcat Native library which allows optimal performance in production environment…...

windows下安装Redis

下载安装 运行 下载安装 Redis 官方不建议在 windows 下使用 Redis&#xff0c;所以官网没有 windows 版本可以下载。还好微软团队维护了开源的 windows 版本 Github仓库&#xff1a;https://github.com/microsoftarchive/redis 但是&#xff0c;4年前的微软开源团队只维护到…...

Docker 之搭建私有仓储

环境 192.168.200.165 :正常服务器 192.168.200.164:私有仓库 部署私有仓储 1. 下载镜像registry docker pull registry2. 运行registry容器 docker run -itd -v /data/registry:/var/lib/registry -p 5000:5000 --restart=always --name registry registry:latest3. 查看…...

《Mask TextSpotter》论文阅读笔记

Mask TextSpotter 读该论文的目的&#xff0c;之前读了MaskTextSpotterV3论文&#xff0c;然后又读了MaskRCNN论文&#xff0c;所以想阅读下这篇论文&#xff0c;想看看如何把MaskRCNN网络应用到文字识别检测这个方向的。 文章目录Mask TextSpottermake decisionstep1:读摘要s…...

实验3-1 求一元二次方程的根 (20 分)

本题目要求一元二次方程ax^2&#xff0b;bx&#xff0b;c&#xff1d;0的根&#xff0c;结果保留2位小数。 输入格式: 输入在一行中给出3个浮点系数a、b、c&#xff0c;中间用空格分开。 输出格式: 根据系数情况&#xff0c;输出不同结果&#xff1a; 1)如果方程有两个不相等…...

HTTP与HTTPS(详谈TLS秘钥协商过程)

目录1. 简单http服务器2. 状态码2.1 网页重定向3. http与https3.1 http缺陷3.2 https与http的区别3.3 对称加密3.4 非对称加密1. 简单http服务器 #pragma once #include<iostream> #include<sys/types.h> #include<sys/socket.h> #include<unistd.h> …...

CentOS 7.6下 docker 从安装到简易部署演示SpringBoot项目

目标服务器安装docker并配置 #安装 yum install docker#检验安装是否成功 [rootlocalhost opt]# docker --version Docker version 1.13.1, build 7f2769b/1.13.1#启动 systemctl start docker#换镜像源 sudo vim /etc/docker/daemon.json 内容如下&#xff1a; {"regist…...

【SSM注解汇总】

SSM注解汇总 文章目录SSM注解汇总MyBatis注解1. param("param1","param2",...)2. MapKey("id")Spring注解1. IOC Component Service Controller Repository2. 基于注解方式实现属性注入1&#xff09;Autowired2&#xff09;Qualifier3&#xff0…...

oracle timelock,Makefile · 熊丽兵/compound-protocol - Gitee.com

# Run a single cvl e.g.:# make -B spec/certora/CErc20/borrowAndRepayFresh.cvl# TODO:# - mintAndRedeemFresh.cvl in progress and is failing due to issues with tool proving how the exchange rate can change# hoping for better division modelling - currently fa...

2021第三届计算机能力挑战赛——决赛(java组)真题

第一题&#xff1a;根据题意进行模拟 第二题&#xff1a;利用bfs进行层次搜索 第三题&#xff1a;模拟题&#xff08;注意各种判断&#xff09; 第四题&#xff1a; 第五题&#xff1a; 总体上难度没有很难&#xff0c;但是当时还是没发挥好&#xff08;哭泣&#xff09;…...

第三届蓝桥杯单片机省赛----程序题

因为最近参加比赛蓝桥杯大赛&#xff0c;所以把历年省赛试题做了个遍&#xff0c;每套试题功能也已全部实现&#xff0c;分享出来供大家参考学习。 这次分享的是第三届蓝桥杯单片机省赛的程序题&#xff0c;同样也是第四届蓝桥杯单片机的模拟题。 直接上代码吧&#xff0c;里…...

【Pandas数据处理100例】(九十九):Pandas使用at_time()筛选出特定时间点的数据行

前言 大家好,我是阿光。 本专栏整理了《Pandas数据分析处理》,内包含了各种常见的数据处理,以及Pandas内置函数的使用方法,帮助我们快速便捷的处理表格数据。 正在更新中~ ✨ 🚨 我的项目环境: 平台:Windows10语言环境:python3.7编译器:PyCharmPandas版本:1.3.5N…...

【算法】第三届全国大学生算法设计与编程挑战赛(秋季赛)

秋季赛题目&#xff1a;http://vj.saikr.com/contest/16/problems 【参考&#xff1a;第三届全国大学生算法设计与编程挑战赛题解【金奖全国第九】_米莱虾的博客-CSDN博客】 【参考&#xff1a;2021-2022第三届全国大学生算法设计与编程挑战赛&#xff08;秋季赛&#xff09; 题…...

大家好,我是风溯,第三届百度大学生网络安全技能大赛个人第一

白帽江湖人才辈出&#xff0c;传奇人物不胜枚举&#xff0c;这里只用实力说话&#xff0c;也许你没见过大佬真容&#xff0c;但ta的“传说”或许早有耳闻~ Xrayteam安全团队的xxxeyJ&#xff1a;“挖洞只是展现个人能力的一种形式&#xff0c;短期内的确能产生一定收益&#x…...

第三届长安杯解析(2次修订版)镜像+具体解析+个人详细解题过程,涉及多个模块,我会努力把所有写好,可以做一下题目,提升很明显。

第一次写的太烂了&#xff0c;看到其他大佬写的我很羞愧&#xff0c;所以努力修订。 长安杯链接&#xff1a; 链接&#xff1a;https://pan.baidu.com/s/1PIJpKRpn5H94_bxbOJIO0w?pwdybww 提取码&#xff1a;ybww --来自百度网盘超级会员V3的分享 先讲讲我的感悟&#xff1…...

第三届蓝桥杯【省赛试题3】比酒量

题目描述&#xff1a; 有一群海盗&#xff08;不多于20人&#xff09;&#xff0c;在船上比拼酒量。过程如下&#xff1a;打开一瓶酒&#xff0c;所有在场的人平分喝下&#xff0c;有几个人倒下了。再打开一瓶酒平分&#xff0c;又有倒下的&#xff0c;再次重复...... 直到开了…...

2021-2022年度第三届全国大学生算法设计与编程挑战赛(夏季赛)

2021-2022年度第三届全国大学生算法设计与编程挑战赛&#xff08;夏季赛&#xff09; 主要是用于记录涉及的知识点&#xff0c;本次比赛是团队赛。 http://oj.saikr.com/contest/20/problems 部分题目讲解视频&#xff1a; https://edu.saikr.com/course/957/task/5879/sho…...

第三届长安杯赛后总结---检材三

检材三概况 检材三主要是对宝塔的分析&#xff0c;宝塔是用来快速搭建网站的。之前实习的时候见过&#xff0c;现在的很多案件的网站都是使用宝塔模板搭建的网站。这里需要熟练宝塔的一些基础命令的使用&#xff0c;和相关的配置文件。 22.检材三的原始硬盘的SHA256值为&…...

第三届上海市大学生网络安全大赛 流量分析

关于这个writeup是写给初学者的&#xff0c;重点在于如何利用工具。 该题目下载文件打开后是一个抓包文件 使用wireshark打开 &#xff0c;wireshark下载地址&#xff1a;Wireshark - Download (softonic.com) 点击Protocol后&#xff0c;会对协议的名称按字母排序&#xff0…...

lingo入门——河北省第三届研究生建模竞赛B题

一、题干 1.1 题目 投资建模(河北省第三届研究生建模竞赛B题) 从2021年年初开始到2050年前&#xff0c;未来教育基金会&#xff08;FFE&#xff09;向M国部分高等院校捐助一笔经费以帮助贫困学生&#xff0c;将现有的8000万美元资金进行债务投资。 相关投资要求&…...

第三届传智杯程序设计赛B组题解Java版

第三届传智杯程序设计赛B组初赛题解Java版 文章目录第三届传智杯程序设计赛B组初赛题解Java版A - 课程报名B - 期末考试成绩C - 志愿者D - 终端E - 运气A - 课程报名 import java.util.Scanner;public class Main {public static void main(String[] args) {Scanner in new Sc…...

2021年第三届全国高校计算机能力挑战赛

今年的全国高校计算机能力挑战赛开始报名了。 2021年第三届全国高校计算机能力挑战赛 组织委员会主 任&#xff1a; 王志英全国高等学校计算机教育研究会副理事长 副主任&#xff1a; 李茂青全国高等学校计算机教育研究会副理事长 胡学钢安徽省高等学校计算机教育研究会理事长 …...

“RT-Thread杯”2020第三届全国大学生嵌入式芯片与系统设计竞赛圆满落幕

2020第三届全国大学生嵌入式芯片与系统设计竞赛暨第五届全国大学生智能互联创新大赛总决赛暨颁奖典礼日前在南京市江北新区圆满落幕。大赛由中国电子学会主办&#xff0c;由东南大学、南京市江北新区管理委员会和南京集成电路产业协同创新学院共同承办。睿赛德科技作为专注嵌入…...

2022年西安邮电大学第三届网络安全技能大赛|Crypto

题目是群友赛后分享的&#xff0c;因此解题答案没有经过验证&#xff0c;若有错误&#xff0c;请批评指正 1.双重凯撒 爆破最省力 2.Complex_math 我拿到题目时&#xff0c;WP已经有了&#xff0c;因此这道题我没有做&#xff0c;借用一下&#xff0c;侵删 3.Complex_math2 …...

第三届“长安杯”电子数据竞赛试题wp

话不多说&#xff0c;案情&#x1f447; 2021年4月25日&#xff0c;上午8点左右&#xff0c;警方接到被害人金某报案&#xff0c;声称自己被敲诈数万元&#xff1b;经询问&#xff0c;昨日金某被嫌疑人诱导裸聊&#xff0c;下载了某“裸聊”软件&#xff0c;导致自己的通讯录和…...

java实现第三届蓝桥杯地址格式转换

地址格式转换 【编程题】(满分21分) Excel是最常用的办公软件。每个单元格都有唯一的地址表示。比如&#xff1a;第12行第4列表示为&#xff1a;“D12”&#xff0c;第5行第255列表示为“IU5”。 事实上&#xff0c;Excel提供了两种地址表示方法&#xff0c;还有一种表示法叫…...

2022年第三届“大湾区杯”粤港澳金融数学数学建模竞赛

2022年第三届“大湾区杯”粤港澳金融数学数学建模竞赛 文章目录2022年第三届“大湾区杯”粤港澳金融数学数学建模竞赛前言一、分析B题 券商研报对公司股票走势的影响和投资策略1、解读题目2、第一问解析3、第二问解析4、第三问解析4、第四问解析二、代码前言 大湾区杯&#xf…...