爱敲代码的小李-CSDN博客

原创 BOM之API

API（Application Programming Interface,应用程序编程接口）是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问，或理解内部工作机制的细节。BOM(Browser Object Model) 是指浏览器对象模型，浏览器对象模型提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。BOM由多个对象组成，其中代表浏览器窗口的Window对象是BOM的顶层对象，其他对象都是该对象的子对象。

2023-10-26 09:58:18 235

原创使vue-router 链接变为history模式

在vue-cli 构建的项目中打开文件router/index.js。加上：mode:"history"

2023-10-25 19:15:43 114 1

原创 hash和hisitory的实现原理

hash 模式利用了纯静态技术，解决了单页面应用的页面划分，它可以在不触发网页重新加载的情况下切换 URL路径，配合 onhashchange()可以实现，一旦 URL中的 hash 部分发生变化,就触发函数通知,通过 JavaScript 编程便可以很快速的实现 DOM 对象的切换展示。中，嵌套的子应用和主应用都使用用hash 模式时，由于 hash 模式的 URL 路径只能存在一个#，会导致子应用和主应用在定义URL路上存在困难hash 模式的URL路径中包含#,也会在视觉上导致URL路径不美观。

2023-10-25 19:14:17 107 1

原创 SPA单页面

一旦页面加载完成，SPA 不会因为用户的操作而进行页面的重新加载或跳转；取而代之的是利用路由机制实现 HTML 内容的变换，UI 与用户的交互，避免页面的重新加载。百度爬虫爬取页面的时候只会爬取到index.html和body里面写的一些配置(meta配置)，index.html里面的内容比较少，用户在搜索的时候，会依据meta配置，进行匹配，因为index.html内容少，所以匹配度很低，所以说在SEO方面有着天然的弱势。

2023-10-11 17:35:03 43

原创 vue路由守卫

从上可以看出，我们刚进入页面会经过路由导航的钩子，会先经过全局守卫 beforeEaech，然后经过路由独享的钩子 beforeEnter ，然后经过组件内的钩子 beforeRouteEnter，然后进入beforeResolve（可以理解为导航开始之前进入的最后一道防线），然后到 afterEach ，afterEach进行的时候导航已经完成，没有办法去进行拦截处理，这里适合做一些收尾工作。所有的页面都要经过全局守卫 beforeEaech，它里面适合进行一些公共的逻辑处理。6、解析异步路由组件。

2023-09-19 19:08:12 314

原创 git 一些常用的操作命令及提交规范

git reset --hard HEAD~3 回退到前3次提交之前，依次类推，回退到n次提交之前。git reset --hard commit_id 退到/进到指定commit的sha码`` git checkout -b demo(本地分支) orgin/demo(远端分支) `` git branch -a 查看所有的分支（包括远端分支） ``git add . 提交所有的文件包括(修改、新增、、、)``git add (文件名) 提交某一个文件`` git branch 分支名 `

2023-09-19 14:42:48 147

原创 V-mode的语法及原理

value = "message" Props Down (这个名字是固定的，名字叫 value)以前需要通过 Props Down 和 Event Up 来实现，现在为了方便，提供了一个语法糖：v-mode。props是单向数据流，在子组件只能读取不能修改（对象除外，不建议修改）以前父组件给子组件传值，子组件使用及通过Event Up自定义事件来修改。v-model="message" 语法糖。- 子组件既要使用这个数据。- 子组件还要修改这个数据。现在通过 v-mode 语法糖来实现。

2023-09-18 21:03:57 200

原创在Vue中为什么要将data挂载到Vue实例上，是为了方便嘛？

2、Vue 实例中的数据是用来代理对 data 数据访问的。1、data 中的数据是用来存储的。

2023-09-18 19:35:05 84

原创 CSS样式之grid 布局

Grid布局即网格布局，是一种新的CSS布局模型，比较擅长将一个页面划分为几个主要区域，以及定义这些区域的大小、位置、层次等关系。一、概念1、网格容器（Grid Container）：设置了的父元素，成为一个网格容器，它包含了网格的所有单元格。2、网格项目（Grid Item）：直接放置在网格容器内的元素称为网格项目，它们被放置在网格的单元格中。3、网格行（Grid Row）：网格容器被划分为水平的行，可以通过属性来设定行的数量和高度。

2023-09-18 19:30:26 301

原创 CSS布局之flex布局

02_justify-content 定义容器首尾两端对齐居中等距。03_align-items 定义元素在前、后、居中的对齐方式。04_flex-wrap 超出容器轴线长度自动换行，默认不换行。01_flex-direction 定义主轴方向。

2023-09-18 17:41:44 50

原创 CSS布局（定位、浮动）

（2）父元素宽度如果不够，例如不能放下一个子元素4，那么子元素4在贴边时，会跳过上一个子元素3，向更上一个子元素2进行贴边，如果子元素2后面位置不够，继续跳过子元素2向前面的子元素1进行贴边。（3）如果子元素4在跳过子元素3向更前面的子元素2贴边时，子元素2的高度不高于子元素3，子元素2没有延伸出一个高度的边让子元素4贴边，那么子元素4就会跳过子元素2向子元素1进行贴边。性质：固定定位的元素脱离标准流，让出标准流位置，可以设置宽高，根据偏移量属性可以任意设置在浏览器窗口的位置。

2023-09-18 17:32:45 824

原创 CSS盒模型

盒模型又叫框模型，包含了五个用来描述盒子位置、尺寸的属性，分别是宽度 width、高度 height、内边距padding、边框 border、外边距 margin。盒模型分为标准盒模型(content-box) 和怪异盒模型(border-box)1、标准盒模型（content-box）2、怪异盒模型(border-box)

2023-09-18 16:44:52 34

li17835756262的博客