前端学习
林之.
这个作者很懒,什么都没留下…
展开
-
CSS背景图总结
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .box1{ width: 1024px; height: 724px; margin: 0 auto; /*设置背景样式*/ background-color: #b...原创 2022-01-06 17:01:39 · 468 阅读 · 0 评论 -
CSS有关定位总结(绝对定位、相对定位、固定定位)
定位:指将指定元素拜访到页面任意位置可以通过定位任意的摆放元素通过position属性来设置元素的定位可选值:static :默认值,元素没有开启定位relative: 开启元素的相对定位absolute:开启元素的绝对定位fixed: 开启元素的固定定位当开启了元素的定位(position属性值是一个非static值)时,可以通过left right top bottom 四个属性来设置元素的偏移量。* left: 元素相对于其定位位置的左侧偏移量* right: 元素相对于器..原创 2022-01-06 16:48:28 · 421 阅读 · 0 评论 -
CSS解决盒子高度塌陷问题
在文档流中,父元素的高度默认是被子元素撑开的,也就是子元素多高,父元素就多高。但是当为子元素设置浮动以后,子元素会完全脱离文档流,此时将会导致子元素无法撑起父元素的高度,导致父元素的高度塌陷。由于父元素的高度塌陷了,则父元素下的所有元素都会向上移动,这样将会导致页面布局混乱。所以在开发中一定要避免出现高度塌陷的问题。方法一:我 们可以将父元素的高度写死,以避免塌陷的问题出现,但是一旦高度写死,父元素的高度将不能自动适应子元素的高度,所以这种方案是不推荐使用的。方法二:根据W3C的标准,在页面原创 2022-01-05 17:08:47 · 1502 阅读 · 0 评论 -
css有关内联元素的盒子总结
一、特点总结:内联元素不能设置width和height内联元素可以设置水平内边距、垂直方向内边距(垂直方向内边距不会影响页面布局)内联元素可以设置边框,但是只有垂直的的边框不影响页面的布局内联元素可以设置水平外边距,但是不支持垂直外边距二、内联元素与块元素转换5. display样式可以修改元素类型;可选值:inline : 可以将一个元素作为内联元素显示block :可以将一个元素设置块元素显示inline-block : 将一个元素转换为行内块元素可以使一个元素既有悍内元素特点原创 2022-01-05 15:58:12 · 368 阅读 · 0 评论 -
css文本样式总结
1). text-transform 可以用来设置文本大小写可选值:none 默认值,capitalize 单词的首字母大写,通过空格来识别uppercase 所有的字母都大写lowercase 所有的字母都小写2). text-decoration 可以用来设置文本的修饰可选值:none: 默认值underline 为文本添加下划线overline 为文本添加上划线line-through 为文本添加删除线3). letter-spacing 指定字符间距4). word-spa原创 2022-01-05 15:35:33 · 112 阅读 · 0 评论 -
CSS中设置行间距的方法
在CSS中并没有为我们提供直接设置行间距的方式我们只能通过设置行高来间接设置行间距,行高越大行间距越大使用line-height来设置行高行间距 = 行高 - 字体大小通过 light-height可以间接的设置行高//line-height 可以简介设置的行高//可以接收的值:// 1. 直接接收一个大小// 2. 可以指定一个百分数,则会相对于字体去计算行高// 3. 可以直接传一个数值,则行高会..原创 2022-01-05 14:43:08 · 17443 阅读 · 2 评论 -
HTML中的列表总结
列表分类无序列表、有序列表、定义列表无序列表<ul><li></li><li></li><li></li></ul>//type实行可以修改无序列表的项目符号// disc:默认值,是新的圆点// square:实心的方块// circle :空心的圆有序列表<ol><li></li><li></li><l原创 2022-01-05 13:38:25 · 96 阅读 · 0 评论 -
关于Flex布局、Flex容器
Flex容器的属性1). flex-direction:①决定主轴的方向(即项目的排列方向)②参数:row | row-reverse | column | column-reverse2). flex-wrap属性3). flex-flow4). justify-contentjustify-content属性定义了项目在主轴上的对齐方式。5). align-itemsalign-items属性定义项目在交叉轴上如何对齐。6).align-contentalign-cont原创 2022-01-05 00:20:54 · 138 阅读 · 0 评论 -
es6...三点运算符的用法
1)举例:let arr = [1,2,3,4]console.log(…arr) //arr的值为1 2 3 42)作用一种function a(){info:{ a:"xi", b:"aa", c:"aas", }}function b(){info1:{ a:"xi", e:"da", f:"as", }}console.log({...a.info,...b.info1})//表示 把a函数info中所有数据摊开和原创 2021-11-25 20:17:09 · 169 阅读 · 0 评论 -
import和link引入公共资源库的区别
1)在App.vue中引入bootstrap<script>import "./assets/css/bootstrap.css";//import引入公共样式方式含有检查,会检查到bootstrap中含有我们没有用到的第三方库,就会报错export default { name: "App",};</script>如果我们整个项目中存在没有用到bootstrap中第三方资源库的时候,import会检查到并且报错,然而link引入就不会。2). 对于整个项原创 2021-11-25 17:04:02 · 266 阅读 · 0 评论 -
AJAX超时与网络异常
AJAX超时与网络异常1)前端部分代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0">原创 2021-11-20 10:05:04 · 387 阅读 · 0 评论 -
AJAX解决IE浏览器缓存的方法
AJAX解决IE浏览器缓存的方法xhr.open(‘GET’,‘http://127.0.0.1:8000/ie?t=’+Date.now());如上: 在ie后加上’… t= ’ +Date.now()原创 2021-11-19 17:08:13 · 201 阅读 · 0 评论 -
AJAX服务端响应JSON
AJAX服务端响应JSON服务端代码://1.引入expressconst express = require('express');//2.创建应用对象const app = express();//3.创建路由规则//request 是对请求报文的封装//response 是对响应报文的封装app.get('/server', (request, response) => {//'/server'就相当于一个url //设置响应头、设置允许跨域 res原创 2021-11-19 15:38:02 · 202 阅读 · 0 评论 -
AJAX请求的基本操作
以AJAX GET请求为例<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &l原创 2021-11-19 11:10:29 · 237 阅读 · 0 评论 -
HTTP协议请求报文与响应文本结构
HTTPHTTP(hypertext transport protocol) 协议【超文本传输协议】,协议详细规定了浏览器和万维网服务器之间互相通信的规则请求报文重点是格式与参数请求行 : POST /s?ie=utf-8… HTTP/1.1请求行包括三部分:请求类型(get post delete push 等) + url路径 + HTTP协议版本如果是GET请求,请求体可以为 空 ,但是POST请求,请求体不为空请求头:Host: baidu.comCooki原创 2021-11-18 17:19:34 · 1830 阅读 · 0 评论 -
原生AJAX
1.1AJAX简介AJAX 全称为 Asynchronous JavaScript And XML , 就是异步的 JS 和 XML通过AJAX可以在浏览器中向服务器发送异步请求,最大的优势: 无刷新获取数据AJAX 不是新的编程语言,而是一种将现有的标准组合在一起使用的新方式。1.2XML简介XML 可扩展标记语言XML 被设计用来传输和存储数据XML 和 HTML 类似,不同的是HTML中都是预定义标签,而XML中没有预定义标签,全都是自定义标签,用来表示一些数据。比如有一个学原创 2021-11-18 16:21:46 · 305 阅读 · 0 评论 -
vue封装的动画效果与vue封装的过度效果
vue中动画效果//创建一个Test组件<template> <div> <button @click="isShow = !isShow">显示/隐藏</button> <transition appear="true"> //当appear = 'true'与只等价的可以只写一个 appear 效果是一样的 <h1 v-show="isShow">你好啊!</h1> &原创 2021-11-17 21:47:04 · 231 阅读 · 0 评论 -
CSS3中动画效果@keyframes
@keyframes@Keyframes mymove{from{ transform: translateX(0%) }to{ transform:translateX(100%) }}解释: 表示mymove这个动画效果可以帮我们移动从0%到100%的效果.div1{transform: translateY(10px);}解释:.div1会沿着y轴方向移动10px.div2{transform: translateX(100px);}解释:.div2原创 2021-11-17 21:20:15 · 443 阅读 · 0 评论 -
nextTick
nextTick1.语法: this.$nextTick(回调函数)2.作用:在下一次DOM更新结束后执行其指定的回调3.什么时候用:当改变数据后,要基于更新后的新DOM进行某些操作时,要在nextTick所 指定的回调函数中执行。//例如创建一个MyItem 组件中的应用<template> <div> <li> <label> <input type="checkbox"原创 2021-11-17 20:08:42 · 280 阅读 · 0 评论 -
vue中关于$event的通俗理解
通过对$event的多次打印结果,可见:$event是指当前触发的是什么事件(鼠标事件,键盘事件等)$event.target则指的是事件触发的目标,即哪一个元素触发了事件,这将直接获取该dom元素下面是例子:<button @click="console.log($event)" name="哈哈">单击</button>由于鼠标点击,所以触发鼠标单击事件,打印出来的是事件,如下图:展开后确实有target属性,且target说明了这是button:实际上展开ta原创 2021-11-17 17:22:11 · 378 阅读 · 2 评论 -
消息订阅与发布(pubsub)
消息订阅与发布(pubsub)1.一种组件间通信的方式,适用于任意组件间通信2.使用步骤:1)安装pubsub库:npm i pubsub-js2)引入:import pubsub from ‘pubsub-js’3.接收数据的写法: A组件想接收数据,则在A组件中订阅消息,订阅的回调留在A组件自身。//定义一个School组件用于接收Student组件传递过来的数据<template> <div class="scl"> <h2>学校名称:{{原创 2021-11-17 15:21:06 · 823 阅读 · 0 评论 -
全局事件总线:任意组件间通信(第一天笔记)
全局事件总线:任意组件间通信分析图:1)线路分析:比如在A组件中给A组件绑定自定义事件demo,而D组件想给A传递数据,则可以通过触发x身上的demo事件,而demo的回调存在于A中,A就可以被触发。2)x需要符合的要求:1.ABCD…所有组件都能看见x2.可以调用 $on $off $emit3).对于 2)中 1 条件的实现,x 是需要添加在Vue原型上的,在原型上的组件可以被所有组件vc看到对于 2)中 2 条件的实现,因为x上要有$on $off $emit,而它们三个又是存在于vm原创 2021-11-17 00:49:05 · 273 阅读 · 0 评论