当前位置: 首页 > 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;用户不能控制增…...

iOS 26 携众系统重磅更新,但“苹果智能”仍与国行无缘

美国西海岸的夏天&#xff0c;再次被苹果点燃。一年一度的全球开发者大会 WWDC25 如期而至&#xff0c;这不仅是开发者的盛宴&#xff0c;更是全球数亿苹果用户翘首以盼的科技春晚。今年&#xff0c;苹果依旧为我们带来了全家桶式的系统更新&#xff0c;包括 iOS 26、iPadOS 26…...

(十)学生端搭建

本次旨在将之前的已完成的部分功能进行拼装到学生端&#xff0c;同时完善学生端的构建。本次工作主要包括&#xff1a; 1.学生端整体界面布局 2.模拟考场与部分个人画像流程的串联 3.整体学生端逻辑 一、学生端 在主界面可以选择自己的用户角色 选择学生则进入学生登录界面…...

rknn优化教程(二)

文章目录 1. 前述2. 三方库的封装2.1 xrepo中的库2.2 xrepo之外的库2.2.1 opencv2.2.2 rknnrt2.2.3 spdlog 3. rknn_engine库 1. 前述 OK&#xff0c;开始写第二篇的内容了。这篇博客主要能写一下&#xff1a; 如何给一些三方库按照xmake方式进行封装&#xff0c;供调用如何按…...

【Zephyr 系列 10】实战项目:打造一个蓝牙传感器终端 + 网关系统(完整架构与全栈实现)

🧠关键词:Zephyr、BLE、终端、网关、广播、连接、传感器、数据采集、低功耗、系统集成 📌目标读者:希望基于 Zephyr 构建 BLE 系统架构、实现终端与网关协作、具备产品交付能力的开发者 📊篇幅字数:约 5200 字 ✨ 项目总览 在物联网实际项目中,**“终端 + 网关”**是…...

论文笔记——相干体技术在裂缝预测中的应用研究

目录 相关地震知识补充地震数据的认识地震几何属性 相干体算法定义基本原理第一代相干体技术&#xff1a;基于互相关的相干体技术&#xff08;Correlation&#xff09;第二代相干体技术&#xff1a;基于相似的相干体技术&#xff08;Semblance&#xff09;基于多道相似的相干体…...

return this;返回的是谁

一个审批系统的示例来演示责任链模式的实现。假设公司需要处理不同金额的采购申请&#xff0c;不同级别的经理有不同的审批权限&#xff1a; // 抽象处理者&#xff1a;审批者 abstract class Approver {protected Approver successor; // 下一个处理者// 设置下一个处理者pub…...

【电力电子】基于STM32F103C8T6单片机双极性SPWM逆变(硬件篇)

本项目是基于 STM32F103C8T6 微控制器的 SPWM(正弦脉宽调制)电源模块,能够生成可调频率和幅值的正弦波交流电源输出。该项目适用于逆变器、UPS电源、变频器等应用场景。 供电电源 输入电压采集 上图为本设计的电源电路,图中 D1 为二极管, 其目的是防止正负极电源反接, …...

[大语言模型]在个人电脑上部署ollama 并进行管理,最后配置AI程序开发助手.

ollama官网: 下载 https://ollama.com/ 安装 查看可以使用的模型 https://ollama.com/search 例如 https://ollama.com/library/deepseek-r1/tags # deepseek-r1:7bollama pull deepseek-r1:7b改token数量为409622 16384 ollama命令说明 ollama serve #&#xff1a…...

适应性Java用于现代 API:REST、GraphQL 和事件驱动

在快速发展的软件开发领域&#xff0c;REST、GraphQL 和事件驱动架构等新的 API 标准对于构建可扩展、高效的系统至关重要。Java 在现代 API 方面以其在企业应用中的稳定性而闻名&#xff0c;不断适应这些现代范式的需求。随着不断发展的生态系统&#xff0c;Java 在现代 API 方…...

elementUI点击浏览table所选行数据查看文档

项目场景&#xff1a; table按照要求特定的数据变成按钮可以点击 解决方案&#xff1a; <el-table-columnprop"mlname"label"名称"align"center"width"180"><template slot-scope"scope"><el-buttonv-if&qu…...