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

vue3学习资料整理

一、一个后端程序员为什么要学习前端?

1.网上找到的学习理由

《Java后端的我也要学Node.js 了》
https://blog.csdn.net/yusimiao/article/details/104689007

《nodejs后端开发的优缺点(nodejs的概念与特征详解)》
https://www.1pindao.com/baike/20159.html

《NodeJS学习总结》
https://blog.csdn.net/qq_42963930/article/details/109783739

2.为什么我也想学?

我对前端的掌握还停留在jquery时代:用ajax发起请求,用jqury填充数据。对已经流行多年的"响应式"一知半解。如果一个后端开发同学不懂流行的前端框架,可能使得接口设计的不合理、工作量评估不够。

举个例子.

两年前我曾参与做过一个保存草稿的功能。用户在正式提交业务数据之前,可以点击“保存”按钮把整个页面的数据存为草稿。用户再次进入该页面可以看到之前填写的数据。

刚开始我认为实现此功能非常容易:1.前端搜集页面上用户修改或填写的数据然后传给后端 2.后端存为草稿 3.要展示草稿时后端把草稿原样返回前端。

这样做听起来没什么问题。

但前端同学不同意这么做。他们要求展示草稿时后端返回的数据结构,必须和用户首次进入业务处理页面时后端给的数据结构一模一样。

为什么前端有如此要求:因为前端采用的是响应式框架,视图和数据双向绑定。后端返回同样数据结构,前端就能较容易地展示出来。采用jquery,找到页面上的html 元素,然后修改其内容的做法早已过时。

二、怎么学?

1.网上找资料

 
《怎么在Vue3中正确使用ElementPlus,亲测有效,避坑》
https://blog.csdn.net/qq_44017116/article/details/127713704

《vue3使用element-plus》
https://blog.csdn.net/m0_66492535/article/details/128048780

《vue3+element plus+mockjs+echarts手把手搭建一个简易框架代码》
https://blog.csdn.net/liuxin00020/article/details/125082980

《Vue 3 结合TypeScript与Bootstrap、element-plus开发实践》
http://ischoolcode.cn/post/157

2.看书、看教程

书名:《Vue.js 3.x快速入门》 作者:申思维;杜骁

 书名:《Vue.js 3.x高效前端开发(视频教学版)》作者:李小威

菜鸟教程

https://www.runoob.com/vue3/vue3-tutorial.html

3.动手敲代码

我本来想搞一个blog系统,但没那么容易。搞了几天,从安装nodejs开始,用vue3 、elementplus、axios、mockjs搞了一个简单的能跑起来的工程。熟悉前端的同学可能只需半个小时,我却搞了快十天,遇到不少问题。我是从零开始,基本上一行一行地敲的代码。代码在此:https://github.com/yongninghe/vue3-blog-front  仅对前端小白有参考价值。准备以后逐步完善。

相关文章:

vue3学习资料整理

一、一个后端程序员为什么要学习前端? 1.网上找到的学习理由 《Java后端的我也要学Node.js 了》 https://blog.csdn.net/yusimiao/article/details/104689007 《nodejs后端开发的优缺点(nodejs的概念与特征详解)》 https://www.1pindao.co…...

Linux基础语法进阶版

Linux基础语法 查看文件内容指令 touch 主要是修改文件时间,多用创建文件 -a #只更改访问时间 -m #只更改修改时间 -c --no-create#不创建任何文件cat 展示小文件内容 -b #对于非空输出行编号 -n #对于所有行输出编号 -E #在每行结束处显示"$" -A #展示所…...

近红外染料标记小分子1628790-37-3,Cyanine5.5 alkyne,花青素CY5.5炔基

试剂基团反应特点:Cyanine5.5 alkyne用于点击化学标记的远红外/近红外染料炔烃。氰基5.5是Cy5.5的类似物,一种流行的荧光团,已广泛用于各种应用,包括完整生物体成像。在温和的铜催化化学条件下,该试剂可与叠氮基共轭&a…...

洛谷——P1004 方格取数

【题目描述】 设有 NN 的方格图 (N≤9),我们将其中的某些方格中填入正整数,而其他的方格中则放入数字 0。如下图所示(见样例): A 0 0 0 0 0 0 0 0 0 0 13 0 0 6 0 0 0 0 0 0 7 0 0 0 0 0 0 14 0 0…...

Linux删除软链接

不防大家试试 unlink 命令 首先我们先来创建一个文件 #mkdir test_chk #touch test_chk/test.txt #vim test_chk/test.txt (这一步随便在这个test.txt里写点东东即可) 下面我们来创建test_chk目录 的软链接 #ln-s test_chk test_chk_ln 软链接创建好了,我们来…...

【自然语言处理】【大模型】用于大型Transformer的8-bit矩阵乘法介绍

用于大型Transformer的8-bit矩阵乘法介绍原文地址:A Gentle Introduction to 8-bit Matrix Multiplication for transformers at scale using transformers, accelerate and bitsandbytes 相关博客 【自然语言处理】【大模型】用于大型Transformer的8-bit矩阵乘法介…...

设计模式之工厂模式详解和应用

目录1 工厂模式的历史由来2.简单工厂模式2.1 简单工厂模式定义2.2 简单工厂模式案例2.3 简单工厂模式相关源码2.4 简单工厂模式优缺点3 工厂方法模式3.1 工厂方法模式定义3.2 工厂方法模式案例3.3 工厂方法模式源码3.4 工厂方法模式优缺点4 抽象工厂模式4.1 抽象工厂模式定义4.…...

ArcGIS中的附件功能

从ArcGIS10起,空间数据库增加了"附件"的功能,可灵活管理与要素相关的附加信息,可以是图像、PDF、文本文档或任意其他文件类型。例如,如果用某个要素表示建筑物,则可以使用附件来添加多张从不同角度拍摄的建筑物照片。 启动附件功能 要想使用附件功能,要素类必…...

epoll单台设备支持百万并发连接

一些概念: linux下一切接文件,文件描述符fd,文件I/O(包含socket,文本文件等),I/O多路复用,reactor模型,水平触发,边沿触发,多线程模型,阻塞和非阻塞&#xf…...

网络字节序

文章目录网络字节序网络字节序 内存中的多字节数据相对于内存地址有大端和小端之分, 磁盘文件中的多字节数据相对于文件中的偏移地址也有大端小端之分, 网络数据流同样有大端小端之分. 网络数据流的地址统一按大端处理 发送主机通常将发送缓冲区中的数据按内存地址从低到高的…...

03- SVC 支持向量机做人脸识别 (项目三)

数据集描述: sklearn的lfw_people函数在线下载55个外国人图片文件夹数据集来精确实现人脸识别并提取人脸特征向量数据集地址: sklearn.datasets.fetch_lfw_people — scikit-learn 1.2.1 documentationPCA降维: pca PCA(n_components0.9) 数据拆分: X_train, X_test, y_tra…...

浅谈指向二维数组元素的指针变量

(1)指向数组元素的指针变量 例1.有一个3X4的二维数组,要求用指向元素的指针变量输出二维数组各元素的值. 编写程序 1 #include <stdio.h>2 int main()3 {4 int a[3][4] { 1,3,5,7,9,11,13,15,17,19,21,23 };5 int *p;6 for (p a[0]; p < a[0] 12; p) …...

左右值引用和移动语义

文章首发公众号&#xff1a;iDoitnow 1. 左右值和左右值引用 什么是左值、右值呢&#xff1f;一种极不严谨的理解为&#xff1a;在赋值的时候&#xff0c;能够被放到等号左边的值为左值&#xff0c;放在右边的值为右值。例如&#xff1a; int sum(int x, int y){return x y;…...

一起学习用Verilog在FPGA上实现CNN----(七)全连接层设计

1 全连接层设计 1.1 Layer 进行线性计算的单元layer&#xff0c;原理图如图所示&#xff1a; 1.2 processingElement Layer中的线性计算单元processingElement&#xff0c;原理图如图所示&#xff1a; processingElement模块展开原理图&#xff0c;如图所示&#xff0c;包含…...

tomcat打debug断点调试

windows debug调试 jdk版本&#xff1a;1.8.0_181 tomcat版本&#xff1a;apache-tomcat-9.0.68.0 idea版本&#xff1a;2020.1 方法一 修改catalina.bat 在%CATALINA_HOME%\bin\catalina.bat中找到 set “JAVA_OPTS%JAVA_OPTS% -Djava.protocol.handler.pkgsorg.apache…...

如果持有互斥锁的线程没有解锁退出了,该如何处理?

文章目录如果持有互斥锁的线程没有解锁退出了&#xff0c;该如何处理&#xff1f;问题引入PTHREAD_MUTEX_ROBUST 和 pthread_mutex_consistent登场了结论&#xff1a;如果持有互斥锁的线程没有解锁退出了&#xff0c;该如何处理&#xff1f; 问题引入 看下面一段代码&#xf…...

信息论绪论

本专栏针包含信息论与编码的核心知识&#xff0c;按知识点组织&#xff0c;可作为教学或学习的参考。markdown版本已归档至【Github仓库&#xff1a;information-theory】&#xff0c;需要的朋友们自取。或者关注公众号【AIShareLab】&#xff0c;回复 信息论 也可获取。 文章目…...

Buffer Status Reporting(BSR)

欢迎关注同名微信公众号“modem协议笔记”。 以一个实网中的异常场景开始&#xff0c;大概流程是有UL data要发送&#xff0c;UE触发BSR->no UL grant->SR->no UL grant->trigger RACH->RACH fail->RLF->RRC reestablishment&#xff1a;简单描述就是UE触…...

代码随想录LeetCode | 单调栈问题

前沿&#xff1a;撰写博客的目的是为了再刷时回顾和进一步完善&#xff0c;其次才是以教为学&#xff0c;所以如果有些博客写的较简陋&#xff0c;是为了保持进度不得已而为之&#xff0c;还请大家多多见谅。 预&#xff1a;看到题目后的思路和实现的代码。 见&#xff1a;参考…...

C++之可调用对象、bind绑定器和function包装器

可调用对象在C中&#xff0c;可以像函数一样调用的有&#xff1a;普通函数、类的静态成员函数、仿函数、lambda函数、类的非静态成员函数、可被转换为函数的类的对象&#xff0c;统称可调用对象或函数对象。可调用对象有类型&#xff0c;可以用指针存储它们的地址&#xff0c;可…...

深度学习在微纳光子学中的应用

深度学习在微纳光子学中的主要应用方向 深度学习与微纳光子学的结合主要集中在以下几个方向&#xff1a; 逆向设计 通过神经网络快速预测微纳结构的光学响应&#xff0c;替代传统耗时的数值模拟方法。例如设计超表面、光子晶体等结构。 特征提取与优化 从复杂的光学数据中自…...

PPT|230页| 制造集团企业供应链端到端的数字化解决方案:从需求到结算的全链路业务闭环构建

制造业采购供应链管理是企业运营的核心环节&#xff0c;供应链协同管理在供应链上下游企业之间建立紧密的合作关系&#xff0c;通过信息共享、资源整合、业务协同等方式&#xff0c;实现供应链的全面管理和优化&#xff0c;提高供应链的效率和透明度&#xff0c;降低供应链的成…...

2.Vue编写一个app

1.src中重要的组成 1.1main.ts // 引入createApp用于创建应用 import { createApp } from "vue"; // 引用App根组件 import App from ./App.vue;createApp(App).mount(#app)1.2 App.vue 其中要写三种标签 <template> <!--html--> </template>…...

学校招生小程序源码介绍

基于ThinkPHPFastAdminUniApp开发的学校招生小程序源码&#xff0c;专为学校招生场景量身打造&#xff0c;功能实用且操作便捷。 从技术架构来看&#xff0c;ThinkPHP提供稳定可靠的后台服务&#xff0c;FastAdmin加速开发流程&#xff0c;UniApp则保障小程序在多端有良好的兼…...

el-switch文字内置

el-switch文字内置 效果 vue <div style"color:#ffffff;font-size:14px;float:left;margin-bottom:5px;margin-right:5px;">自动加载</div> <el-switch v-model"value" active-color"#3E99FB" inactive-color"#DCDFE6"…...

【Web 进阶篇】优雅的接口设计:统一响应、全局异常处理与参数校验

系列回顾&#xff1a; 在上一篇中&#xff0c;我们成功地为应用集成了数据库&#xff0c;并使用 Spring Data JPA 实现了基本的 CRUD API。我们的应用现在能“记忆”数据了&#xff01;但是&#xff0c;如果你仔细审视那些 API&#xff0c;会发现它们还很“粗糙”&#xff1a;有…...

C++中string流知识详解和示例

一、概览与类体系 C 提供三种基于内存字符串的流&#xff0c;定义在 <sstream> 中&#xff1a; std::istringstream&#xff1a;输入流&#xff0c;从已有字符串中读取并解析。std::ostringstream&#xff1a;输出流&#xff0c;向内部缓冲区写入内容&#xff0c;最终取…...

Ascend NPU上适配Step-Audio模型

1 概述 1.1 简述 Step-Audio 是业界首个集语音理解与生成控制一体化的产品级开源实时语音对话系统&#xff0c;支持多语言对话&#xff08;如 中文&#xff0c;英文&#xff0c;日语&#xff09;&#xff0c;语音情感&#xff08;如 开心&#xff0c;悲伤&#xff09;&#x…...

C++.OpenGL (20/64)混合(Blending)

混合(Blending) 透明效果核心原理 #mermaid-svg-SWG0UzVfJms7Sm3e {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-SWG0UzVfJms7Sm3e .error-icon{fill:#552222;}#mermaid-svg-SWG0UzVfJms7Sm3e .error-text{fill…...

Razor编程中@Html的方法使用大全

文章目录 1. 基础HTML辅助方法1.1 Html.ActionLink()1.2 Html.RouteLink()1.3 Html.Display() / Html.DisplayFor()1.4 Html.Editor() / Html.EditorFor()1.5 Html.Label() / Html.LabelFor()1.6 Html.TextBox() / Html.TextBoxFor() 2. 表单相关辅助方法2.1 Html.BeginForm() …...