上手vue2的学习笔记1之了解前端三剑客

news2024/11/16 9:38:04

纯小白学习前端开发,找学习资料也花费了一些时间,后续配置环境,也走了很多弯路,这里梳理一下这几天的学习资料,做一个简单的总结。

1.初步了解vue

Vue是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。

2.学习vue之前需要具备的基础知识

2.1HTML

参考链接:html简介
HTML 是用来描述网页的一种语言。

  • HTML 指的是超文本标记语言: HyperText Markup Language
  • HTML 不是一种编程语言,而是一种标记语言
  • 标记语言是一套标记标签 (markup tag)
  • HTML 使用标记标签来描述网页
  • HTML 文档包含了HTML 标签及文本内容
  • HTML文档也叫做 web 页面

2.2CSS

参考链接:css简介
CSS 是指层叠样式表 (Cascading Style Sheets)。

  • 样式定义如何显示 HTML 元素
  • 样式通常存储在样式表中
  • 把样式添加到 HTML 4.0 中,是为了解决内容与表现分离的问题
  • 外部样式表可以极大提高工作效率
  • 外部样式表通常存储在 CSS 文件中
  • 多个样式定义可层叠为一个

2.3 JavaScript

参考链接:js简介
JavaScript 是脚本语言。

  • JavaScript 是一种轻量级的编程语言
  • JavaScript 是可插入 HTML 页面的编程代码
  • JavaScript 插入HTML 页面后,可由所有的现代浏览器执行

2.4HTML,CSS,JavaScript和Vue的关系


网页主要由三部分组成: 结构( Structure) 、 表现( Presentation) 和行为( Behavior):

  • HTML —— 结构, 决定网页的结构和内容( “是什么”)
  • CSS —— 表现( 样式) , 设定网页的表现样式( “什么样子”)
  • JavaScript( JS) —— 行为, 控制网页的行为( “做什么”)

3.动手尝试web开发

参考链接:学习web开发
简单了解了前端三剑客以后,需要动手实操一下增加理解,可以按照以上链接,简单做一个web开发。
建议安装vscode作为开发软件,易上手。
在这里插入图片描述
images存放调用的图片,
.html文件是web开发的主体内容,
styles即css,用于修饰web,
scripts即javascript,控制web。

最终web显示结果如下图所示。
在这里插入图片描述
以上可以简单对前端有一个初步的了解,上述的四个链接个人认为非常有用。
汇总:
html学习链接
css学习链接
js学习链接
学习web开发

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

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

相关文章

CountDownLatch基本使用及原理

CountDownLatch基本使用及原理 一、CountDownLatch简介二、CountDownLatch类的继承关系1. AbstractQueuedSynchronizer: 用于构建锁和同步器的框架。2. Sync: CountDownLatch的内部类,提供了锁的具体实现。 三、Semaphore的基本使用1. 使用场景:2. 代码实…

Unity3D:编辑属性

推荐:将 NSDT场景编辑器 加入你的3D工具链 3D工具集: NSDT简石数字孪生 编辑属性 属性是用于游戏对象组件和资源的设置和选项。 可在 Inspector 窗口中编辑属性。 光源组件显示了各种值和引用属性 属性分为以下主要类别: 引用:…

Scrapy框架之Docker 安装 MongoDB

目录 Docker安装 MongoDB Docker 安装 MongoDB 第一次 MongoDB基础命令 算机存储数据的概念 查看数据库 切换数据库/创建数据库 删除当前数据库 创建集合 查看集合 删除集合 数据的增加 样例 数据的更新 举例 Docker安装 MongoDB Docker Docker 是一个开源的应…

ARM fiq和irq的区别 共享内存 混合联编 6.25

day4 汇编代码初始化系统中: 为什么要保存cpsr:要把其他的状态还原 如(N Z) user:mov r0,#3cmp r0,#4... //irqmovlt r1,#5irq:mov r0,#10cmp r0,#10moveq r2,#6fiq和irq的区别: fiq和irq的区别&#…

CVPR 2023 | SAN: Side Adapter Network for Open-Vocabulary Semantic Segmentation

CVPR 2023 | SAN: Side Adapter Network for Open-Vocabulary Semantic Segmentation 论文:https://arxiv.org/abs/2302.12242代码:https://github.com/MendelXu/SAN 架构设计 冻结的 CLIP,其位置编码为了适应不同于预训练的输入分辨率&…

贪心算法:解决最优问题的简洁而高效方法

目录 引言: 一. 概念与原理 二. 应用场景 3. 实现方法 4. 优缺点分析 引言: 在计算机科学领域,我们经常面临着需要在一系列选择中找到最优解决方案的问题。贪心算法正是针对这类最优化问题而设计的一种简洁而高效的方法。不同于其他复杂…

Educational Codeforces Round 151 (Rated for Div. 2)(A-B)

打完涨了20分…… 算法选修课就学会了dfs……如果有期末复习的这种劲头&#xff0c;其他算法估计早就学会了&#xff08; A Forbidden Integer 这个还WA了三发…… signed main(){IOS;int n,k,x;bool f1;cf{cin>>n>>k>>x;if(k1)cout<<"NO"…

Quiz 14_2-1: Using Web Services | Python for Everybody 配套练习_解题记录

文章目录 Python for Everybody课程简介Quiz 14_2-1: Using Web Services单选题&#xff08;1-15&#xff09;操作题Autograder : Extracting Data from XML Python for Everybody 课程简介 Python for Everybody 零基础程序设计&#xff08;Python 入门&#xff09; This cou…

Echarts折线图默认不显示数据圆点,鼠标hover时折线图上才显示圆点

option {......tooltip: {trigger: axis,},series: [{symbol: circle,symbolSize: 5,showSymbol: false, // 只有在 tooltip hover 的时候显示symbolitemStyle: { // symbol样式normal: {color: rgb(255, 255, 255),borderColor: rgba(255, 255, 255, 0.2), // symbol边框颜色…

6.20、JAVA 初识序列化与反序列化

初识序列化与反序列化 1 概述 序列化是指将对象的状态信息转换为可以存储或传输形式的过程.在序列化期间,对象将其当前状态写入到临时或持久性存储区.以后可以通过从存储区中读取或者反序列化对象的状态,重新创建该对象. 序列化:利用ObjectOutputStream,把对象的信息,按照固定…

【QT】如何自定义QMessageBox的窗口大小,通过继承QDialog重新实现美观的弹窗

目录 1. QMessageBox原有的弹窗2. 网上第一种方法&#xff1a;通过样式表setStyleSheet实现改变弹窗大小&#xff08;总体不美观&#xff09;3. 网上第二种方法&#xff1a;重写ShowEvent()改变弹窗大小&#xff08;总体也不美观&#xff09;4. 最好的办法&#xff1a;继承QDia…

centos安装k8s

1. 前置 俩台centos服务器,不过多说明,教程基于centos 2. hosts配置 我这样配置&#xff0c;最后没发现那块有联动&#xff0c;望大佬更正 vim /etc/hosts 在末尾添加 192.***** master 192.*** note3. 防火墙 说是要关闭防火墙&#xff0c;我俩台服务器都是基于内网&…

服务器数据库中遭受Devos勒索病毒攻击后解密处理方法,勒索病毒数据恢复

在当今数字化时代&#xff0c;服务器数据库的安全性备受关注。然而&#xff0c;网络安全威胁依然存在&#xff0c;勒索病毒如Devos仍然是一种常见的攻击计算机病毒。最近&#xff0c;收到很多企业的求助&#xff0c;企业的财务系统账套遭到了Devos勒索病毒攻击&#xff0c;导致…

js数组中对象的替换,替换原数组 lodash中一些常用的方法(很实用)

代码 let myArray [{name: John, age: 25},{name: Alice, age: 30},{name: Bob, age: 35} ];// 要替换的对象 let objToReplace {name: Alice, age: 30};// 替换为的对象 let replacementObj {name: Alex, age: 28};// 使用forEach方法 myArray.forEach((obj, index) > …

浙大滨江院Om中心发布首个大规模图文配对遥感数据集,让通用基础模型也能服务遥感领域...

写在前面 2021 年年底&#xff0c;OpenAI 发布了 CLIP&#xff0c;利用带噪的图像-文本配对数据预训练的视觉语言模型&#xff0c;展示了前所未有的图像-文本关联能力&#xff0c;在各种下游任务中取得了惊人的结果。虽然取得了很大的进展&#xff0c;但是这类通用视觉语言基础…

Visual C++中的虚函数和纯虚函数(以策略设计模式为例)

我是荔园微风&#xff0c;作为一名在IT界整整25年的老兵&#xff0c;今天来说说Visual C中的虚函数和纯虚函数。该系列帖子全部使用我本人自创的对比学习法。也就是当C学不下去的时候&#xff0c;就用JAVA实现同样的代码&#xff0c;然后再用对比的方法把C学会。 直接说虚函数…

微信小程序 rich-text富文本框 怎么设置里面节点的样式

1、在JS中我们获取数据&#xff0c;在没有类名的情况下 使用正则匹配你想要添加演示的节点 res[1].data[0].f_content为rich-text里面的节点 如图 代码&#xff1a;让获取的节点中的图片的最大宽度为100%,高度为auto this.content res[1].data[0].f_content.replace(/\<…

数据库连接与操作怎么学习? - 易智编译EaseEditing

学习数据库连接和操作是进行数据管理和处理的关键技能之一。下面是一些建议&#xff0c;可以帮助您学习数据库连接和操作&#xff1a; 学习数据库基础知识&#xff1a; 首先&#xff0c;了解数据库的基本概念、术语和原理。掌握关系型数据库和非关系型数据库的特点以及它们之…

Spring Boot中的Elasticsearch自动配置

Spring Boot中的Elasticsearch自动配置 Elasticsearch是一个基于Lucene的分布式全文搜索引擎&#xff0c;它在搜索、分析等方面具有出色的表现。Spring Boot中的Elasticsearch自动配置为我们提供了一种快速集成Elasticsearch的方式&#xff0c;使我们可以在Spring Boot应用程序…

【Unity每日一记】常见的类你都掌握了吗,没有就过来看看吧

&#x1f468;‍&#x1f4bb;个人主页&#xff1a;元宇宙-秩沅 &#x1f468;‍&#x1f4bb; hallo 欢迎 点赞&#x1f44d; 收藏⭐ 留言&#x1f4dd; 加关注✅! &#x1f468;‍&#x1f4bb; 本文由 秩沅 原创 &#x1f468;‍&#x1f4bb; 收录于专栏&#xff1a;uni…