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

Vue3---基础1(认识,创建)

变化

        相对于Vue2,Vue3的变化:

        性能的提升

                打包大小减少 41%

                初次渲染快 55%,更新渲染快133%

                内存减少54%

        源码的升级

                使用 proxy 代替 defineProperty 实现响应式

                重写虚拟 DOM 的实现和 Tree-shaking

        TypeScript

                Vue3就可以更好的支持TypeScript

        新的特性

                1. Composition API (组合式API):

                        setup

                        ref 与 reactive

                        computed 与 watch

                        ......

                2. 新的内置组件

                        Fragment

                        Teleport

                        Suspense

                        ......

                3. 其他改变

                        新的生命周期钩子

                        data 选项应始终被声明为一个函数

                        移出 keyCode 支持作为 v-on 的修饰符                

创建 Vue3 工程

基于 vue-cli 创建

        脚手架是 webpack 

        目前 vue-cli 处于维护模式,官方推荐基于 vite 创建项目

## 查看 @vue/cli 版本, 确保在4.5.0以上
vue -version## 安装/升级
npm i -g @vue/cli## 执行创建命令
vue create vue_text## 选择 3.x## 启动

基于 vite 创建(推荐)

        vite 是新一代的前端构建工具,官网地址: https://vitejs.cn, 优势如下:

        轻量快速的热重载(HMR),能实现极速的服务启动

        对 TypeScript、JSX、CSS 等支持开箱即用

        真正的按需编译,不需要等待整个应用编译完成

        创建

## 创建命令
npm create vue@latest## 配置---略

        文件

        

extensions.json        里面是vscode内的插件

favicon.ico                是网页标题左侧图标

.gitignore                  忽略文件

env.d.ts                     让ts认识其他文件的配置(报红是缺少依赖  npm i 一下)

index.html                入口文件

package-lock.json

package.json           这两个是包的管理文件

README.md           工程介绍

tsconfig.app.json

tsconfig.json

tsconfig.node.json   这三个是ts的配置文件

vite.config.ts            整个工程的配置文件(安装插件、配置代理)

        插件

        下载安装插件:

        TypeScript Vue Plugin(Volar)

        Vue Language Features(Volar)// 这个换成 Vue - Official

src

        main.ts

        入口文件 index.html 引入了 src 内的 main.ts

components

        放置组件的文件

相关文章:

Vue3---基础1(认识,创建)

变化 相对于Vue2,Vue3的变化: 性能的提升 打包大小减少 41% 初次渲染快 55%,更新渲染快133% 内存减少54% 源码的升级 使用 proxy 代替 defineProperty 实现响应式 重写虚拟 DOM 的实现和 Tree-shaking TypeScript Vue3就可以更好的支持TypeSc…...

JAVA集合ArrayList

目录 ArrayList概述 add(element) 用法 add(index, element)用法 remove(element)用法 remove(index)用法 get(index)用法 set(index,element) 练习 test1 定义一个集合,添加字符串,并进行遍历&…...

Bitmap OOM

老机器Bitmap预读仍然OOM&#xff0c;无奈增加一段&#xff0c;终于不崩溃了。 if (Build.VERSION.SDK_INT < 21)size 2; 完整代码&#xff1a; Bitmap bitmap; try {//Log.e(Thread.currentThread().getStackTrace()[2] "", surl);URL url new URL(surl);…...

基于深度学习的人脸表情识别系统(PyQT+代码+训练数据集)

基于深度学习的人脸表情识别系统&#xff08;PyQT代码训练数据集&#xff09; 前言一、数据集1.1 数据集介绍1.2 数据预处理 二、模型搭建三、训练与测试3.1 模型训练3.2 模型测试 四、PyQt界面实现 前言 本项目是基于mini_Xception深度学习网络模型的人脸表情识别系统&#x…...

Qt 中的项目文件解析和命名规范

&#x1f40c;博主主页&#xff1a;&#x1f40c;​倔强的大蜗牛&#x1f40c;​ &#x1f4da;专栏分类&#xff1a;QT❤️感谢大家点赞&#x1f44d;收藏⭐评论✍️ 目录 一、Qt项目文件解析 1、.pro 文件解析 2、widget.h 文件解析 3、main.cpp 文件解析 4、widget.cpp…...

【chatGPT】我:在Cadence Genus软件中,出现如下问题:......【4】

我 在Cadence Genus中&#xff0c;tcl代码为&#xff1a;foreach clk $clk_list{ set clkName [lindex $clk_list 0] set targetFreq [lindex $clk_list 1] set uncSynth [lindex $clk_list 4] set clkPeriod [lindex “%.3f” [expr 1 / $targetFreq]] … } 以上代码出现如下…...

单例模式(Singleton Pattern)在JAVA中的应用

在软件开发中&#xff0c;设计模式是解决特定问题的一种模板或者指南。它们是在多年的软件开发实践中总结出的有效方法。JAVA设计模式广泛应用于各种编程场景中&#xff0c;以提高代码的可读性、可维护性和扩展性。本文将介绍单例模式&#xff0c;这是一种常用的创建型设计模式…...

手把手教你创建新的OpenHarmony 三方库

创建新的三方库 创建 OpenHarmony 三方库&#xff0c;建议使用 Deveco Studio&#xff0c;并添加 ohpm 工具的环境变量到 PATH 环境变量。 创建方法 1&#xff1a;IDE 界面创建 在现有应用工程中&#xff0c;新创建 Module&#xff0c;选择"Static Library"模板&a…...

从零开始,如何成功进入IT行业?

0基础如何进入IT行业&#xff1f; 简介&#xff1a;对于没有任何相关背景知识的人来说&#xff0c;如何才能成功进入IT行业&#xff1f;是否有一些特定的方法或技巧可以帮助他们实现这一目标&#xff1f; 在当今数字化时代&#xff0c;IT行业无疑是一个充满活力和机遇的领域。…...

【数组】5螺旋矩阵

这里写自定义目录标题 一、题目二、解题精髓-循环不变量三、代码 一、题目 给定⼀个正整数 n&#xff0c;⽣成⼀个包含 1 到 n^2 所有元素&#xff0c;且元素按顺时针顺序螺旋排列的正⽅形矩阵。 示例: 输⼊: 3 输出: [ [ 1, 2, 3 ], [ 8, 9, 4 ], [ 7, 6, 5 ] ] 二、解题精髓…...

Sora视频生成模型:开启视频创作新纪元

随着人工智能技术的飞速发展&#xff0c;视频生成领域也迎来了前所未有的变革。Sora视频生成模型作为这一领域的佼佼者&#xff0c;凭借其卓越的性能和创新的应用场景&#xff0c;受到了广泛的关注与好评。本文将对Sora视频生成模型进行详细介绍&#xff0c;带您领略其魅力所在…...

OpenAI现已普遍提供带有视觉应用程序接口的GPT-4 Turbo

OpenAI宣布&#xff0c;其功能强大的GPT-4 Turbo with Vision模型现已通过公司的API全面推出&#xff0c;为企业和开发人员将高级语言和视觉功能集成到其应用程序中开辟了新的机会。 PS&#xff1a;使用Wildcard享受不受网络限制的API调用&#xff0c;详情查看教程 继去年 9 月…...

Swift中的元组属性

在Swift中&#xff0c;元组属性指的是一个元组作为结构体、类或枚举的属性。可以将一个元组作为属性来存储和访问多个值。 例如&#xff0c;考虑以下的Person类&#xff1a; class Person {var name: Stringvar age: Intvar address: (String, Int)init(name: String, age: I…...

【go从入门到精通】作用域,包详解

作者简介&#xff1a; 高科&#xff0c;先后在 IBM PlatformComputing从事网格计算&#xff0c;淘米网&#xff0c;网易从事游戏服务器开发&#xff0c;拥有丰富的C&#xff0c;go等语言开发经验&#xff0c;mysql&#xff0c;mongo&#xff0c;redis等数据库&#xff0c;设计模…...

利用SARscape对日本填海造陆和天然气开采进行地表形变监测

日本千叶市&#xff0c;是日本南部重要的工业港市。位于西部的浦安市是一个典型的"填海造田"城市&#xff0c;东南部的东金区有一片天然气开采区域&#xff0c;本文利用SARscape&#xff0c;用干涉叠加的方法&#xff0c;即PS和SBAS&#xff0c;对这两个区域进行地表…...

“Python爬虫实战:高效获取网上公开美图“

如何通过Python创建一个简单的网络爬虫&#xff0c;以爬取网上的公开图片。网络爬虫是一种自动化工具&#xff0c;能够浏览互联网、下载内容并进行处理。请注意&#xff0c;爬取内容时应遵守相关网站的使用条款&#xff0c;尊重版权和隐私权。 ### 网络爬虫简介 网络爬虫&…...

C++设计模式:享元模式(十一)

1、定义与动机 概述&#xff1a;享元模式和单例模式一样&#xff0c;都是为了解决程序的性能问题。面向对象很好地解决了"抽象"的问题&#xff0c;但是必不可免得要付出一定的代价。对于通常情况来讲&#xff0c;面向对象的成本大豆可以忽略不计。但是某些情况&#…...

【三十六】【算法分析与设计】综合练习(3),39. 组合总和,784. 字母大小写全排列,526. 优美的排列

目录 39. 组合总和 对每一个位置进行枚举 枚举每一个数出现的次数 784. 字母大小写全排列 526. 优美的排列 结尾 39. 组合总和 给你一个 无重复元素 的整数数组 candidates 和一个目标整数 target &#xff0c;找出 candidates 中可以使数字和为目标数 target 的 所有 不…...

ARM Cordio WSF(一)——架构简介

1. 关于WSF WSF&#xff08;wireless Software Foundation API&#xff09;&#xff0c;是一个RTOS抽象层。Wireless Software Foundation software service and porting layer&#xff0c;提供实时操作系统所需的基础服务&#xff0c;可基于不同平台进行实现&#xff0c;移植…...

设计模式总结-装饰者模式

模式动机 一般有两种方式可以实现给一个类或对象增加行为&#xff1a; 继承机制&#xff0c;使用继承机制是给现有类添加功能的一种有效途径&#xff0c;通过继承一个现有类可以使得子类在拥有自身方法的同时还拥有父类的方法。但是这种方法是静态的&#xff0c;用户不能控制增…...

MFC内存泄露

1、泄露代码示例 void X::SetApplicationBtn() {CMFCRibbonApplicationButton* pBtn GetApplicationButton();// 获取 Ribbon Bar 指针// 创建自定义按钮CCustomRibbonAppButton* pCustomButton new CCustomRibbonAppButton();pCustomButton->SetImage(IDB_BITMAP_Jdp26)…...

ssc377d修改flash分区大小

1、flash的分区默认分配16M、 / # df -h Filesystem Size Used Available Use% Mounted on /dev/root 1.9M 1.9M 0 100% / /dev/mtdblock4 3.0M...

Cloudflare 从 Nginx 到 Pingora:性能、效率与安全的全面升级

在互联网的快速发展中&#xff0c;高性能、高效率和高安全性的网络服务成为了各大互联网基础设施提供商的核心追求。Cloudflare 作为全球领先的互联网安全和基础设施公司&#xff0c;近期做出了一个重大技术决策&#xff1a;弃用长期使用的 Nginx&#xff0c;转而采用其内部开发…...

网络编程(UDP编程)

思维导图 UDP基础编程&#xff08;单播&#xff09; 1.流程图 服务器&#xff1a;短信的接收方 创建套接字 (socket)-----------------------------------------》有手机指定网络信息-----------------------------------------------》有号码绑定套接字 (bind)--------------…...

【HarmonyOS 5 开发速记】如何获取用户信息(头像/昵称/手机号)

1.获取 authorizationCode&#xff1a; 2.利用 authorizationCode 获取 accessToken&#xff1a;文档中心 3.获取手机&#xff1a;文档中心 4.获取昵称头像&#xff1a;文档中心 首先创建 request 若要获取手机号&#xff0c;scope必填 phone&#xff0c;permissions 必填 …...

算法笔记2

1.字符串拼接最好用StringBuilder&#xff0c;不用String 2.创建List<>类型的数组并创建内存 List arr[] new ArrayList[26]; Arrays.setAll(arr, i -> new ArrayList<>()); 3.去掉首尾空格...

vulnyx Blogger writeup

信息收集 arp-scan nmap 获取userFlag 上web看看 一个默认的页面&#xff0c;gobuster扫一下目录 可以看到扫出的目录中得到了一个有价值的目录/wordpress&#xff0c;说明目标所使用的cms是wordpress&#xff0c;访问http://192.168.43.213/wordpress/然后查看源码能看到 这…...

[免费]微信小程序问卷调查系统(SpringBoot后端+Vue管理端)【论文+源码+SQL脚本】

大家好&#xff0c;我是java1234_小锋老师&#xff0c;看到一个不错的微信小程序问卷调查系统(SpringBoot后端Vue管理端)【论文源码SQL脚本】&#xff0c;分享下哈。 项目视频演示 【免费】微信小程序问卷调查系统(SpringBoot后端Vue管理端) Java毕业设计_哔哩哔哩_bilibili 项…...

给网站添加live2d看板娘

给网站添加live2d看板娘 参考文献&#xff1a; stevenjoezhang/live2d-widget: 把萌萌哒的看板娘抱回家 (ノ≧∇≦)ノ | Live2D widget for web platformEikanya/Live2d-model: Live2d model collectionzenghongtu/live2d-model-assets 前言 网站环境如下&#xff0c;文章也主…...

通过 Ansible 在 Windows 2022 上安装 IIS Web 服务器

拓扑结构 这是一个用于通过 Ansible 部署 IIS Web 服务器的实验室拓扑。 前提条件&#xff1a; 在被管理的节点上安装WinRm 准备一张自签名的证书 开放防火墙入站tcp 5985 5986端口 准备自签名证书 PS C:\Users\azureuser> $cert New-SelfSignedCertificate -DnsName &…...