猫与故巷0214-CSDN博客

原创原型和原型链

原型和原型链一、原型二、prototype三、__proto__四、constructor五、实例与原型六、原型链七、练习八、原型的作用原文链接：https://blog.csdn.net/qq_34645412/article/details/105997336原文链接：https://blog.csdn.net/yucihent/article/details/79424506一、原型什么是原型？原型：每一个javascript对象(除null外)创建的时候，都会与之关联另一个对象，这个对象

2021-08-26 09:50:23 204

原创 Vue-router的使用(vue3.0版本)

vue-router 使用过程一级目录二级目录三级目录一级目录vue-router有三个概念 route, routes, router。1， route，一条路由，它是单数，点击内容后跳转到指定内容，index按钮 => index内容，这是一条route, about按钮 => about 内容，这是另一条路由。2， routes ，一组路由，所有路由组合形成的一个数组。[ {home 按钮 =>home内容 }， { about按钮 => about 内容}

2021-08-23 23:28:00 6771 5

原创前端路由实现（hash、history模式）

前端路由实现（hash、history模式）一、前端路由二、hash模式三、history模式四、补充一、前端路由前端路由是指，不同的url展示不同的页面。前端路由的模式分为两种：hash模式：http://localhost/Day/hash.html#/home 存在一个 # 符号，和普通的url相比有些丑history模式：http://localhost/home 这和普通的URL没有区别，非常好看那么这两种模式的实现原理是什么呢？二、hash模式主要使用:window.loc

2021-08-20 14:41:46 727

原创 Vue异步刷新（Vue.nextTick()）

Vue异步刷新一、Vue.nextTick1.什么是Vue.nextTick()2.Vue.nextTick(callback) 使用原理3.什么时候需要用的Vue.nextTick()4.为什么 this.$nextTick能够获取更新后的 DOM？二、vue 异步刷新在学习Vue异步刷新之前，必须要了解Vue.nextTick()的用法。接下来先学习Vue.nextTick()一、Vue.nextTick1.什么是Vue.nextTick()定义：在下次DOM 更新循环结束之后执行延迟回调。获取

2021-08-16 16:33:25 3041

原创 Vue的数据双向绑定，vue 3 和 vue2 数据劫持

Vue的数据双向绑定，vue 3 和 vue2 数据劫持1.Vue的数据双向绑定2.vue 3 和 vue2 数据劫持区别1.Vue的数据双向绑定Vue的数据双向绑定，其实就是通过数据劫持+发布者订阅者模式来实现的。Observer 通过Object.definePropty进行数据劫持Dep 发布者，添加订阅者以及在数据发生改变的时候通知所有的订阅者Watcher 订阅者，对数据进行观察以及保存数据修改需要触发的回调Compiler 模板编译器，对HTML模板进行编译，提取其中的变量并转化为

2021-08-16 11:10:30 501

原创 Vue响应式原理

Vue响应式原理一、什么是Vue响应式二、实现Vue响应式1.数据劫持/数据代理1.1 方法1.Object.defineProperty1.2 方法2.Proxy2.依赖收集2.1Dep订阅者2.2Watcher观察者3.代码实现三、总结一、什么是Vue响应式数据发生变化后，会重新对页面渲染，这就是Vue响应式。完成这个过程，我们需要：数据劫持 / 数据代理（侦测数据的变化）依赖收集（收集视图依赖了哪些数据）发布订阅模式（数据变化时，自动“通知”需要更新的视图部分，并进行更新）二、实现V

2021-08-16 11:02:46 163

原创 this指向

this指针

2021-08-12 14:36:38 214

原创 Vue父子组件生命周期顺序

Vue父子组件生命周期顺序一、Vue生命周期图二、常见的生命周期函数三、代码举例3.1根组件的beforeCreate阶段3.2根组件的Created阶段3.3根组件的beforeMount阶段3.4子组件的beforeCreate、Created、beforeMount、Mounted阶段3.5子组件的activated阶段3.6父组件的mounted阶段3.7deactivated、beforeUpdate、updated阶段3.8beforeDestroy和destroyed钩子函数间的生命周期四、总

2021-08-11 23:27:15 1257

原创 em,rem,px,rpx的区别与使用

em,rem,px,rpx的区别一、概念二、代码理解三、em继承实例四、使用场景一、概念px像素（Pixel）:相对长度单位。像素px是相对于显示器屏幕分辨率而言的。 px特点1.IE无法调整那些使用px作为单位的字体大小；2.国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位；3.Firefox能够调整px和em，rem，但是有很多人使用IE浏览器(或内核)。em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字

2021-06-09 14:49:34 4019 1

原创 React入门

React一、React概述二、React基本使用1.简单案例实现2.相关js库理解3.创建虚拟dom的两种方式（1）纯js方式（一般不用）（2）jsx方式4.虚拟dom与真实dom三、React JSX语法四、React创建组件的两种方法一、React概述React技术是用于动态构建用户界面的 JavaScript 库(只关注于视图)，是由Facebook开源。React的特点：声明式编码组件化编码React Native 编写原生应用高效（优秀的Diffing算法）React高效的

2021-06-04 21:55:06 278 2

原创 Less复习

Less复习一、Less概述二、Less入门案例三、Less文件编译为CSS文件四、Less语法1.变量2.变量数组3.颜色函数4.数学函数5.作用域6.混合7.匹配模式8.运算9.嵌套规则10.@arguments变量11.避免编译12.!imporant一、Less概述Less是一种CSS的扩展和动态样式表语言，CSS预处理，可以在客户端或服务器端运行，帮助我们自定义，管理和重用网页的样式表。Less 是一门 CSS 预处理语言，它扩充了 CSS 语言，增加了诸如变量、混合（mixin）、函数等功能

2021-05-27 11:35:14 139

原创 Flex案例——垂直居中、导航栏、圣杯布局等

Flex案例一、案例1.弹性容器案例2.弹性元素案例3.flex设置元素垂直居中4.flex布局实现导航栏5.固定百分比布局6.圣杯布局7.固定div在底部一、案例1.弹性容器案例2.弹性元素案例3.flex设置元素垂直居中4.flex布局实现导航栏5.固定百分比布局6.圣杯布局7.固定div在底部...

2021-05-26 18:40:30 2603

原创 Flex复习属性详解

Flex复习一、Flex产生及概述二、Flex基本概念三、属性解析属性预览1.flex-direction2.flex-wrap3.flex-flow4.justify-content5.align-items6.align-content7.order8.flex-grow9.flex-shrink10.flex-basis11.flex12.align-self四、总结一、Flex产生及概述布局，按照传统的解决方案做是基于盒模型，依赖 display 属性 + position属性 + float属

2021-05-25 20:55:54 434

原创 Bootstrap（四）——自定义控件、轮播、模态框、提示框、弹出框

Bootstrap一、轮播二、模态框三、提示框四、弹出框一、轮播二、模态框三、提示框四、弹出框

2021-05-18 20:37:44 3284

原创 Bootstrap（五）——实现一个简单案例

Bootstrap实现一个简单案例1.目的效果2.设计实现1.目的效果2.设计实现<!DOCTYPE html><html lang="en"><head> <title>Bootstrap 4 Website Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-s

2021-05-17 23:12:42 532

原创 BOM模型——Window对象

BOM模型一、概念二、BOM模型对象1.window对象（1）常用属性（2）常用方法2.location对象（1）常用属性（2）常用方法3.history对象（1）常用方法一、概念BOM（browser object model）浏览器对象模型，以顶级对象window衍生出来的一套模型。浏览器页面初始化时，会在内存创建一个全局对象，用来描述当前窗口的属性和状态，这个全局对象被称为浏览器对象模型。BOM模型的作用：将相关的元素组织包装起来，提供给程序设计人员使用，从而减少开发人员的工作量，提高设计Web

2021-05-17 19:18:24 651

原创 Bootstarp（三）—导航栏、表单、表单控件、输入框组

表单表单控件输入框组轮播模态框提示框弹出框

2021-05-17 18:11:33 717

原创 BootStrap（一）—文字排版、颜色、表格、图片、超大屏幕、提示框、按钮

BootStrap一、文字排版二、颜色三、表格四、图片五、超大屏幕六、提示框七、按钮一、文字排版标题h1~h6: Bootstrap 中定义了所有的 HTML 标题（h1 到 h6）的样式Display 标题类: Bootstrap 还提供了四个 Display 类来控制标题的样式: .display-1, .display-2, .display-3, .display-4<small>: Bootstrap 4 中 HTML <small>元素用于创建字号更小的颜色更

2021-05-12 21:05:52 1117

原创 Redis数据库

Redis数据库1、Redis简介2、Redis的window启动3、Redis基础知识4、String类型数据的操作5、List(双向链表)类型的操作6、Set的操作7、Hash类型操作8、Zset数据类型的操作1、Redis简介Redis是一个key-value 存储系统，是跨平台的非关系型数据库。Redis支持数据的持久化，可以将内存中的数据保持在磁盘中，重启的时候可以再次加载进行使用。Redis 通常被称为数据结构服务器，因为值（value）可以是字符串(String)、哈希(Hash)、列表

2021-05-08 17:55:09 248

原创 MySQL启动-SQL语句归纳详解

MySQL1.启动2.对数据库所进行的操作3.对表进行的操作4.SQL语句（1）DDL数据定义语言（2）DML数据操作语言（3）DQL数据查询语句（4）DCL数据控制语言（5）Transaction Control事务控制1.启动打开任意一个管理员命令行窗口，切换到mysql/bin目录下1.net start mysql8不加分号，mysql8是我的服务名，许多人直接是mysql2.mysql -uroot -proot第二个root是我的密码2.对数据库所进行的操作SHOW DA

2021-05-07 20:31:57 987

原创 Bootstarp（二）——进度条，分页，列表组，下拉菜单，折叠（手风琴demo）

Bootstarp实现进度条，分页，列表组，下拉菜单，折叠，导航栏一、进度条1.创建一个基本的进度条2.进度条不同样式demo二、分页1.创建一个基本的分页2.分页不同样式demo3.面包屑导航三、列表组1.创建一个基本的列表组2.列表组不同样式demo四、下拉菜单1.创建一个基本的下拉菜单2.下拉菜单不同样式demo五、折叠1.手风琴实例六、导航一、进度条1.创建一个基本的进度条<div class = "progress"> <div class = "progress-bar

2021-05-01 12:46:54 614

原创盒模型、BFC和塌陷、清除浮动

盒子模型CSS兼容性处理CSS提高性能方法有哪些link，@import区别清楚浮动的方法BFC理解以及塌陷浏览器页面由那三层组成，分别是，作用是？

2021-04-23 22:45:59 233

原创 WEB标准以及W3C、HTML语义化、XHTML-HTML区别、H5新特性、行内元素块元素空元素

文章目录1.对WEB标准以及W3C的理解与认识？2.对于HTML语义化的理解？3.行内元素有哪些？块元素？空元素？4.XHTML和HTML区别？5.h5新特性？1.对WEB标准以及W3C的理解与认识？web标准简单来说是一个页面可以分为结构、表现和行为（其中结构主要是由HTML标签组成，表现即指css样式表，行为是指页面和用户具有一定的交互，同时页面结构或者表现可能会发生变化，主要是由js组成）web标准一般是将该三部分独立分开，使其更具有模块化。但一般产生行为时，就会有结构或者表现的变化，也使这三者

2021-04-22 19:32:39 314

原创 MySQL8安装以及启动过程

文章目录1.下载2.安装3.启动1.下载http://www.mysql.com/downloads/mysql2.安装将文件解压入到自定义的目录下(不要放在中文目录下)配置环境变量 ,将mysql/bin加入到path中用管理员身份启动cmd.exe进入bin目录（如果配置了path，就可以不用）执行初始化，输入：mysqld --initialize --console注意：记住[MY-010454] [Server] A temporary password is gene

2021-04-18 20:54:50 1533 1

原创 mongodb常见指令以及备份恢复

mongodb常见指令1. 创建数据库mydb,并将库作为当前库use mydb2. 查看所有的数据库show dbs ;show databases ;查看当前数据库db;3.插入数据（几乎所有的操作都是以db开头）db.mydb.insert({name:'张无忌'}) ;4.查看当前数据库所有的集合show tables;show collections ；5.查看所有的记录db.mydb.find() ;6.删除集合db..

2021-04-18 00:18:28 520

原创 HTML(二)——列表，表单，iframe框架

HTML——列表，表单，iframe框架1.列表(1)有序列表(2)无序列表(无序没有start属性)2.form表单(1)form表单属性(2)常见的form表单3.iframe框架4.块级元素和内联元素5.总结1.列表列表是一个组合标签：有序列表<ol> <li> / 无序列表<ul> <li>li是列表中的每一个项，<type>属性添加到<ol>或者<ul>里面可以选择不同的排序方式。去掉默认样式用list-

2021-04-16 15:38:47 287

原创 meta标签属性及其功能

meta标签属性及其作用1.meta标签2.meta标签属性(1)name属性(2)http-equiv属性3.meta标签功能(1)帮助主页被各大搜索引擎登录(2)定义页面的使用语言(3)自动刷新并指向新的页面(4)实现网页转换时的动画效果(5)网页定级评价(6)控制页面缓冲(7)控制网页显示的窗口1.meta标签<meta>标签是html语言中，head区的一个辅助性标签。几乎所有的网页里，我们都可看到类似网页中<meta>标签的使用，例如下面这段代码：<head&g

2021-04-16 15:20:05 6604

原创在Win10操作系统下安装Mongodb

mongodb——安装1.下载2.安装3.配置1.下载官网下载：https://www.mongodb.com/try/download/community压缩包下载：2.安装将下载的mongodb的压缩文件放在D:\mongodbservice目录下,解压后将其中的bin目录加入到系统的path环境变量中即可。（注意:mongodb需要一个存放数据文件的路径 D:\mongodb，为了区别，在D盘下创建两个文件夹：mongodbservice和mongodb）3.配置在启动Mon

2021-04-10 20:20:48 167

原创 Bootstrap——栅格系统

Bootstrap——栅格系统BootstrapBootstrap——栅格系统一.Bootstrap简介1.Bootstrap概述2.Bootstrap安装二、Bootstrap栅格系统1.栅格系统2.栅格系统原理规则3.栅格案例栅格系统栅格系统偏移列一.Bootstrap简介1.Bootstrap概述Bootstrap是全球最受欢迎的前端组件库，用于开发响应式布局、移动设备优先的WEB项目。Bootstrap4是一套用于HTML、CSS、JS开发的开源工具集。利用我们提供的大量mixin、响应式

2021-04-09 20:43:55 285

原创 Java Script基础

Java Script基础Java Script基础Java Script基础一、Java Script简介1.概述2.特点二、变量var let三、数据类型1.数据类型2.typeof3.数据类型转换（1）其他类型转换为String类型（2）其他类型转换为number类型四、运算符一、Java Script简介1.概述JavaScript是一种基于对象和事件驱动并具有安全性能的脚本语言，使网页变得生动。由ECMAScript（规定了语法标准）、BOM（浏览器对象模型）、DOM （文档对象模型）组成

2021-03-20 19:43:21 436

猫与故巷的博客