落栀枫羽-CSDN博客

原创 vue知识点最详细的笔记总结，查缺补漏必备！

1.初识vue想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象；root容器里的代码依然符合html规范，只不过混入了一些特殊的Vue语法；root容器里的代码被称为【Vue模板】；Vue实例和容器是一一对应的；真实开发中只有一个Vue实例，并且会配合着组件一起使用；{{xxx}}中的xxx要写js表达式，且xxx可以自动读取到data中的所有属性；一旦data中的数据发生改变，那么页面中用到该数据的地方也会自动更新；注意区分：js表达式和 js代码(语句) 1

2021-08-27 17:07:41 1439

原创深入浅出谈重绘和回流

1、重绘由于节点(元素)的样式的改变并不影响它在文档流中的位置和文档布局时(比如：color、background-color、outline等), 称为重绘。2、回流当DOM节点中部分或者全部元素的尺寸、结构、布局等发生改变时，浏览器就会重新渲染部分或全部文档的过程称为回流。3、重绘不一定引起回流，而回流一定会引起重绘。会导致回流的操作：页面的首次刷新浏览器的窗口大小发生改变元素的大小或位置发生改变改变字体的大小内容的变化（如：input框的输入，图片的大小）激活css伪类（如

2021-08-27 16:28:55 445

转载 currentTarget和target的区别

currentTarget VS targettarget在事件流的目标阶段；currentTarget在事件流的捕获，目标及冒泡阶段。只有当事件流处在目标阶段的时候，两个的指向才是一样的，而当处于捕获和冒泡阶段的时候，target指向被单击的对象currentTarget指向当前事件活动的对象（一般为父级）。冒泡和捕获当点击页面的一个元素的时候，事件会从这个元素的祖先元素逐层传递下来，这个过程成为事件捕获；当事件传递到这个元素之后，又会把事件逐成传递回去，直到根元素为止，这个阶段是事件的冒泡

2021-08-26 19:53:24 2262 1

原创 css知识点及面试题整理

核心概念和知识点语法CSS 的核心功能是将 CSS 属性设定为特定的值。一个属性与值的键值对被称为声明（declaration）。color: red;复制代码而如果将一个或者多个声明用 {} 包裹起来后，那就组成了一个声明块（declaration block）。{ color: red; text-align: center;}复制代码声明块如果需要作用到对应的 HTML 元素，那还需要加上选择器。选择器和声明块组成了CSS 规则集（CSS ruleset），常简.

2021-08-11 15:19:44 410

原创 HTML面试知识点汇总

1. HTML、XML、XHTML 的区别HTML：超文本标记语言，是语法较为松散的、不严格的Web语言；XML：可扩展的标记语言，主要用于存储数据和结构，可扩展；XHTML：可扩展的超文本标记语言，基于XML，作用与HTML类似，但语法更严格。2. 什么是HTML5以及和HTML的区别是什么概念HTML5是HTML的新标准，其主要目标是无需任何额外的插件如Flash、Silverlight等，就可以传输所有内容。它囊括了动画、视频、丰富的图形用户界面等。HTML5是由万维网联盟（W3C）

2021-08-10 10:22:57 371

原创 NPM和YARN设置淘宝镜像

NPM查询当前镜像npm get registry 设置为淘宝镜像npm config set registry https://registry.npm.taobao.org/设置为官方镜像npm config set registry https://registry.npmjs.org/YARN查询当前镜像yarn config get registry设置为淘宝镜像yarn config set registry https://registry.n

2021-08-09 16:13:33 280

原创 Vuex知识点梳理

Vuex1.概念在Vue中实现集中式状态（数据）管理的一个Vue插件，对vue应用中多个组件的共享状态进行集中式的管理（读/写），也是一种组件间通信的方式，且适用于任意组件间通信。2.何时使用？多个组件需要共享数据时3.搭建vuex环境创建文件：src/store/index.js//引入Vue核心库import Vue from 'vue'//引入Vueximport Vuex from 'vuex'//应用Vuex插件Vue.use(Vuex)//准备acti

2021-08-09 13:19:20 301

原创入门到精通vue-router，下面知识点就够了

路由理解：一个路由（route）就是一组映射关系（key - value），多个路由需要路由器（router）进行管理。前端路由：key是路径，value是组件。1.基本使用安装vue-router，命令：npm i vue-router应用插件：Vue.use(VueRouter)编写router配置项://引入VueRouterimport VueRouter from 'vue-router'//引入Luyou 组件import About from '../co

2021-08-08 16:34:50 122

原创垂直居中div五种常用方式

原创不易，求一键三连！！！1.运用absolute和calc垂直居中 <style> *{ padding: 0; margin: 0; } .demo{

2021-08-08 14:37:47 293

原创 CSS布局flex案例之筛子

CSS布局flex案例之筛子娱乐之余画了个筛子玩玩，纯flex布局，大家有时间可以考虑一下float和position布局.话不多说直接看结果图代码如下<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="vi

2021-08-04 18:28:31 205

原创 CSS布局案例(float-position-flex)

CSS布局案例(float-position-flex)熟练掌握float-position-flex三种布局，一个案例就够了，话不多说，直接上效果图1.Position布局<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <me

2021-08-04 18:12:28 243

转载 32个手写JS，巩固你的JS基础（面试高频）

32个手写JS，巩固你的JS基础（面试高频）作为前端开发，JS是重中之重，最近结束了面试的高峰期，基本上offer也定下来了就等开奖，趁着这个时间总结下32个手写JS问题，这些都是高频面试题，希望对你能有所帮助。关于源码都紧遵规范，都可跑通MDN示例，其余的大多会涉及一些关于JS的应用题和本人面试过程01.数组扁平化数组扁平化是指将一个多维数组变为一个一维数组const arr = [1, [2, [3, [4, 5]]], 6];// => [1, 2, 3, 4, 5, 6]复制代码

2021-08-04 10:18:13 248

原创 Linux必备的基础知识

1.文件类型与目录结构Linux支持5种文件类型：Linux的目录结构如下：Linux文件系统的结构层次鲜明，就像一棵倒立的树，最顶层是其根目录：常见目录说明：/bin：存放二进制可执行文件(ls,cat,mkdir等)，常用命令一般都在这里；/etc：存放系统管理和配置文件；/home：存放所有用户文件的根目录，是用户主目录的基点，比如用户user的主目录就是/home/user，可以用~user表示；/usr ：用于存放系统应用程序；/opt：额外安装的可选应用程

2021-08-04 10:05:22 131

原创 Linux中vim最常见的指令

vim三大模式基础模式(命令模式) : 按 Esc键即可激活----执行删除,撤销,定位等操作末行模式: 基础模式下输入 :键即可激活----执行查找,保存等操作插入模式: 基础模式下输入 i即可激活( A, cw, c$, s也可以)----执行文本插入等操作光标移动:基础模式下的 h j k l 对应小键盘左下上右移动操作:0: 移至行首 $: 移至行尾 gg: 移至全文首行 G: 移至全文末行 nG: 移至第n行 ctrl + g: 查看当前行数 nw: 往前

2021-07-22 12:14:41 77

原创原生JS实现计算器

只能简单的实现加减乘除运算###纯手工制作不容易，求一键三连，效果图如下：<!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-widt

2021-07-19 18:43:53 313 1

原创清除浮动的四种常见方式

为什么要去除浮动？蓝色的div块因为浮动脱离文档流而挡住了红色div的显示，因此我们需要去除浮动让红色div块显示在蓝色div块下面<style> .box1{ width: 200px; height: 200px; background-color: blue; float: left; } .box2{ width: 300px; height: 100px;

2021-07-19 18:32:27 351

空寻的博客