- 博客(36)
- 收藏
- 关注
RSS订阅
原创 JS声明变量var、let 、const(含重点示例)
JavaScript声明变量的方式有三种:var、let、const(es6新增let和const关键词来声明变量).一、varvar是我们初学js时经常使用的一种声明变量的方式.var可以进行变量提升(预解析),只提升变量声明,不提升变量赋值.var可以进行变量的重复定义(后定义的值会覆盖原先定义的值).var定义的变量,只有在function当中定义外部无法访问,其他比如在for,if,while内部定义的都可以在外部进行访问.var定义的变量的作用域是window,可以用"window.
2020-08-22 13:12:16
857
原创 CSS笔记——css阿里图标、iframe内联框架
可以使用 JavaScript 操作 iframe，比如通过 contentWindow 属性获取内嵌页面的 window 对象，通过 contentDocument 属性获取内嵌页面的 document 对象。iframe 可以嵌入其他域的页面，但是由于同源策略的限制，内嵌页面无法直接操作父级页面，也无法获取父级页面的信息。src 属性用于指定内嵌页面的 URL 地址，也可以是相对地址或者外部链接。在阿里图标库中选择所需的图标，点击右侧的“下载代码”按钮，选择“CSS”格式，下载生成的 zip 文件。
2023-09-25 16:24:44
523
原创 CSS笔记——Flex、Grid布局、css响应式布局
Flex 布局是 CSS3 引入的一种新的布局方式，用于创建灵活的、自适应的网页布局，其主要思想是将容器分为一个或多个弹性项目，并且可以通过设置弹性项目的属性来控制其在容器中的排列和分布。弹性盒子布局是一种灵活的布局模式，可以根据容器的大小和内容的大小来自适应地调整布局。使用 Flexbox 布局时，可以将网页中的元素按照一定的比例分配空间，从而实现响应式布局的效果。设置弹性项目的增长因子，用于决定弹性项目的放大比例，默认值为 0。设置弹性项目的收缩因子，用于决定弹性项目的缩小比例，默认值为 1。
2023-09-25 16:15:52
605
原创 CSS笔记——触发式动画Transition、主动式动画Animation、Transfrom 动画、CSS 3D 动画、阴影和滤镜样式
在这个例子中，定义了一个名为 move 的动画，它包含两个关键帧，分别在 0% 和 100% 处，分别定义了 .box 元素的 left 属性的值。第一个参数表示阴影的水平偏移量，第二个参数表示阴影的垂直偏移量，第三个参数表示阴影的模糊半径，第四个参数表示阴影的颜色。用于调整元素的饱和度。属性是 CSS3 中的一个强大属性，它可以为元素添加各种视觉效果，如模糊、颜色调整、亮度、对比度、饱和度等。属性可以为元素添加阴影效果，同时还可以通过调整各个参数的值，实现不同的阴影效果，例如内阴影、多重阴影等。
2023-09-25 15:47:36
1393
原创 CSS笔记——表格元素table单元格合并和妙用（利用table-cell实现块级、多行文本元素水平垂直居中）、表单元素form
HTML中，表格由 table 元素来定义.还有一些用于表格的其他标签，如 caption、thead、tbody、tfoot、th 等。是用于收集用户信息的一组元素。formnovalidate: 定义提交表单数据时是否要忽略表单元素的验证。定义表单元素的值，例如文本框中的默认文本、默认选中的单选框或复选框等。表单元素只读，用户无法修改其值，通常用于展示数据或只读状态的表单元素。禁用表单元素，使其无法接收用户输入，通常用于表单元素不可用的情况。：表单的容器(表单域），用于将表单元素组织在一起。
2023-09-25 15:24:06
4844
原创 CSS笔记——BFC（块级格式化上下文）
在普通流中，元素按照其在 HTML 中的先后位置至上而下布局，在这个过程中，行内元素水平排列，直到当行被占满然后换行，块级元素则会被渲染为完整的一个新行，除非另外指定，否则所有元素默认都是普通流定位，也可以说，普通流中元素的位置由该元素在 HTML 文档中的位置决定。在浮动布局中，元素首先按照普通流的位置出现，然后根据浮动的方向尽可能的向左边或右边偏移，其效果与印刷排版中的文本环绕相似。在绝对定位布局中，元素会整体脱离普通流，因此绝对定位元素不会对其兄弟元素造成影响，而元素具体的位置由绝对定位的坐标决定。
2023-09-25 15:08:54
309
原创 CSS笔记——伪类和伪元素
需要注意的是，在CSS2中，伪元素使用单冒号（:）作为前缀，而在CSS3中，它们使用双冒号（::）作为前缀。同时，在使用伪元素时，必须要设置content属性，否则伪元素的样式不会生效。伪元素允许我们在元素的内容之前或之后添加一些特殊的样式，而不需要添加额外的HTML标记。focus-within ，一个元素获得焦点，该元素的后代都获得焦点，都可触发事件。::first-letter ，首行首字（只能用于块元素）::before ，在前面创建伪元素。::after ，在后面创建伪元素。
2023-09-25 14:56:51
593
原创 CSS笔记——浮动float与定位position及ClearFix解决方案
完全脱离文档流，而是相对于其最近的已定位的祖先元素进行定位，如果没有已定位的祖先元素，则相对于文档的body元素进行定位。类似于absolute，但是元素是相对于浏览器窗口而不是文档进行定位，因此即使用户滚动页面，元素的位置也不会改变。未脱离文档流，但可以通过设置top、bottom、left、right属性来调整元素的位置。当一个元素浮动后，它的父元素高度会坍塌，导致其子元素不再占据父元素高度，影响整个页面布局。当一个元素浮动后，其下面的元素可能会跟随其浮动而移动，导致页面布局混乱。
2023-09-25 14:53:43
342
原创 CSS笔记——background背景样式、圆角样式和渐变色样式
在使用CSS雪碧图时，网页中的多个小图标或图像被组合成一个大的图像文件，并使用CSS的background-position属性将需要的部分显示出来。表示径向渐变的大小，可以是closest-side、closest-corner、farthest-side或farthest-corner；可以使用图片的URL来设置。可以作为JPEG和PNG的替代格式，可以用于加载网站中的图像，减少页面加载时间和网络带宽的使用。可以设置为repeat（默认）、repeat-x、repeat-y和no-repeat。
2023-09-25 14:50:45
2760
原创 CSS笔记——font、line-height知识点及图片间隙、文本溢出等解决方案
：指定字体的名称或类别。可以指定多个字体族，用逗号分隔，浏览器会按照指定的顺序依次寻找可用字体。：指定字体的大小。：指定字体的粗细。：指定字体的风格。：指定字体的大小写形式。：指定字体的紧缩或扩张程度。：指定文本行的高度。可取值：绝对单位：如"px"、“pt”、“mm”、“cm”、“in”。相对单位：如"em（相对父元素的大小）"、“rem（相对根元素的大小）”、“ex（小写字母高度）”、“ch”、“vw”、“vh”、“vmin”、“vmax”。数字：表示字体大小的倍数。
2023-09-25 14:42:35
555
原创 CSS笔记——基本语法及相关知识
是用于定义 HTML 或 XML 文档的样式和布局的语言。它可以让开发者更加灵活地控制页面元素的样式和排版，从而提高页面的可读性和用户体验。
2023-09-25 12:09:10
111
翻译 React学习笔记——官网核心概念学习总结
React官方文档学习笔记React 是一个声明式，高效且灵活的用于构建用户界面的 JavaScript 库。单文件引入使用模板：script引入：<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- 加载 React。--> <!-- 注意: 部署时，将 "deve
2022-01-03 22:00:15
244
原创 React学习笔记——Class组件内this的指向undefined及解决办法
React当中Class组件内的this指向所有在类中定义的方法都默认开启局部严格模式，所以在Class组件当中所以指向window对象的this都指向undefined所有内联的的事件处理处理函数当中的this都指向undefined<script type="text/babel"> class Toggle extends React.Component { constructor(props) { super(props); this.s
2022-01-02 18:35:36
2159
原创 Js当中严格模式下，常见的this指向
Js当中严格模式下this的指向全局作用下的this严格模式下，在全局作用域中，this指向window对象（非严格模式也一样）"use strict"console.log(this,this === window);普通函数当中严格模式下，普通函数中的this指向**undefined ** （非严格模式指向window对象）function Fun02(){ console.log(this)}//严格模式下function Fun01(){ "use stric
2022-01-02 18:07:51
1034
原创 TypeScript学习笔记——TypeScript的接口
Ts的接口TypeScript的核心原则之一是对值所具有的结构进行类型检查。 它有时被称做“鸭式辨型法”或“结构性子类型化”。在TypeScript里，接口的作用就是为这些类型命名和为你的代码或第三方代码定义契约。拓展：UI——User Interface1、为什么要有接口？function Fun(currObj:{a:String}):String{ console.log(currObj.a) return 'abc'}let f1 = Fun({a:'zxc'})上面定义
2021-12-26 13:55:21
728
原创 TypeScript学习笔记——TypeScrip的环境准备、简介、数据类型
TypeScript1、学习准备运行环境： Node：https://nodejs.org/zh-cn/，下载安装检验安装成功：//cmd命令行输入:node -v//返回对应版本号则表示安装成功报错处理：（检查环境变量）在保证已经安装好的情况下，在 控制面板——高级设置——环境变量——path当中检查如果没有配置则新建——将对应的安装路径的bin目录地址复制添加环境变量TypeScript安装：在cmd当中(以管理员身份打开）：安装npm install
2021-12-26 11:49:48
317
原创 Vue3学习笔记——ref、isRef、reactive、isReactive、unRef、toRefs、toRef、readonly、isReadOnly、isPorxy使用
reactive:复杂类型的响应式的数据对象。等价于 vue 2.x 中的 Vue.observable() 函数在对象属性发生变化时，模版是可以 响应更新渲染的： const obj = reactive({name:'dream'})ref :定义基础类型的响应式数据Vue2.x是通过Object.defineProperty()封装的不能很好的监听数组和对象的变化vue3当中的ref通过proxy对数据进行封装监听整个对象的变化所谓代理，可以理解成，在目标对象之..
2021-12-22 15:32:52
583
原创 Vue3学习笔记——Options API和组合式API
optionsAPI(vue2)export default { name: 'baseData', computed：{}，//设置计算属性 data() {return {} },//定义状态 methods: {}, //定义事件方法 watch:{} //设置监听属性}</script>约定在什么位置做什么事，顺其自然地强制了代码分割data里面定义状态methods里面设置事件方法props里面设置接收参数computed里面设置计算..
2021-12-22 14:50:59
3919
原创 vue3学习笔记——Axios使用技巧总结
vue3.0中的Axios使用第一种：axiosaxios是一个库，并不是vue中的第三方插件，使用时不能通过Vue.use()安装插件，需要在原型上进行绑定：引入npm install axios -S1、局部使用（组件内）<script > import axios from "axios"; export default { name:'xxx', methods:{ async getDate(){ return aw
2021-12-17 18:03:03
1745
原创 Promise以及async...await
1、Promise——解决回调地狱Promise是一个构造函数const p1 = new Promise() //表示一个异步的操作Promiseb本身上有all、reject、resolve等方法，Promise.protype原型上包含.then 、.catch等方法用于处理异步状态成功失败的回调Promise.protype.then() ——> p1.__proyo__.then() //原型链三种状态//一般将Promise放在一个函数当中
2021-12-08 13:06:34
187
原创 Js模块化规范（commonJs、Es6模块化）
一、Js模块化常见的模块化规范：1、CommonJS——nodeJS模块化规范规定：每一个文件就是一个模块，拥有自己独立的作用域，变量，以及方法等（采用同步加载方式），对其他的模块都不可见。每个模块内部，module变量代表当前模块。这个变量是一个对象，它的exports属性（即module.exports）是对外的接口。加载某个模块，其实是加载该模块的module.exports属性。require方法用于加载模块。特点：所有代码都运行在模块的作用域内，不会污染全局作用域。
2021-12-08 13:02:17
627
原创 解决在a-table当中单元格合并(支持分页）
解决在a-table当中单元格合并changeRowSpan(value, row, index) { const obj = { children: value, attrs: {} } //计算合并 let spanArr = [] let position = 0 //分页每页十条数据 let currPage = (this.ipagination.current - 1) * 10 // this.dataList 数据列表 let datal
2021-12-03 18:12:42
448
原创 vue项目中main.js配置相关
main.js配置相关1、vueimport Vue from 'vue'2、vue-ls :用于从Vue上下文中使用本地Storage，会话Storage和内存Storageimport Storage from 'vue-ls'options = { namespace: 'vuejs__', // key键前缀 name: 'ls', // 命名Vue变量.[ls]或this.[$ls], storage: 'local', // 存储名称: session, local,
2021-12-03 18:06:54
2464
原创 WebPack总结分享
Webpack:模块化，js、css.资源的模块化组件化，复用现有的结构样式行为规范化，目录结构划分，编码规范化，文档规范化、git分支管理自动化，自动化构建、部署、测试Vue.config.js配置vue.config.js 是一个vue-cli3之后作为可选的配置文件，项目更根目录中存在，它会被 @vue/cli-service 自动加载// const path = require('path')// const CompressionPlugin = require('compr
2021-12-03 18:04:50
514
原创 Vue常见配置文件
Vue常见配置文件.idea存放项目的控制信息，包括版本信息，历史记录等等。如果删除就不能使用idle等进行回溯和复原了.dockerignore 文件中指定在传递给 docker引擎时需要忽略掉的文件或文件夹。.dockerignore之后docker打镜像就快很多了.gitignore 可以避免在提交代码时把我们不想上传的文件提交到git中target/ # 此处可屏蔽target文件夹下的所有文件（包括文件夹）.idea/ # 此处可屏蔽.idea文件夹下的所有文件（包
2021-12-02 18:10:36
3359
原创 总结vue组件之间的通信
vue组件之间的通信1、父子组件通信父组件通过v-bind绑定一个数据传递给子组件，子组件通过props接收到就可以在子组件的html中使用子组件通过this.$emit(“event”，data)发送数据，父组件通过@event = "(val)=>{}"来接受数据2、兄弟组件通信(事件车)bus事件车bus事件车可以用于兄弟组件之间通信，也可以用于更加广泛方式1:bus/index.js//方式1:import Vue from "vue"//事件车实例expor
2021-12-02 17:58:15
316
原创 JSONP解决跨域(含百度数据案例)
一、JSONP及跨域基本知识JSONP,全称JSON with Padding,它可以看做是一种JSON的使用模式,它可以让网页从别的主机(域名)地址当中获取资源,即跨域读取数据.跨域是怎么来的?在浏览器同源策略的限制下，非同源下的请求会产生跨域问题什么是跨域呢?同源策略即：同一协议，同一域名，同一端口号。跨域:当其中一个不满足时，我们的请求即会发生跨域问题举例:http://www.baidu.com:5000到https://www.baidu.com:5000的请求会出现跨域（域
2020-09-09 21:16:12
760
原创 什么是JSON数据格式?
一、什么是 JSON ？JSON 是 JavaScript 对象表示法（全称JavaScript Object Notation）,类似于XML.JSON 是轻量级的文本数据交换格式,它比 XML 更小、更快，更易解析。JSON 独立于语言JSON 具有自我描述性，更易理解JSON 使用 JavaScript 语法来描述数据对象，但是 JSON 仍然独立于语言和平台。JSON 解析器和 JSON库支持许多不同的编程语言。语法规则:JSON 语法是 JavaScript 对象表示法语法的
2020-09-07 15:27:36
17687
原创 普通函数、构造函数及箭头函数的this指向
在JavaScript当中,有关this的指向一直都是初学者比较头疼的一个点,下面分享一些自己对这方面的理解,希望能够帮助到大家!一、普通函数对于普通函数:由于没有对象的或者实例的调用,这就相当于在全局当中打印this,所以this都是指向js的顶级对象window.二、构造函数在构造函数当中,我们只需要记住,this指向的是调用它的实例对象.需要注意的一点,在严格模式下（设置了’use strict’），this就为undefined上面的代码是创建一个基本的构造函数以及实例对象的过程
2020-09-04 01:47:40
956
原创 原生JavaScript实现矩形块大小任意缩放
最近写了一个原生JavaScript实现矩形块大小任意缩放的案例,感觉里面的东西比较的绕,这里分享源码给大家,一起学习一下.<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>原生Ja
2020-08-23 13:32:43
736
原创 js面向对象的几种模式(单例,工厂模式,构造函数模式,组合模式)
一、单例模式单例模式在开发当中,是将一个项目进行分组编写代码的模式,把描述同一个事物或者对象的属性和方法放在一个封装好的函数(内存空间)当中.上面定义了两个具有不同属性和方法的对象数据类型,他们之间互相独立,互不影响.在外部调用内部属性,调用方法为 对象.name在内部调用内部属性,调用方法为 this.name单例模式的优缺点优点:单例模式具有分组的作用,常常用于项目开发中进行模块化开发.缺点:单例模式在创建大量结构相同的对象,需要的工作量大,重复率高,不能够进行批量生成.二、工
2020-08-13 00:30:04
886
1
原创 js闭包总结——含经典案例
闭包总结闭包(Closure),官方点的定义是:内部函数可以对外部函数作用域里的变量进行引用，这个内部函数就是闭包。简单的说，闭包呢就是一个可以引用(读取)其他函数内部变量的一个函数。闭包作为面试以及JavaScript当中的一个重难点，它可以在很多的场景当中灵活的使用，说说它主要的几个特点：可以使得在外部访问内部函数的变量；延长了内部函数生效的作用域链；可以减少全局变量的使用，避免全局变量污染；使得局部变量可以保存在内存当中使用，不被立即销毁(但是可能会造成内存泄漏，因为局部变量会使得一部分
2020-07-30 17:53:20
550
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人