前端学习
林之.
这个作者很懒,什么都没留下…
展开
-
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 · 466 阅读 · 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 · 17439 阅读 · 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-reverse 2). flex-wrap属性 3). flex-flow 4). justify-content justify-content属性定义了项目在主轴上的对齐方式。 5). align-items align-items属性定义项目在交叉轴上如何对齐。 6).align-content align-cont原创 2022-01-05 00:20:54 · 138 阅读 · 0 评论 -
es6...三点运算符的用法
1)举例: let arr = [1,2,3,4] console.log(…arr) //arr的值为1 2 3 4 2)作用一种 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 · 265 阅读 · 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.引入express const 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协议请求报文与响应文本结构
HTTP HTTP(hypertext transport protocol) 协议【超文本传输协议】,协议详细规定了浏览器和万维网服务器之间互相通信的规则 请求报文 重点是格式与参数 请求行 : POST /s?ie=utf-8… HTTP/1.1 请求行包括三部分:请求类型(get post delete push 等) + url路径 + HTTP协议版本 如果是GET请求,请求体可以为 空 ,但是POST请求,请求体不为空 请求头: Host: baidu.com Cooki原创 2021-11-18 17:19:34 · 1829 阅读 · 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 · 442 阅读 · 0 评论 -
nextTick
nextTick 1.语法: this.$nextTick(回调函数) 2.作用:在下一次DOM更新结束后执行其指定的回调 3.什么时候用:当改变数据后,要基于更新后的新DOM进行某些操作时,要在nextTick所 指定的回调函数中执行。 //例如创建一个MyItem 组件中的应用 <template> <div> <li> <label> <input type="checkbox"原创 2021-11-17 20:08:42 · 279 阅读 · 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 · 377 阅读 · 2 评论 -
消息订阅与发布(pubsub)
消息订阅与发布(pubsub) 1.一种组件间通信的方式,适用于任意组件间通信 2.使用步骤: 1)安装pubsub库:npm i pubsub-js 2)引入: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…所有组件都能看见x 2.可以调用 $on $off $emit 3).对于 2)中 1 条件的实现,x 是需要添加在Vue原型上的,在原型上的组件可以被所有组件vc看到 对于 2)中 2 条件的实现,因为x上要有$on $off $emit,而它们三个又是存在于vm原创 2021-11-17 00:49:05 · 273 阅读 · 0 评论