- 博客(44)
- 收藏
- 关注
RSS订阅原创 苏州空天信息研究院前端一面
10.vue底层原理、数据响应式--vue3的原理。2.var let const 区别。9.computed和watch的区别。3.讲到变量提升，问我函数有提升么？data()与闭包的关系？6.为什么data要写成一个函数。电话面试，一个很年轻的男生声音。11.CSS选择器优先级。说他们用到技术是vue。4.异步有几种解决方案。5.浏览器的事件循环。.........
2022-08-14 14:18:23
513
1
原创 git使用
1.安装git一路next即可2.为了方便后续git能跟踪到谁做了修改，我们需要设置对应的用户名和邮箱地址 查看所有的配置 每次提交代码时，用户名和邮箱都会显示在提交记录上git init 初始化仓库 生成.git文件 这个文件非常重要，他所在的文件夹就是仓库，他会记录你所有的变更行为。git status 查看当前仓库的状态git add 将单个文件加入暂存区git add. 将所有变更文件加入暂存区git commit -m 提交本次变更 message............
2022-06-28 22:35:22
782
原创 腾讯云前端实习一面
1.自我介绍2.用的技术栈3.介绍一下项目，选一个详细讲一下4.项目有什么亮点5.项目跨域如何实现6.后端用的什么语言，数据是怎么获得的7.组件间通信几种方式8.项目中遇到什么安全问题（未答出）9.继承有几种方式（未答出）10.闭包，解决了什么11.块级作用域12.view-router了解么，想在路由跳转中传递结构怎么实现（没听懂）13.cookie和localStorage区别？14.向localStorage中添加对象用什么方法，第一个参数是什么，第二个参数是什么 如果想传递一个对象该怎么传递（未答出
2022-06-23 20:01:36
214
原创 JS：选择排序
原理： 在待排序的数列中寻找最大（或者最小）的数字 放在整个序列的起始位置 然后再升序的待排序的数列中继续找最大（最小）放在已排序序列的末尾 以次类推 知道整个数列有序为止 let arr=[12,8,24,16,1] function choice(arr) { //用于交换位置 临时保存数字 let temp = null //保存数字在数组中的位置索引 let min = null ...
2022-05-17 10:59:18
131
原创 JS:插入排序
let arr = [2, 1, 5, 4, 8, 6]; function insert(arr) { //定义一个新数组，用来存储抓在手里的牌，开始先抓一张牌进来。 let handle = []; handle.push(arr[0]); //将原数组的第一项放进来，当做是手里的牌 //从第二项开始依次抓牌，一直把台面上的牌抓光 for (let i = 1; i < arr.length; i++) { //A是新抓的牌...
2022-05-16 10:28:31
225
原创 JS:冒泡排序
/** 冒泡排序思想* 小的泡在下面 大的泡在上面* 让数组中当前项和后一项进行比较 如果前一项比后一项大，则两项交换位置（让大的靠后）即可*/let arr =[12,8,24,16,1]//实现冒泡排序function Bubble(arr) { let temp = null //外城循环 控制比较的轮数 for (let i = 0; i < arr.length -1; i++) { //里层循环控制每一轮比较的次数...
2022-05-13 09:56:34
275
原创 JS：快速排序
// 交换数组中两个元素function swap(arr,i,j) { let temp = arr[i] arr[i] = arr[j] arr[j] = temp}//快速排序(使用递归)/** 思想：先找整个数组的中间项* 把它从原来数组中移除* 获取这一项结果* 准备左右两个数组* 拿出其他的每一项与中间项进行对比 比它小的放左边 比它大的放右边* *//** 递归* 函数自己调用自己* .
2022-05-12 14:44:41
751
原创 防抖与节流
1.防抖：防抖是指在事件触发n秒后再执行回调，如果在n秒内再次被触发，则重新计算时间。（就是在触发某个事件后，在下一次触发之前，中间的间隔时间如果超过设置的时间才会发送请求，一直触发就不会发送请求）前面的所有的触发都被取消，最后一次执行在规定的时间之后才会触发，也就是说连续快速的触发 只会执行一次。通过setTimeout的方式限制函数的执行次数，在一定的时间间隔内，将多次触发变成一次触发<!DOCTYPE html><html lang="en"><head
2022-05-12 10:18:11
112
原创 Vue组件间通信--消息订阅与发布
适用于任何组件间通信1.订阅消息：消息名（需要数据的组件）2.发布消息：消息内容（提供数据的组件）使用步骤： i 安装pubsub：npm i pubsub-js ii 引入: import pubsub from 'pubsub-js' iii 接收数据：A组件想接收B组件数据，则在A组件中订阅消息，订阅的回调留在A组件自身。 methods(){ demo(msgName, data){......} }
2022-04-28 11:44:54
369
原创 this.$nextTick
什么时候需要用Vue.nextTick():参考文章语法：this.$nextTick(回调函数) 作用：在下一次 DOM 更新结束后执行其指定的回调。 什么时候用：当改变数据后，要基于更新后的新DOM进行某些操作时，要在nextTick所指定的回调函数中执行。 Vue.nextTick()： 在下次DOM更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的DOM。 获取更新后的DOM言外之意就是什么操作需要用到了更新...
2022-04-27 21:27:50
276
原创 Vue组件间通信--全局事件总线
一种可以在任意组件间通信的方式，本质上就是一个对象，他必须满足以下条件1.所有的组件对象都必须能看见他2.这个对象必须能够使用 $on $emit $off 方法去绑定、触发和解绑事件使用步骤：安装全局事件总线：new Vue({ ... beforeCreate() { Vue.prototype.$bus = this // 安装全局事件总线，$bus 就是当前应用的 vm }, ...})使用事件总线（1）接收数据：A组件想接收
2022-04-27 20:57:40
120
原创 Vue--生命周期回调函数
生命周期：又名：生命周期回调函数、生命周期函数、生命周期钩子。是什么：Vue在关键时刻帮我们调用的一些特殊名称的函数。生命周期函数的名字不可更改，但函数的具体内容是程序员根据需求编写的。生命周期函数中的this指向是vm或组件实例对象...
2022-04-24 16:16:06
1110
原创 Vue--class和style绑定
绑定class样式三种写法绑定class样式--字符串写法 适用于：样式的类名不确定 需要动态指定<body><div id="root"> <!--绑定class样式--字符串写法 适用于：样式的类名不确定 需要动态指定--> <div class="basic" :class="mood" @click="changMood">{{name}}</div><script type="text/java
2022-04-20 16:43:44
693
原创 Vue组件间通信--Vuex
1.概念 在Vue中实现集中式状态（数据）管理的一个Vue插件，对vue应用中多个组件的共享状态进行集中式的管理（读/写），也是一种组件间通信的方式，且适用于任意组件间通信。2.何时使用？多个组件依赖于同一状态来自不同组件的行为需要变更同一状态3.vuex工作原理如组件Count进行+2操作，通过store.dispatch('jia',2)分发给actionsActions:对象 key是动作类型 value是个函数，在此函数内调用store.commit提...
2022-04-20 16:08:49
1421
原创 Vue-cli解决跨域问题--配置代理服务器
前置知识常用发送ajax请求方式1.xhr ：new XMLHttpRequest()真正开发中不常用，一般都是对xhr进行二次封装2.jQuery（对xhr的封装）核心是对DOM操作，在Vue中引入不合适（Vue的核心就是减少DOM操作）3.axios（对xhr的封装） 最推荐！！！是promise风格支持请求拦截器 和响应拦截器体积小 大约是jQuery的1/44.fetch和xhr是平级的，是js里面内置的方法，可以直接new fetch但是fetch.
2022-04-18 16:54:36
1363
4
原创 Vue项目硅谷外卖（三）
将四个路由组件的静态页面写出，对于最上方的一栏，四个组件具有相同的样式，因此将具有相同样式的部分提取出来设计成一个新的组件，方便复用。公共组件HeaderTop.vue代码如下：<template> <header class="header"><!-- 定义一个插槽（等着组件的使用者进行填充） 这个是具名插槽--> <slot name="left"></slot> <sp..
2022-04-14 10:53:03
1151
原创 Vue项目硅谷外卖（二）
FooterGuide:底部导航栏组件，属于非路由组件FooterGuide.vue<template> <div class="footer_guide"><!-- vue强制动态绑定class、style class/style绑定就是用来专门实现动态样式效果的技术2.class绑定 ：class=‘xxx’xxx是字符串，数组，对象3.style绑定：：style=“{color：activeColor，fontSize：
2022-04-12 19:57:28
183
原创 Vue项目硅谷外卖（一）项目准备
本项目选自尚硅谷Vue实战教程，基于vue-cli2完成。一、项目准备1.创建vue-cli进入到自己要安装项目的文件夹目录，我这里是 “D:\webpackProject\vue-cli2> ” 执行 “vue init webpack vue-cli2-project ” 命令，出现如下图提示 ，“vue-cli2-project” 是我们的项目文件夹的名字，就是最终显示在index.html中的title标签里和package.json中的，也可以自己进行修改，我们一般不会去改，直接
2022-04-12 11:38:04
542
原创 JavaScript创建对象方式
1.Object构造函数模式套路：先创建空Object对象，在动态添加属性/方法适用场景：起始时不确定对象内部数据问题：语句太多2. 对象字面量模式套路：使用{}创建对象，同时指定属性/方法适用场景：起始时对象内部数据是确定的问题：如果创建多个对象，有重复代码3.工厂模式套路：通过工厂函数动态创建对象并返回适用场景：需要创建多个对象问题：对象没有一个具体的类型，都是Object类型4.自定义构造函数模式套路：自定义构造函数，通过new创建对象
2022-04-06 17:00:31
70
原创 JavaScript如何实现继承（六种方式）
大多OO语言都支持两种继承方式： 接口继承和实现继承 ，而ECMAScript中无法实现接口继承，ECMAScript只支持实现继承，而且其实现继承主要是依靠 原型链 来实现。1.原型链基本思想：利用原型让一个引用类型继承另外一个引用类型的属性和方法。构造函数，原型，实例之间的关系：每个构造函数都有一个原型对象，原型对象包含一个指向构造函数的指针，而实例都包含一个指向原型对象的内部指针。原型链实现继承例子：function SuperType() {this.property = t
2022-04-06 15:17:34
2060
原创 CSS预处理器--Less
Less介绍Less变量变量是指没有固定的值，可以改变的。因为我们CSS中的一些颜色和数值等经常使用变量命名规范Less编译本质上，Less包含一套自定义的语法及一个解析器，用户根据这些语法定义自己的样式规则，这些规则最终会通过解析器，编译生成对应的css文件。所以我们需要把Less文件编译生成css文件，这样我们的html页面才能使用Less嵌套如果遇到（交集|伪类|伪元素选择器）内层选择器的前面没有&符号，则它被解析为父选择器的后代...
2022-04-05 14:31:05
105
原创 解决图片底部默认空白缝隙问题
问题出现原因：图片是行内块元素，行内块元素和行内元素是和文字的基线对齐的。所以图片下方会有一条空白缝隙。解决办法：1.不要让图片和文字基线对齐给图片添加vertical-align:middle | top | bottom等。（提倡使用）2.把图片转换为块级元素 display:block;...
2022-03-31 20:38:48
214
原创 实现图片和文字垂直对齐--vertical-align
CSS的vertical-align属性使用场景：经常用于设置图片或者表单（行内块元素）和文字垂直对齐。它只针对于行内元素或者行内块元素有效。
2022-03-31 16:06:23
1421
原创 移动WEB开发（流式布局、flex布局、rem适配布局）
一、流式布局视口：就是浏览器显示页面内容的屏幕区域。视口可以分为布局视口、视觉视口和理想视口。我们移动端布局最想要的是理想视口。理想视口：对设备来说，是最理想的视口尺寸。需要手动添写meta视口标签通知浏览器操作。meta视口标签的主要目的：布局视口的宽度应该与理想视口的宽度一致，简单理解就是设备有多宽，我们的布局的视口就多宽。meta视口标签<meta name="viewport" content="width=device-width, user-scalable=no
2022-03-30 15:39:25
800
原创 Javascript 中 callee 和 caller
1.arguments.callee返回正在执行的函数本身的引用，是arguments的一个属性。当函数的名称未知时，例如匿名函数，使用callee很有用用来代替函数名，降低耦合性注：这个属性只有在函数执行时才有效它有一个length属性，可以用来获得形参的个数，因此可以用来比较形参和实参个数是否一致，即比较arguments.length是否等于arguments.callee.length它可以用来递归匿名函数。2.Function.caller返回调用指定函数的函
2022-03-29 15:40:22
1064
原创 arguments对象
1.在函数调用的时候，浏览器每次都会传递进两个隐式参数函数的上下文对象this封装实参的对象arguments2.arguments 对象arguments 对象实际上是所在函数的一个内置类数组对象每个函数都有一个arguments属性，表示函数的实参集合，这里的实参是重点，就是执行函数时实际传入的参数的集合。arguments不是数组而是一个对象，但它和数组很相似，所以通常称为类数组对象，以后看到类数组其实就表示arguments。arguments对象不能显式的创建，它只有在函数开始
2022-03-29 15:29:51
402
原创 null、undefined、NaN
1.undefined类型Undefined类型只有一个值，即特殊的undefined。在使用var声明变量但未对其加以初始化时，这个变量的值就是undefined。var message;alert(message == undefined); //true引入这个值的目的是为了正式区分空对象指针（null)与未经初始化的变量。不过，包含undefined值的变量和尚未定义的变量还是不一样的。var message;//这个变量声明后默认取得了undefined值//下面
2022-03-29 14:10:48
510
原创 原型与原型链
PrototypeJS中的对象有一个特殊的Prototype内置属性，其实就是对于其他对象的引用。几乎所有的对象在创建时Prototype属性都会被赋予一个非空的值。Prototype引用有什么用呢？当你试图引用对象的属性时会触发Get操作，如果无法在对象本身找到需要的属性，就会继续访问对象的Prototype链，这个过程会持续到找到匹配的属性名或者查找完整条[[Prototype]]链。如果是后者的话，[[Get]]操作的返回值是undefined。使用for..in遍历对象时原理和查找[
2022-03-21 15:17:47
545
原创 函数作用域、块作用域
在ES5中，只有全局作用域和局部作用域。ES6因为let，const的引入而有了块作用域。函数作用域属于这个函数的全部变量都可以在整个函数的范围内使用及复用(在嵌套的作用域中也可以使用)隐藏内部实现可以把变量和函数包裹在一个函数的作用域中，然后用这个作用域来“隐藏”它们为什么"隐藏"变量和函数是一个有用的技术？有很多原因促成了这种基于作用域的隐藏方法。他们大都是从最小特权原则（最小暴露原则）中引申出来的。最小特权原则：在软件设计中，应该最小限度的暴露必要内容，而将其他内容都“隐藏
2022-03-16 17:34:16
263
原创 JS：this
一、this到底是什么？this是一个特别的关键字，被自动定义在所有函数的作用域中。this是在运行时进行绑定的，并不是在编写时绑定，他的上下文取决于函数调用时的各种条件。this的绑定和函数声明的位置没有任何关系，只取决于函数的调用方式。当一个函数被调用时，会创建一个活动记录（执行上下文）。这个记录会包含函数在哪里被调用（调用栈）、函数的调用方式、传入的参数等信息。this就是这个记录的一个属性，会在函数执行的过程中用到。this实际上是在函数被调用时发生的绑定，他指向什么完全取决于函数在
2022-03-16 15:36:26
87
原创 复合选择器
复合选择器可以更准确、更高效的选择目标元素（标签）复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的常用的复合选择器包括：后代选择器、子代选择器、并集选择器、伪类选择器等等1.后代选择器(子孙后代)后代选择器又称为包含选择器，可以选择父元素里面的子元素。语法： 元素1 元素2 {样式声明}表示选择元素1里面的所有元素2（后代元素）2.子选择器（亲儿子选择器）子元素选择器只能选择作为某元素的最近一级子元素，简单理解就是选亲儿子元素。语法： 元素1 > 元素2
2022-03-15 09:59:09
2644
原创 外边距合并、塌陷
使用margin定义块元素的垂直外边距时，可能会出现外边距的合并。1.相邻块元素垂直外边距合并当上下相邻的两个块元素（兄弟关系）相遇时。如果上面的元素有下外边距margin-bottom，下面的元素有上外边距margin-top，则它们之间的垂直间距不是margin-bottom与margin-top之和。取两个值中的较大者这种现象被称为相邻块元素垂直外边距的合并。解决方案：尽量只给一个盒子添加margin值。2.嵌套块元素垂直外边距的塌陷对于两个嵌套关系（父子关系）的块元素、父元素有上
2022-03-14 14:58:13
389
原创 LOGO SEO 优化
1.logo 里面首先放一个h1标签，目的是为了提权，告诉搜索引擎，这个地方很重要。2.h1 里面再放一个链接，可以返回首页的，把logo 的背景图片给链接即可。3.为了搜索引擎收录我们，我们链接里面要放文字（网站名称），但是文字不要显示出来。方法1：text-indent 移到盒子外面（text-indent: -9999px) ，然后overflow:hidden，淘宝的做法。方法2：直接给font-size: 0;就看不到文字了，京东的做法。4.最后给链接一个title属性，这样鼠
2022-03-10 10:55:38
269
原创 CSS-display、visibility、overflow元素的显示与隐藏
本质：让一个元素在页面中隐藏或者显示出来。1.display 属性display 属性用于设置一个元素应如何显示。display: none；隐藏对象display：block；除了转换为块级元素之外，同时还有显示元素的意思display 隐藏元素后，不再占有原来的位置。后面应用及其广泛，搭配JS 可以做很多的网页特效。2.visibility 可见性visibility属性用于指定一个元素应可见还是隐藏。visibility：visible ;元素可视vi.
2022-03-09 21:51:33
591
原创 CSS清除浮动
一、为什么需要清除浮动？由于父级盒子很多情况下，不方便给高度，但是子盒子浮动又不占有位置，最后父级盒子高度为0时，就会影响下面的标准流盒子。由于浮动元素不再占用原文档流的位置，所以它会对后面的元素排版产生影响。二、清除浮动本质...
2022-03-09 15:18:28
61
原创 CSS布局
传统网页布局的三种方式网页布局的本质——用CSS 来摆放盒子。把盒子摆放到相应位置.CSS 提供了三种传统布局方式(简单说,就是盒子如何进行排列顺序)：普通流（标准流）浮动定位一、 标准流（普通流/文档流）所谓的标准流: 就是标签按照规定好默认方式排列.（1） 块级元素会独占一行，从上向下顺序排列。常用元素：div、hr、p、h1~h6、ul、ol、dl、form、table（2）行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行。...
2022-03-09 11:12:51
1147
原创 css3新增选择器
CSS3 给我们新增了选择器，可以更加便捷，更加自由的选择目标元素。1.属性选择器2.结构伪类选择器3.伪元素选择器1.属性选择器（1)利用属性选择器就可以不用借助于类或者id选择器必须是input 同时具有value这个属性 选择这个元素 input[value]{ color:pink; }（2）属性选择器还可以选择属性=值的某些元素 input[type = text]{ co
2022-03-08 20:41:17
436
原创 网站TDK三大标签SEO优化
SEO（Search Engine Optimization）汉译为搜索引擎优化，是一种利用搜索引擎的规则提高网站在有关搜索引擎内自然排名的方式。SEO 的目的是对网站进行深度的优化，从而帮助网站获取免费的流量，进而在搜索引擎上提升网站的排名，提高网站的知名度。页面必须有三个标签用来符合SEO 优化。1. title 网站标题title 具有不可替代性，是我们内页的第一个重要标签，是搜索引擎了解网页的入口和对网页主题归属的最佳判断点。建议：网站名（产品名）-网站的介绍（尽量不要超过30个
2022-03-08 11:21:00
314
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人