前端回忆录

Read On Github Read On PDF

• 此篇一完不碰前端
  • HTML 篇
  • CSS 篇
  • JavaScript 篇
  • Vue 篇
  • Ajax 篇 / Axios 篇

此篇一完不碰前端

玩了一个星期的前端，终于是将曾经一直想完成的心愿的完成了， 接下来就是要准备一些其他的玩意了

两个星期的成果好像是只有一个小小的信封以及一个音乐播放器，感觉我对于前端用的最多的便是JS， 感觉好像这并不是主流，不过没有关系，反正我不拿她吃饭….

至于为什么要写一个这玩意，大概就是怕自己将这玩意彻底忘记（经常干这种事情…）

所以这篇文章适用于学完前端但是有点忘的人看，大概这就是所谓的速查表？

所以， 我们正式开始

HTML 篇

div 就是一个盒子，基本的布局工具

span 一行加载文字的玩意， 本身没有宽高属性， 设置宽高要 display : block

<div></div>
<span></span>

不同的标题 以 h 开头

<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>

有点用又好像没用的东西

br 换行

p 段落

code 里面可以输入代码片段（十分鸡肋）

sub 下标

sup 上标

del 中心删除线

ins 下划线

abbr 缩写（鼠标移动到该位置会显示详细信息，一次没用过…）

mark 高亮文本

bdo 正序显示文本还是倒叙显示 （ltr， rtl）

meter / progress 进度条（一般不用这个做）

pre 保留原格式

<br>
<p>这是一个段落</p>
<code>
    print("code")
</code>
<sub></sub>
<sup></sup>
<del></del>
<ins></ins>
<abbr title="移动到缩写会显示这里的内容">IP</abbr>
<mark></mark>
<bdo dir="rtl">倒着显示</bdo><br>
<meter></meter>		<progress></progress>
<pre>
	a	a
</pre>

常用类型的列表

无序列表

ul 代表一个无序列表块

li 列表里面的每一个小项

<ul>
    <li></li>
    <li>
        <ul>
            <li>列表均支持套娃</li>
        </ul>
    </li>
</ul>

有序列表

ol 代表一个有序列表块

li 列表里面的每一个小项

<ol>
    <li></li>
    <li></li>
</ol>

设置顺序（顺序 + 开始序号）

<ol start="10" reversed>
    <li>start规定从哪里开始</li>
    <li>reversed表示倒序</li>
</ol>

定义列表

dl 定义列表体

dt 物体名称

dd 描述

<dl>
    <dt>一个物品</dt>
    <dd>关于这个物品的描述</dd>
</dl>

a 超链接

同时这里的href内容可以是 id 属性， 即跳转到指定区域

<a href="https://www.bilibili.com">这里输入你想要显示的文本</a>
<a href="https://www.bilibili.com" target="_blank">如果输入的是_blank,则表示在新的窗口打开</a>
<a href="https://www.bilibili.com" target="_self">是_self则在原本窗口打开</a>

img 图像

video 视频

audio 音频

source 定义多种方式获得图像或者视频，音频，在一种方式不行的时候更换路线

<img src="······" alt="这里输入图片不能显示后显示的内容">
<video src="·····"></video>
<audio controls="controls">
	<source src="....">
    <source src="....">
</audio>

表格 （重要，但没咋用过…）

table 表格体

caption 标题

thead 表头体

tr 表示每一列，即列体

th 包裹表头的内容

tbody 表主体部分

td 普通表行

tfoot 表的最后一行

<table>
    <caption>caption用来定义表格的标签</caption>
    <thead>
        <tr>
            <th>表格的头部用th标签来定义</th>
            <th>每一行的元素都是放在tr标签内</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>内容</td>
            <td>内容</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>啥也不是</td>
            <td>啥也不是</td>
        </tr>
    </tfoot>
</table>

表单（这个自己用的比较多…）

input

type="text" 代表单行文字框

type="password" 代表密码

type="radio" 代表单选框

type="checkbox" 代表复选框

type="file" 选择文件

type="reset" 重置按钮

type="submit" 提交按钮

type="email" 会自动检测里面的内容是不是邮箱

type="url" 会自动检测里面的内容是不是网址

type="image" 提交按钮变成图片

type="number" 选择数字

type="range" 一个可以拖动的条（没用过）

type="date" type="month" type="week" 时间，没什么好说的

type="time" type="datetime" type="datetime-local" 都是时间，看着选

type="search" 输入搜索的内容（没用）

type="color" 选择颜色

fieldset 一个框，感觉没用

文本<input type="text" value="默认"/><br>
密码<input type="password" /><br>
单选按钮<br>
内容放在这里<input type="radio" name="test" value="1"/><br>
name属性一样即只能选择一个<input type="radio" name="test" value="2"/><br>
one<input type="checkbox" name="text2"/><br>
two<input type="checkbox" name="text2"/><br>
<input type="file"/>
<input type="reset"/>
<input type="submit"/> 
<input type="email" /><span>email属性会自动判断是否为合法邮箱,url同理</span><br>
<input type="url" /><br>
<div>定义提交的图片</div>
<input type="image" src=".....">
<input type="number" min="-10" max="10" step="2" /><br>
<input type="range" min="-10" max="10" step="2" /><br>
<fieldset>
    <input type="date" max="2023-9-1" min="2020-9-1" value="2022-10-1"><br>
    <input type="month"/><br>
    <input type="week"/><br>
    <input type="time"/><br>
    <input type="datetime"/><br>
    <input type="datetime-local"/><br>
</fieldset>
<input type="search"/><br>
<input type="color"/><br>

textarea 可以输入多行文字

<textarea rows="5" cols="25" readonly>在里面可以输入默认值</textarea>

分组

fieldset 分组域

select 选择域

optgroup 选择分组域

option 选项

<fieldset>
    <select>
        <optgroup label="里面输入分组内容">
            <option value="表示">内容</option>
            <option value = "content">content</option>
        </optgroup>
    </select>
</fieldset>

CSS 篇

感觉这种东西即多又杂，也很分散， 所以就挑以下比较常用并且实用的来说吧

选择器：

*{} 全部选择

.class{} 类选择器

#id{} id选择器

div{} html标签选择器（即选择所有的标签）

.class1, .class2, .class3{} 群选择器（即同时选中这些选择器）

#id .class1{} 后代选择器（选择#id 包含的所有的 .class1，可以选子代、孙代、曾孙的元素）

#id > .class1{} 子代选择器（选择#id 包含的 .class1，只能选子代的元素）

.class1 + .class2{} 相邻兄弟选择器（选择于.class1紧挨着的.class2）

.class1 ~ .class2{} 通用兄弟选择器（选择于class1为兄弟的所有.class2）

::nth-child(){} 伪元素选择器 （代表第几个孩子）

nth-child(2n) ， nth-child(even)偶数元素

nth-child(2n + 1) nth-child(odd)奇数元素

::afther / ::before 伪类选择器(在前后插入元素， 插入的元素是一个span元素)

盒子模型

margin (超级常用，用于布局)，通过设置上下左右的外边距来确定位置

margin-top margin-left margin-right margin-bottom

常用居中手段 margin : 0px auto margin: 50% auto

border (常用， 设置边框圆角，更美观)

设置边框类型

border-style: dotted; 点边框

border-style: double; 双实线边框（size 要大于等于 2px）

border-style: solid; 实现边框

边框颜色

border-color: gold;

设置圆角

border-radius: 50%; 直接变成圆角 border-radius: 30px; 规定像素角度

padding （没卵用）

背景类

background-color : red 设置背景颜色

设置背景图片另外设置背景图片自适应

background-image: url(...);
background-size: 100% 100%;

列表：

去除列表前面的小圆点

list-style:none

阴影效果

box-shadow: x-shadow y-shadow blur spread color inset;

x-shadow : 必需的，水平阴影的偏移量，可以为负值 y-shadow : 必需的，水平阴影的偏移量，可以为负值 blur: 可选的，模糊距离，不支持负数 spread: 可选的，阴影的扩展半径 color:可选的，颜色值 inset：可选的，内阴影

文字居中

text-align: center;

float : none/left/right

• 将元素排除在普通流之外
• 元素在页面外不占据位置
• 浮动元素外边缘不会超过父边缘
• 元素中不能上下浮动
• 任何元素一旦浮动，display属性完全失效，并且不会独占一行
• 浮动元素不能相互叠加

position:absolute

设置后元素不占用位置

display属性

常见属性：

• none ：隐藏，不占据位置
  • visibility：hidden 隐藏，占据位置（visibility：visble显示）
• inline ：设置为行内元素
• block：设置为块状元素
• inline-block ：有宽高属性并且在同一行
• table-cell ：视为单元格处理

display : flex

• 弹性排序：

把父元素设为 flex ， 那么就可以控制里面的子元素

如果父亲设为flex， 那么子元素的float， clear， vertical-align失效

控制父亲

flex-direction : column / row

设置主轴是x轴还是y轴， 默认是x轴

justify-content : …..

设置主轴子元素的排列

flex-start 从头开始排列

flex-end 从尾部开始排列

center 让元素居中排列

space-around 平分剩余位置

space-between 先两边贴边， 后平均分配

flex-wrap : nowrap / wrap

flex布局默认不换行，如果装不下就会缩小子元素的宽度

nowrap 不换行

wrap 换行

align-items ：centre…..

设置侧轴的排列方式，只能在子项为单行的时候使用

align-content

于 justify-content 类似， 只不过是设置侧轴

设置子元素

flex ：分配子项目的剩余空间

也就是改变宽来适应屏幕和剩余面积

align-self

于justify-content 类似， 仅对自己进行排列

order

数值越小，排列越靠前

动画

transform

transform:translate(水平移动的距离, 垂直移动的距离)

取值可以为 px， 也可以为百分比

translate如果只给出一个值,表示x轴方向移动距离

平移还在原来的文档流，平移后的位置也可以重叠

transform:rotate(角度deg)

取值正负均可 , 取值为正, 顺时针旋转 , 取值为负 , 逆时针旋转

默认原点是盒子中心

transform-origin : 原点水平位置 原点垂直位置; 改变转换原点

以上两个分开写只生效一个，两个同时使用需使用:

transform: translate(600px) rotate(360deg);

transform: scale(x轴缩放倍数,y轴缩放倍数);

一般情况下,只为scale设置一个值,表示x轴和y轴等比例缩放

transform:scale(缩放倍数)

scale值大于1 表示放大 scale值小于1 表示缩小

animation 常见属性

animation: animateBg 10s linear infinite;

animation-name ：该动画的名称

animation-duration ：动画持续时间

transition-timing-function ：设置动画的过渡类型

• linear：线性过渡
• ease：平滑过渡
• ease-in：由慢到快
• ease-out：由快到慢
• ease-in-out：由慢到快再到慢

animation-delay ：动画的延迟时间

animation-iteration-count ：设置动画的循环次数

• infinite：无限循环
• number: 循环的次数（具体的数字）

@keyframes ：设置动画关键帧

@keyframes animateBg{
 0%{
     filter: hue-rotate(0deg);
 }
 100%{
     filter:hue-rotate(360deg);
 }
}

filter

• filter: grayscale(100%); 将图像转换为灰度图像(置灰)
• filter: brightness(100%) 把图片变得更亮或者更暗。(亮度)
• filter: opacity(30%); 转化图像的透明程度
• filter: sepia(70%); 将图像转换为深褐色
• filter: contract(50%) 调整图像的对比度
• filter: blur(8px); 给图像设置高斯模糊（近视眼）
• filter: invert(30%); 反向输出图像(反色)
• filter: hue-rotate(80deg); 给图像应用色相旋转

没什么用的玩意

• calc

  CSS的计算属性

  $(+, -)$要求这两个数都是长度

  margin: calc(100px + 100px);

  除法$(/)$要求第二个数字是无单位的

  margin: calc(30px / 3);

  乘法$(*)$要求其中一个数是无单位的。

  margin: calc(10px * 3);

• var

  该函数用于插入 CSS 变量的值。var()

  var(–name, value)

  变量名称必须以两个短划线 （–） 开头，并且区分大小写！

  var() 的值就是style冒号后面的值

JavaScript 篇

JS 基础与 C++类似， 所以挑不一样的讲

定义变量

和 python 一样， 没有数据类型这一说，直接定义就好了，现在主流适用 let 定义，以前用 var

let number = 10

在 JS 中存在强制类型转换，与C++相似，同时数字转换成字符串有 ToString() , 类比 C++ to_string

let number = 10
let StrNumber = ToString(number)

for 循环

for(let i = 0 ; i < 10 ; i ++){}

控制台打印输出：

console.log("内容")

弹窗警告

alert("警告内容")

函数定义

function FunName (){}

获取元素

const Front = document.querySelector('#front')

括号里面是css选择器

事件监听

Open.addEventListener('click', function(){
    ....
})
Open.addEventListener('click', FunName)

目前遇到的事件：

click 鼠标点击事件

mouseover 鼠标移动到

mouseleave 鼠标从某处移走

mousedown 鼠标按下

mouseup 鼠标抬起

loadedmetadata 加载完成

ended 播放结束

计时器

let index = setInterval(function(){
    ....
}, 1000)

后面的单位是毫秒

清楚计时器

clearInterval(index)

延时器

setTimeout(function(){
    ....
}, 20)

js 改变元素样式

box.style.backgroundColor = "red"

好像也没啥了，以后再充实以下…

Vue 篇

特殊属性

指令	作用
v-bind	为HTML标签绑定属性值，如href，css等
v-model	在表单元素上创建双向数据绑定
v-on	为HTML标签绑定事件
v-if	条件渲染
v-else-if	条件渲染
v-else	条件渲染
v-show	条件渲染，区别在于是切换display属性
v-for	列表渲染

v-bind / v-model

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/vue.js"></script>
</head>
<body>
    <div id = "add">
        <input type="text" v-model=url>
        <a v-bind:href=url>你要访问的网址是</a>
    </div>
</body>
<script>
    new Vue({
        el : "#add", //这个可以理解为选择器
        data : {
            url : ""// 绑定的类型
        }
    })
</script>
</html>

v-on

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/vue.js"></script>
</head>
<body>
    <div id="add">
        <input type="button" v-on:click="handle()" value="按钮"></br>
        <input type="button" @click="handle()" value="按钮">
    </div>
</body>
<script>
    new Vue({
        el : "#add", //这个可以理解为选择器
        data : {
            url : ""// 绑定的类型
        },
        methods: {
            handle:function(){
                alert("I'm onclick");
            }
        },
    })
</script>
</html>

v-for v-if v-else-if v-else

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/vue.js"></script>
</head>
<body>
    <div id="app">
        <table border="1" cellspacing="0" width="20%">
            <tr>
                <th>编号</th>
                <th>年龄</th>
                <th>类别</th>
            </tr>
            <tr v-for="(pr, index) in info" align="center">
                <td></td>
                <td></td>
                <td>
                    <span v-if="pr.age < 20">青年</span>
                    <span v-else-if="pr.age <= 50">中年</span>
                    <span v-else>暮年</span>
                </td>
            </tr>
        </table>
    </div>
</body>
<script>
    new Vue({
        el: "#app",
        data : {
            info : [{age: 56},{age: 13},{age: 100},{age:30},{age: 15}]
        }
    })
</script>
</html>

Vue 的生命周期

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/vue.js"></script>
</head>
<body>
    <div id="app"></div>
</body>
<script>
    new Vue({
        el: "#app",
        data:{
        },
        mounted() {
            alert("挂载完成，请求数据");
			//基本上都是这个时候请求数据的
        },
    })
</script>
</html>

Ajax 篇 / Axios 篇

get / post 发送方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/vue.js"></script>
    <script src="./js/axios.js"></script>
</head>
<body>
    <input type="button" value="获取数据GET" onclick="get()">
    <input type="button" value="获取数据POST" onclick="post()">
</body>
<script>
    function get(){
        axios({
            method : "get",
            url : "http://yapi.smart-xwork.cn/mock/169327/emp/list" //这里输入请求的网址
        }).then(result => {
            console.log(result.data);
        })
    }

    function get(){
        axios({
            method : "get",
            url : "http://yapi.smart-xwork.cn/mock/169327/emp/list" //这里输入请求的网址
        }).then(result => {
            console.log(result.data);
        })
    }
    function post(){
        axios({
            method : "post",
            url : "http://yapi.smart-xwork.cn/mock/169327/emp/deleteById", //这里输入请求的网址
            data: "id = 1" // 这里输入请求体的信息
        }).then(result => {
            console.log(result.data);
        })
    }
</script>
</html>

更加简介的写法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/vue.js"></script>
    <script src="./js/axios.js"></script>
</head>
<body>
    <input type="button" value="获取数据GET" onclick="get()">
    <input type="button" value="获取数据POST" onclick="post()">
</body>
<script>
    function get(){
        axios.get("http://yapi.smart-xwork.cn/mock/169327/emp/list").then(result => {
            console.log(result.data);
        })
    }
    function post(){
        axios.post("http://yapi.smart-xwork.cn/mock/169327/emp/deleteById", "id = 1").then(result => {
            console.log(result.data);
        })
    }
</script>
</html>