前端基础复习(后端人员看前端知识)

企业级前端项目开发中,需要将前端开发所需要的工具、技术、流程、经验进行规范化和标准化,而不是零散的html、js、css文件堆叠在一起。

首先我们需配置前端的开发基础环境NodeJS,相当于后端人员java开发的JDK。然后搭建前端工程脚手架Vue-cli,用于快速生成Vue的项目模板,相当于后端人员的maven标准化了目录结构。最后需下载前端代码开发工具VsCode,相当于我们的IDEA。

Vue-cli搭建前端工程脚手架,常用cmd的dos窗口项目储存目录下输入vue ui 打开图形化界面,在图形化界面上创建项目

创建完项目后,使用VsCode打开项目文件。编写前端代码我们首先要以src源代码包下的main.js做为文件的主入口,main主入口会引入醒目开发组件App.vue。

根组件App.vue由三部分组成template(定义html)用于生成网页骨架、script(定义js)用于控制模板的数据来源和行为、style(定义css)用于美化页面。

其中css为专业前端进行编写,这里不进行详细叙述,不会的去Element官网去找样式复制粘粘

Element官网:Element - The world's most popular Vue UI framework

1.template与html

html指的是超文本标记语言,用于描述网页

<hn align="center">文字</hn>用于设置标题,n为1-6,1字体虽大6最小,align可有可无,用于定义对齐方式,left左对齐,center居中,right右对齐

文字内容在template中主要用差值表达式来书写如<h1>{{message}}</h1>,然后在script内容中data数据模块中去记录return回message的具体值

<hr color="blue" width="200px" align="left">在页面上生成一条直线,颜色为蓝色,宽度为绝对宽度200像素,左对齐

<br/>换行   <p>文字</p>分段,即文字上下留有空白

<b>文字</b>加粗标签

<i>文字</i>斜体标签

<u>文字</u>下划线标签

<center>文字</front>文字居中显示

<front color="red" size"7" face="楷体">文字</front> 定义文字字体大小字体和颜色

<a href="https://www.baidu.com/" target="_self">百度一下</a><br>给文字添加超链接效果,href用于写超链接地址,可绝对路径也可相对路径,target用于页面打开方式,_self当前页签打开,_blank新页签打开

<img src="../img/6.jpg" width="220px" alt="66666">插入图像,alt用于图像丢失时显示的文字提示

<video src="../img/ds.mp4" controls width="500px"></video>这里视频用video音频用audio,src用于指定URL,controls用于显示播放控件

<ol></ol>用于文字排版有序列表<ul></ul>用于文字排版无序列表,里头文字<li></li>标注

<div>文字</div>块级别元素独占一行

<span>文字</span>行内元素,内容多大就占多大

注意template下只有一个根元素即只有<div></div>一个

<table>用于定义表格,<tr>用于定义行,<td>用于定义单元格,<th>用于定义表头单元格,以上标签都是双标签有头也有尾</table>、</tr>、</td>

表单标签,表单项分为三大类:put文本框、select下拉框、textarea文本域

<form action="###" method="POST">表单提交地址为###,提交方式为POST,参数不在地址栏拼接

<input type="hidden" name="key" value="toutoude">隐藏域,不在页面展示,但是会向后台提交

<input type="text" name="username" value="" placeholder="请输入用户名"><br>定义文本框为普通文本框,name标注键,value标注值,placeholder为文本提示

上述input文本框type类型除了text普通文本框,还有password密码框、date日期框、radio单选框(checked默认选中)、checkbox复选框、file文件框、submit提交按钮、rest重置按钮、button按钮需绑定事件

<select></select>复选框中<option></option>包含复选选项

2.script与Vue和JavaScript

script标签中通常引入各种JavaScript文件,其中包括Vue框架本身和第三方库自定义的脚本文件.Vue是一种流行的JavaScript前端框架,采用了响应式数据绑定组件化思想.

3.vue基础

3.1 文本插值:用来绑定data方法返回的对象属性

3.2属性绑定:为标签的属性绑定data方法中返回的属性

3.3事件绑定:为元素绑定对应的事件

3.4 v-model双向绑定:表单输入向和data方法中的属性进行绑定,任意一方改变都会同步给另一方

名字为改变的按钮绑定事件handleChange,methods中定义该事件,点击按钮将双向绑定中的张三改为李四

3.5 条件渲染:根据表达式的值来动态渲染页面元素

data中的sex值为1,前端页面显示男

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

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

相关文章

SQL Server数据库日志查看若已满需要清理的三种解决方案

首先查看获取实例中每个数据库日志文件大小及使用情况&#xff0c;根据数据库日志占用百分比来清理 DBCC SQLPERF(LOGSPACE) 第一种解决方案&#xff1a; 在数据库上点击右键 → 选择 属性 → 选择 文件&#xff0c;然后增加数据库日志文件的文件大小。 第二种解决方案 手动…

Linux 系统开启网络服务

首先&#xff0c;大家新装的linux系统可能都没有安装vim工具&#xff0c;所以打开文件的方式是 vi /etc/sysconfig/network-scripts/ifcfg-ens33在这个界面把onboot改为yes&#xff0c;我这里是设置完的。然后通过下面语句重新启动服务就可以了。 service network restartcen…

Aigtek高压功率放大器驱动容性负载有哪些

高压功率放大器在驱动容性负载时&#xff0c;需要考虑与该负载的匹配和适应。以下是几种常见的容性负载类型&#xff0c;以及高压功率放大器在驱动这些负载时的方法和技术&#xff1a; 声音系统&#xff1a;高压功率放大器常用于驱动音箱和扬声器等声音系统中的容性负载。对于音…

python进行批量搜索匹配替换文本文字的matlab操作实例

在进行一些数据处理时&#xff0c;可能需要抓取原文中的一些内容&#xff0c;批量替换原文另外的一些内容&#xff0c;而且事先还需要一步搜索匹配的步骤。 举个例子&#xff0c;如下matlab输出的txt文件&#xff0c;原文件有几万行数据&#xff0c;这里只摘取3行对应的 文件文…

分享71个节日PPT,总有一款适合您

分享71个节日PPT&#xff0c;总有一款适合您 71个节日PPT下载链接&#xff1a;https://pan.baidu.com/s/1v4_fHplsf_hOJQbNPVUudg?pwd8888 提取码&#xff1a;8888 Python采集代码下载链接&#xff1a;采集代码.zip - 蓝奏云 学习知识费力气&#xff0c;收集整理更不易…

使用GDI画图片生成合成图片并调用打印机进行图片打印

使用GDI画图片生成合成图片并调用打印机进行图片打印 新建窗体应用程序PrinterDemo&#xff0c;将默认的Form1重命名为FormPrinter&#xff0c;添加对 Newtonsoft.Json.dll用于读写Json字符串 zxing.dll&#xff0c;zxing.presentation.dll用于生成条形码&#xff0c;二维码…

LLMs之miqu-1-70b:miqu-1-70b的简介、安装和使用方法、案例应用之详细攻略

LLMs之miqu-1-70b&#xff1a;miqu-1-70b的简介、安装和使用方法、案例应用之详细攻略 目录 miqu-1-70b的简介 miqu-1-70b的安装和使用方法 1、安装 2、使用方法 miqu-1-70b的案例应用 miqu-1-70b的简介 2024年1月28日&#xff0c;发布了miqu 70b&#xff0c;潜在系列中的…

leecode172 | 阶乘后的零 | 傻瓜GPT

题意 给定一个整数 n &#xff0c;返回 n! 结果中尾随零的数量。提示 n! n * (n - 1) * (n - 2) * ... * 3 * 2 * 1//题解 class Solution { public:int trailingZeroes(int n) { // ...*(1*5)*...*(x*5)*...*(1*5*5)*...*(x*5*5)*...*n 然后倒过来 //...∗(1∗5)∗...∗…

我的世界Java版服务器如何搭建并实现与好友远程联机Minecarft教程

文章目录 1. 安装JAVA2. MCSManager安装3.局域网访问MCSM4.创建我的世界服务器5.局域网联机测试6.安装cpolar内网穿透7. 配置公网访问地址8.远程联机测试9. 配置固定远程联机端口地址9.1 保留一个固定tcp地址9.2 配置固定公网TCP地址9.3 使用固定公网地址远程联机 本教程主要介…

网络安全大赛

网络安全大赛 网络安全大赛的类型有很多&#xff0c;比赛类型也参差不齐&#xff0c;这里以国内的CTF网络安全大赛里面著名的的XCTF和强国杯来介绍&#xff0c;国外的话用DenCon CTF和Pwn2Own来举例 CTF CTF起源于1996年DEFCON全球黑客大会&#xff0c;以代替之前黑客们通过互相…

idea(2023.3.3 ) spring boot热部署,修改热部署延迟时间

1、添加依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-devtools</artifactId><optional>true</optional> </dependency>载入依赖 2、设置编辑器 设置两个选项 设置热部署更新延迟时…

肯尼斯·里科《C和指针》第10章 结构和联合(2)结构、指针和成员

想吐槽的一点是如果我们当时上课也是这样讲就好了&#xff0c;&#xff0c;&#xff0c; 直接或通过指针访问结构和它们的成员的操作符是相当简单的&#xff0c;但是当它们应用于复杂的情形时就有可能引起混淆。这里有几个例子&#xff0c;能帮助大家更好地理解这两个操作符的工…

Three.js学习6:透视相机和正交相机

一、相机 相机 camera&#xff0c;可以理解为摄像机。在拍影视剧的时候&#xff0c;最终用户看到的画面都是相机拍出来的内容。 Three.js 里&#xff0c;相机 camera 里的内容就是用户能看到的内容。从这个角度来看&#xff0c;相机其实就是用户的视野&#xff0c;就像用户的眼…

Sentinel(理论版)

Sentinel 1.什么是Sentinel Sentinel 是一个开源的流量控制组件&#xff0c;它主要用于在分布式系统中实现稳定性与可靠性&#xff0c;如流量控制、熔断降级、系统负载保护等功能。简单来说&#xff0c;Sentinel 就像是一个交通警察&#xff0c;它可以根据系统的实时流量&…

电力负荷预测 | 基于TCN的电力负荷预测(Python)———模型构建

文章目录 效果一览文章概述源码设计参考资料效果一览 文章概述 基于TCN的电力负荷预测(Python) python3.8 keras2.6.0 matplotlib3.5.2 numpy1.19.4 pandas1.4.3 tensorflow==2.6.0

停止内耗,做有用的事

很多读者朋友跟我交流的时候&#xff0c;都以为我有存稿&#xff0c;于是听到我说每周四现写的时候都很惊讶。其实没什么好惊讶的&#xff0c;每周四我都会把自己关在书房里一整天&#xff0c;断掉一切电话、微信、邮件&#xff0c;从中午写到晚上&#xff0c;直到写完为止。 这…

力扣● 62.不同路径 ● 63. 不同路径 II

● 62.不同路径 单解这道题的话&#xff0c;发现第一行或者第一列的这些位置&#xff0c;都只有一条路径走到&#xff0c;所以路径条数都是1。这就是初始化。坐标大于第一行第一列的这些位置&#xff0c;因为机器人只能向下/向右走&#xff0c;所以只能从上个位置向下走和从左…

用友U8 Cloud ReportDetailDataQuery SQL注入漏洞复现(QVD-2023-47860)

0x01 产品简介 用友U8 Cloud 提供企业级云ERP整体解决方案,全面支持多组织业务协同,实现企业互联网资源连接。 U8 Cloud 亦是亚太地区成长型企业最广泛采用的云解决方案。 0x02 漏洞概述 用友U8 cloud ReportDetailDataQuery 接口处存在SQL注入漏洞,攻击者未经授权可以访…

【Docker】了解Docker Desktop桌面应用程序,TA是如何管理和运行Docker容器(2)

欢迎来到《小5讲堂》&#xff0c;大家好&#xff0c;我是全栈小5。 这是《Docker容器》系列文章&#xff0c;每篇文章将以博主理解的角度展开讲解&#xff0c; 特别是针对知识点的概念进行叙说&#xff0c;大部分文章将会对这些概念进行实际例子验证&#xff0c;以此达到加深对…

redis源码之:集群创建与节点通信(2)

在上一篇redis源码之&#xff1a;集群创建与节点通信&#xff08;1&#xff09;我们可知&#xff0c;在集群中&#xff0c;cluster节点之间&#xff0c;通过meet将对方加入到本方的cluster->nodes列表中&#xff0c;并在后续过程中&#xff0c;不断通过clusterSendPing发送p…