浪漫主义码农-CSDN博客

原创你真的了解箭头函数吗

highlight: a11y-darktheme: channing-cyan箭头函数????前言：箭头函数相信大家都使用过，会用的人屡试不爽，怕用错的可能选择不用，多码几行字的事。但是用过的人说真的爽。那么本文就来搞明白箭头函数的玩法。箭头函数使用下面就根据普通函数和箭头函数的对比使用来更加深入的了解使用箭头函数吧1.语法格式上我们普通函数语法格式上是这样的function(){函数体内容}然而我们的箭头函数是这样的，是不是很简洁(参数)=>{函数体内容}????例如：

2021-11-27 13:45:54 1114

原创 Vue监听属性详解

Vue监听属性什么是监听属性？????所谓监听就是对内置对象的状态或者属性变化进行监听并且做出反应的响应，监听属性，意思就是可以监视其他数据的变化。监听属性和计算属性的区别？计算属性是依赖的值改变后重新计算结果更新DOM，会进行缓存。属性监听的是属性值，当定义的值发生变化时，执行相对应的函数。最主要的用途区别：计算属性不能执行异步任务。计算属性一般不会用来向服务器请求或者执行异步任务，因为耗时可能会比较长，我们的计算属性要实时更新。所以这个异步任务就可以用监听属性来做。总之一句话：comp

2021-11-23 20:44:01 2878 3

原创 Vue动态样式你不会吗

Vue动态样式背景：在我们的前端界面中，很多的地方的样式都是不确定的状态，要根据其他内容的变化而变化样式的。本文总结一下自己用到的动态样式方法。一、动态绑定 :style????1.使用对象方式通过v-bind:style来绑定style样式，“”引号里面使用对象的方式，为key，value形式，key值为css属性名，注意的是例如font-size，在key中要写成fontSize驼峰命名规则。value就是我们绑定的值，可以动态去改变。<h1 :style="{ color: Color

2021-11-20 21:28:49 3249

原创 vue计算属性详解

vue计算属性详解什么是计算属性计算属性，字如其名，首先它是属性，其次有计算的“功能”说的官方一点：计算属性就是当其依赖属性的值发生变化时，这个属性的值会自动变化，与之相关的DOM部分也会同步自动更新。计算属性的使用在computed配置项中添加我们的计算属性，在属性里面写我们的逻辑代码。例子：我们使用input来加入数组元素，同时使用计算属性计算这个数组的和。注意：计算属性其实是属性，在页面上使用只需要用属性值，不要带（），不然就变成方法了。代码<template> &

2021-11-19 21:17:09 1525

原创 CSS 特异性看这篇就行了

CSS 特异性背景：在我每次画界面的时候，总会出现样式冲突、样式污染、一级很多样式改不掉的问题。所以总结一文来彻底搞懂css样式的特异性，方便你我他。什么是css特异性？如果有多个属性或者选择器，同时指向同一元素的CSS冲突，那么优先使用什么样式规则。那么便有了特异性的概念。特异性（specificity）视为得分/等级，能够确定最终将哪些样式声明应用于元素。简单来说：CSS特异性就是CSS样式选择器的权重计算。从而让哪些样式应用到元素上。特异性层次每一种选择器都有自己的权重，依次是行内样

2021-11-18 20:43:16 1030

原创 vue中 this.$set的使用

vue中 this.$set的使用背景：在我写前端项目的时候，后端给我们的一个json对象，并且我已经渲染在页面上了。但是由于我自己的需求，想往返回的对象里面添加一个字段，于是我用push一个字段进去,添加是添加进去了，但是页面渲染却没有变化。后来才意识到不是响应式的。如果我们要让这个新字段是响应式的，就要使用到this.$set来注入数据当vue的data里边声明或者已经赋值过的对象或者数组（数组里边的值是对象）时，向对象中添加新的属性，如果更新此属性的值，是不会更新视图的。使用this.$set

2021-11-16 19:56:50 1986

原创 js深拷贝你还不会吗

js深拷贝在讲正题之前我们要先了解数据存储的方式数据存储方式在讲之前我们要先知道值类型和引用类型的存储方式。在JavaScript数据类型中有两种数据类型。值类型：字符串（String）、数字 (Number)、布尔 (Boolean)、空（Null）、未定义（Undefined）、Symbol。存放在栈内存中的简单数据段，数据大小确定，内存空间大小可以分配。引用数据类型：对象 (Object) 、数组 (Array) 、函数 (Function) 。存放在堆内存中的对象，在栈内存中存的是一

2021-11-12 17:48:42 1122 1

原创 CSS伪类总结大全

CSS伪类今天我们来学习下css的伪类。伪类是用来添加一些选择器的特殊效果。伪类和伪元素的区别有些人搞不清楚伪类和伪元素的区别，我们先来讲讲这个。最主要的最核心的区别就是：有没有产生新的元素。使用上伪类使用一个冒号： ,伪元素使用两个冒号 ::伪类可以说是补充了选择器，在页面无标签，但是真实的存在Dom文档中。伪元素是创建了一个新的元素，不存在于Dom文档中，真实不存在的，但又是一个可以装载内容的元素。伪类表示状态的伪类描述:link所有未访问链接:visit

2021-11-11 21:34:38 1468

原创 JavaScript数组方法最全集合

JavaScript数组方法集合本文总结一下js数组处理用到的所有的方法。自己做个笔记。数组方法concat() 合并两个或多个数组concat()能合并两个或者多个数组，不会更改当前数组，而是返回一个新的数组。是一种浅拷贝，可以理解理解为拼接数组，然后返回给一个新数组不会改变原数组 var arr1=[1,2,5] var arr2=[2,4,8] var arr3=[1,1,1] console.log(arr1.concat(arr2))//[1,2,5,2

2021-11-11 09:02:25 453

原创 JavaScript节流与防抖

节流与防抖背景：当我们频繁去请求资源、接口等其他的时候，就会造成操作Dom频繁，接口压力大等等，性能下降。比如我有时候会每次搜索会猛地敲回车，在网络不很好的时候，点击下一页按钮的时候也会一直点，可能网络不好也可能服务器性能低。为了避免频繁触发同一事件或请求，这时候就要用到节流和防抖了。what？这是啥????？当我第一次听到这两个名字的时候，心想是指节省流量、防止手抖吗。百思不得其解，赶紧就去学习。概念：简单来说：节流和防抖就是为了防止事件在短时间内多次触发的两种解决方案。都是用过减少请求的次数，

2021-11-10 17:03:51 808 1

原创 CSS3动画属性，这么简单

CSS3动画属性简单来说：动画就是把一帧一帧的画面连接起来。，以一定的速度连续播放时，视觉差看不出来，这就是动画。知道了动画的概念，那就明白了怎么去实现，我们就要把每一帧的画面长什么样子画出来，然后以一定的速度连接起来就行了。????那么有人就会问和过渡有什么区别呢？区别在于：transition需要触发一个事件才会随着时间改变其CSS属性；animation在不需要触发任何，事件的情况下，也可以显式的随时间变化来改变元素CSS属性，达到一种动画的效果。过渡只有两帧，开始和结束，其余都是靠补间

2021-11-07 16:20:31 263

原创 CSS3过渡属性

CSS3过渡属性????????????????学习css3高级这两个是必须要掌握的知识点。本文我们就来了解一下过渡和简单使用。过渡 transition过渡就和它的名字一样，表示可以从一种样式转变到另一种样式，这是一个状态的转变，比如悬浮、点击等等。过渡可以为一个元素在不同样式之间变化自动添加“补间动画”我们通过属性transition来定义一个元素的过渡状态。transition是四个属性的合写形式。其中只有transition-duration是必填属性transition-pro

2021-11-06 17:15:33 584

原创伪元素，这不是有手就行

伪元素你以为这个火箭是一张图片吗？它只是四个div，其余都是伪元素实现的效果。伪元素是什么呢?字面上就可以了解,伪元素–伪装的元素,就是页面不存在的元素.,用于创建一些不在DOM树中的元素，并为其添加样式。那么我们就要区分伪元素和伪类的区别?有没有创建一个文档树之外的元素。我们在css3规范中要求使用双冒号（::）表示伪元素，一个冒号（:）表示伪元素,以此来区分伪类和伪元素伪元素的使用伪元素只有以下这些:主要应用于设置元素的首字母、首行的样式、在元素的内容之前或之后插入内容选择

2021-11-05 11:49:57 504

原创双十一的浪漫，快去表白

酷炫相册，手把手教你前面总结了2D/3D转换的是知识点，就想着来一点小练习。准备写一个好看的相册。如下图效果。1.分析并实现我们来分析一下。这张图的结构。我们要知道x,y,z每条轴旋转的效果。关于2D/3D平移的知识看上一篇博客。1. 要让所有图片从一个div出来，首先应该是六张图片在一个容器里面，并且在一个平面上重叠着我们应该控制一下图片的大小都是一样的，不然效果会不好。<style> * { padding: 0; margin: 0;

2021-11-04 09:03:34 234

原创 CSS3 2D/3D转换手把手教你

2D/3D转换CSS 转换（transforms）允许您移动、旋转、缩放和倾斜元素。2D转换主要通过transform 属性，该属性使用函数来定义的。包含以下方法1.位移translate（）：translate（x）接受一个参数表示沿x轴位移x像素，沿y轴默认为0，接受两个参数translate（x,y）表示沿x轴位移的距离和沿y轴位移的距离分开写法translateX(x) 、translateY(y)数值可以为正负例子：<body> <div clas

2021-11-03 08:54:53 428

原创 CSS渐变背景看这一篇就够了

CSS渐变背景看这一篇就够了在我们自己设计网页的时候，为了好看美观，颜色可谓是最让人头疼的一部分。尤其是在配色上又找不到一些好看的网站。今天我就来记录一些好看的渐变式背景，和一些常用的颜色网站。CSS 渐变使可以显示两种或多种指定颜色之间的平滑过渡。让我们来玩一玩，看能玩出什么花来。CSS 定义了两种渐变类型：一、线性渐变（向下/向上/向左/向右/对角线）我们通过属性 linear-gradient来这样定义一个线性渐变。background-image: linear-gradient( 方向

2021-11-01 09:11:10 69119 5

原创布局的神---网格布局最全总结，建议点赞收藏

网格布局一、什么是网格布局网格布局，顾名思义就是像网一样有一个个格子一样的布局。在一个容器里面，我们可以切割成很多行很多列，形成一个个网格，从而对这些网格进行规则性的排序，使用，达到我们复杂的页面布局效果。Grid 布局与 Flex 布局有一定的相似性，都可以指定容器内部多个项目的位置。但是，它们也存在重大区别。Flex 布局是轴线布局，有主轴和侧轴之分，只能指定容器内子元素针对轴线的位置，可以看作是一维布局。Grid 布局则是将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，

2021-10-25 20:59:56 14041 6

原创分享给你一个酷炫的前端组件库，还不用起来？

fancy-components 一个酷炫的前端组件库大伙前端都是用什么组件库的呢？我最近刚发现前端一个很好看、很炫酷的组件库。那就是fancy-components ，简直是“酷炫”极了。自己要是不想写复杂的样式，下面我来带大家了解下这个组件库。一. 组件展示翻译成中文就是是花式组件，也就是花里胡哨的意思。确实有点花里胡哨。下面看一下最基本的样式。二. 组件的使用和详细属性使用这个组件库非常的简单。在一般的html中只需要在script 中引入type=“moudle”，然后在导入需要

2021-10-24 18:00:00 2452 8

原创 vue 解决axios请求出现前端跨域问题

vue 解决axios请求出现前端跨域问题首先祝大家1024节日快乐最近在写纯前端的vue项目的时候，碰到了axios请求本机的资源的时候，出现了访问报404的问题。这就让我很难受。查询了资料原来是跨域的问题。在正常开发中跨域问题有很多的解决方案。最常见的就是后端修改响应头。但是前端也可以解决，通过反向代理。为了防止下一次这样的错误出现，记录一下，总结一下。所以现在我们来复盘一下，然后解决掉。一、为什么会出现跨域的问题？跨域：浏览器从一个域名的网页去请求另一个域名的资源时，域名、端口、协议任一

2021-10-24 13:27:07 1228 1

原创 5分钟掌握Vuex，深入浅出

5分钟让你掌握Vuex，深入浅出一、什么是Vuex？概念：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。简单点来说（说人话），就是实现任意组件中通信，并可以检测数据的变化。二、Vuex原理Vuex是集中于MVC模式中的Model层，规定所有的数据操作必须通过 action - mutation - state 的流程来进行，再结合Vue的数据视图v-moder等双向绑定特性来实现页面的展示

2021-10-20 13:30:33 355 2

原创想实现前端酷炫的打字机效果吗

实现酷炫的打字机效果插件typed.js前言：最近在写前端项目的过程中，在逛别人的优质的个人博客的时候，发现一个好玩有趣的东西。看下图，类似在打字的效果，然后又在思考的感觉，感觉整个网页都充满了思想。于是我就去百度这种效果怎么实现。有很多原生的实现办法，但几乎都是js在操作Dom元素，但是我是在vue项目上编写的，显然不妥。这个时候发现了typed.js，他会在vue使用的时候多封装了一层，使得不是操作dom。现在带你们了解下这个插件。一、typed.js的介绍typed.js是一个类型化库，效果

2021-10-18 09:30:33 4411 12

原创我用CSS画了个火箭送嫦娥妹妹回家

我用CSS画了个火箭送嫦娥妹妹回家就在8月17号我国神州十二号载人飞船顺利回家。又恰逢中秋佳节，真是值得庆祝的一天。我这灵机一动，就想着开火箭送嫦娥妹妹回家，哈哈~先来看看简陋的作品。接下来看看怎么实现一、元素<body> <div class="moon"></div> <div class="rocket"> <div class="left"></div> <div

2021-09-18 21:48:24 408 2

原创 Vue中v-for循环语句使用，以及其中key的原理

Vue中v-for循环语句使用，以及其中key的原理一、列表渲染在我们使用v-for的场景中，使用最多的就是用来渲染列表。渲染的数据主要有数组、对象、字符串等。常用的三种：遍历数组迭代对象字符串遍历指定次数代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" conten

2021-09-15 20:35:26 686

原创解决看网课鼠标不能移开，视频不能加速

解决看网课鼠标不能移开，视频不能加速在看网课的痛苦时期，鼠标不能移开，简直是毫无人性。我只是想边学习边做笔记。๑乛◡乛๑ (●´∀｀●)接下来献上解决办法。仅供学习知识。以某网课为例。鼠标不能移离网页界面问题总所周知鼠标的监听事件一直是页面时刻捕捉的。那么我们是不是可以在控制台解决呢。打开F12开发者调试工具，找到并点击Event Listeners（事件监听）移除鼠标监听，就可以离开页面了视频不能加速问题打开F12开发者调试工具，选中视频，打开控制台一定要选中视频所在的

2021-07-23 16:57:21 12616 16

原创 CSS 弹性盒子布局详解

CSS 弹性盒子弹性盒子是CSS3的一种新布局模式。是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。弹性盒子布局是一种在前端HTML开发中比较常用的布局方式，还有一些像网格布局，我比较喜欢用弹性盒子布局。引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。一、介绍在学习弹性盒子我们必须掌握的：容器存在两条轴：横轴和纵轴父容器属性定义为display：flex，表示该元素内部是弹性盒子布局大体结构分为一个父

2021-07-07 16:29:15 4950

原创 vue router路由的最全介绍和使用（一）

vue router路由的介绍和使用一、路由的介绍对于 Vue 这类渐进式前端开发框架，为了构建 SPA（单页面应用），需要引入前端路由系统，这也就是 Vue-Router 存在的意义。前端路由的核心，就在于 —— 改变视图的同时不会向后端发出请求。路由的使用在vue是重点，也是核心所在。Vue.js 路由允许我们通过不同的 URL 访问不同的内容。就是我在页面点击一个按钮需要跳转到对应的页面，这就是路由跳转学习路由我们得知道route、routes、router：route：首先它是个单数，为

2021-07-05 17:30:35 2830 4

原创 Vue安装环境最全教程，傻瓜式安装

Vue安装环境最全教程在我开始学习vue的时候，对于新手安装这个环境是真的搞人心态，不友好。在不断的安装，找教程，又帮同学配置了下，有必要自己总结下。对于新手搭建vue环境，就一步步来就ok了。在用 Vue 构建大型应用时推荐使用 NPM 安装。NPM 能很好地和诸如 webpack 或 Browserify 模块打包器配合使用。同时 Vue 也提供配套工具来开发单文件组件。一、需要的工具在我们安装之前知道下面的东西，也是vue项目的核心。node.js环境（npm包管理器）vue-cli 脚

2021-06-30 21:43:20 50257 43

原创 vue-cli Failed to download repo vuejs-templates/webpack连接超时解决办法

vue-cli Failed to download repo vuejs-templates/webpack连接超时解决办法在我配置完nmp、node.js、vue-cli环境，准备创建项目进行最后一步的测试的时候Vue init webpack 项目名总是失败，都是报这个错，原因是因为无法连接外网或者连接超时导致经过查阅资料，记录下自己的错误。解决的办法是使用离线下载，我们需要下载github仓库中的vue-templates/webpack，然后解压到本地。：需要手动下载 webpac

2021-06-19 19:05:19 3742 2

原创 Android之Spinner使用详解

Spinner(列表选择框)的基本使用当我们的app需要用户输入数据时，除了让用户自己打字以外，还有一种比较贴心的设计: 列出一组选项让用户从中挑选，从而方便了我们的用户！一、常用的属性属性名作用android:dropDownHorizontalOffset设置列表框的水平偏移距离android:dropDownVerticalOffset设置列表框的水平竖直距离android:dropDownSelector列表框被选中时的背景android:dropD

2021-06-16 13:10:22 35260

原创 Android的菜单栏Menu用法详解（超详细）

菜单栏Menu用法讲解菜单是Android应用中非常重要且常见的组成部分。能够极大的节省我们页面的使用空间，提高页面的利用率。安卓常用的菜单有三种：OptionMenu：选项菜单，android中最常见的菜单，通过Menu键来调用ContextMenu：上下文菜单，通过长按某个视图组件后出现的菜单，该组件需注册上下文菜单SubMenu：子菜单，android中点击子菜单将弹出一个显示子菜单项的悬浮框，子菜单不支持嵌套，即不能包括其他子菜单定义菜单的方式一直接通过编写菜单XML文件，然后

2021-06-10 21:02:23 31519 12

原创 IntelliJ IDEA连接Mysql数据库和出现的问题（最详细）

IntelliJ IDEA 连接数据库的问题一、连接 mysql数据库点击边框的DataBase > + >Data Source > MySQL（下图所示）初次配置的时候可能没有驱动，点击下载就好了（下图所示）下载完驱动后，在Data Sources填写需要的属性，详情看图4. 正常情况下，测试连接成功。勾选自己需要用到的数据库就行。Apply，ok一下就行了。6. 连接成功就会显示你的数据库和表二、连接遇到Server returns inva

2021-06-08 11:52:58 21278

原创 Android 最常用的四种底部导航栏实现

Android 底部导航栏实现底部导航栏的应用非常的广泛。今天就总结下几种实现的方式。一、Fragment + TextView 实现前面一篇博客在介绍Fragment 的时候就使用了Fragment + ImageView 实现了一个底部导航栏点击的例子，只要吧ImageView 替换为TextView 是一样的实现。这里就详细介绍了，可以看这篇博客Android之Fragment的概述和使用这种方式每次点击我们都要重置所有TextView的状态，然后选中点击的TextView二、Radio

2021-05-29 10:44:15 40374 47

原创 Android之ViewFlipper使用详解

ViewFlipper的介绍和使用ViewFlipper是Android自带的一个多页面管理控件，且可以自动播放！和ViewPager不同，ViewPager是一页页的，而ViewFlipper则是一层层的，和ViewPager一样，很多时候，用来实现进入应用后的引导页，或者用于图片轮播。一、常用的属性和方法属性：android:inAnimation //设置View或ImageView进入屏幕时使用的动画android:outAnimation //设置View或ImageVie

2021-05-27 21:39:57 9735 8

原创 Android之ViewPager的简单使用

Android ViewPager的简单使用Android 3.0后引入的一个UI控件——ViewPager(视图滑动切换工具)功能：通过手势滑动可以完成View的切换，一般是用来做APP 的引导页或者实现图片轮播，因为是3.0后引入的，如果想在低版本下使用，就需要引入v4 兼容包ViewPager就是一个简单的页面切换组件，我们可以往里面填充多个View，然后我们可以左右滑动，从而切换不同的View，我们可以通过setPageTransformer()方法为我们的ViewPager 设置切换时

2021-05-26 21:04:42 21080 11

原创 Android之Fragment的概述和使用

Fragment的概述和使用Android 自 3.0 版本开始引入了碎片的概念，它可以让界面在平板上更好地展示，支持更加动态和灵活的UI设计。一、什么是碎片碎片（Fragment）是一种可以嵌入在活动当中的 UI 片段，它能让程序更加合理和充分地利用大屏幕的空间Fragment表示应用界面中可重复使用的一部分。Fragment 定义和管理自己的布局，具有自己的生命周期，并且可以处理自己的输入事件。Fragment 不能独立存在，而是必须由 Activity 或另一个 Fragment 托管。Fr

2021-05-25 21:17:18 6242 5

空空如也

空空如也