- 博客(37)
- 收藏
- 关注
原创 TS和JS,type和interface
概念:Ts是一个渐进式包含类型的js超集,它的作用就是为js变量提供类型支持,可以实现静态检查,高效的重构代码以及寻找bug,将js切换为基于类的面向对象的语言。最后,ts都会被编译成简单的js代码,可以使用一些js没有提供的面向对象的概念,比如说接口属性泛型。允许我们在编译的时候对代码进行错误检测和类型检测。特点:面向项目:TS - 面向解决大型的复杂项目、架构、代码维护复杂场景JS - 脚本化语言,用于面向简单页面场景自主检测:TS - 编译时,主动发现并纠正错误。
2022-09-29 23:06:17
1623
原创 router-link渲染到了ul下的li的a标签上
解决router-link渲染到a标签上的问题(1)问题:(2)解决方法:tag 改变渲染标签 <ul class="nav"> <li v-for="(item, index) in navlist1" :key="index" > <router-link tag="div" :to="item.link" exact>{{ item.name }}</router-link> </l
2022-05-28 21:58:08
275
原创 Vue-Cli脚手架的搭建
在安装vue-cli前,要确认自己的电脑是否安装了nodejs、npm和cnpm等等。一、vue-cli1.搭建vue官网找到vue-cli的官网在node终端中输入命令npm install -g @vue/cli可以选择第三个自定义配置。2. 查看vue-cli的版本号vue -V或者vue --version3.创建新项目vue create Demoname4.启动项目切换终端目录到自己的项目下cd Demoname运行项目npm ru
2022-03-07 21:26:33
404
原创 安装nvm、node、yarn、npm和cnpm
0.nvm构建reactNavite的关系图:nvm的好处就是多版本控制node1.首先卸载干净node2.切记要以管理员身份运行cmd.exe和vscode找到从cmd.exe路径为:C:\Windows\System32右键以管理员身份运行找到vscode右键以管理员身份运行3.安装nvm和node找到nvm的官网,https://github.com/coreybutler/nvm-windows/releases下载安装包nvm-setup.zip,然后按照提示完成安装即
2021-12-29 11:10:58
732
原创 隐式转换 valueOf 和 toString
// 大致规律:对象-->字符串-->数值<--布尔 //不同类型的==: // 一个值是bool,比较前,false转成0, true转成1 // 一个值是字符串,另一个是数字,比较前字符串转成数字 // 一个值是对象,另一个不是,则调用对象的valueOf方法,用得到的基本类型值按照上面的两条规则比较 // null和undefined是相等的 // 比较相等之前,null和undefined不能转换成其他任何值 // N...
2021-12-02 14:46:28
425
原创 ES6——Promise
promise是异步编程的新的解决方案( ES6 规范),它是一个构造函数。可以实例化对象,封装异步操作,获取成功和失败的结果。优点:支持链式调用,可以解决地狱回调问题,执行的方式更为灵活。promise初体验——抽奖。
2021-11-29 19:20:05
282
原创 cookie
cookie:由网络服务器发送出来存储在网络浏览器上,在电脑上的文本文件中。以‘名/值对’的形式展示。读取cookie:var cook=document.cookie;创建:document.cookie=‘username=Job’;添加过期时间:document.cookie=‘expires=The,18,Dec 2043 12:00:00 GMT’;添加cookie路径:document.cookie=‘path=/’;修改cookie:重新赋值即可。删除cookie:docume
2021-11-08 19:21:34
69
原创 vue前端面试题
1、vue的生命周期钩子总共有几个,每一个生命周期主要是做什么事?8个生命周期钩子beforeCreatevue实例的挂载元素$el和函数data都为undefined,数据还未初始化createddata数据初始化、可以操作data、methods,处理与数据相关逻辑$el还没有,不能进行DOM操作请求数据可以放在这里beforeMount虚拟DOM节点mountedDOM节点渲染完成,可以操作DOM节点beforeUpdate只要修改值就会重复执行updated
2021-11-08 19:18:07
180
原创 前端(调试)工具以及白屏和卡顿
Texture Packet:处理大图片,应用场景:雪碧图。查看网络 network控制台打断点postman调接口白屏:问题:渲染没出来。js引擎停止。解决:代码出错。卡顿:问题:浏览器的性能下降:大量使用闭包内存溢出,页面图片太大,加载时间太久。计时器调用频繁。没有使用防抖或节流。解决:不再使用变量时及时进行垃圾回收机制回收,尽量减少闭包。图片大小减少。清晰度:雪碧图,懒加载和预加载。...
2021-10-28 16:03:35
292
原创 单页面与多页面的区别
单页面与多页面的区别单页面:第一次进入页面会请求一个HTML文件,刷新清除切换到其他页面,是JS销毁并重新渲染的过程,内容发生改变,但不会返回新的HTML文件,这种网站叫单页面网站(单页面应用)原理:JS感知url的变化,可以动态地清除当前页面,然后挂载下一个页面的内容,由前端的路由控制切换,每次跳转都不需要请求新的html文件。优点:页面切换较快。缺点:首屏渲染较慢,SEO差。多页面:每次页面跳转的时候,后台服务器都会返回一个新的HTML 文件,这种类型叫多页面网站(多页面应用)优点:首屏
2021-10-25 11:01:56
3078
转载 webpack
将代码解析成抽象语法树(AST),每个 js 引擎(比如 Chrome 浏览器中的 V8 引擎)都有自己的 AST 解析器,而 Babel 是通过 Babylon 实现的。他把最新版的 javascript 编译成当下可以执行的版本,简言之,利用 babel 就可以让我们在当前的项目中随意的使用这些新最新的 es6,甚至 es7 的语法。这部分也是 Babel 插件介入工作的部分。Babel 的三个主要处理步骤分别是: 解析(parse),转换(transform),生成(generate)。
2021-10-24 20:58:07
641
原创 vuex
vuex 是什么?怎么使用?哪些功能场景使用它?答:vue框架中状态管理。在 main.js 引入 store,注入。新建了一个目录store.js,…export。场景有:单页应用中,组件之间的状态。音乐播放、登陆状态、加入购物车2.vuex有哪几种属性?答:有五种,分别是 State、Getter、Mutation、Action、Modulestate => 基本数据(数据源存放地)getters => 从基本数据派生出来的数据mutations => 体积更改数据的.
2021-10-23 09:22:09
97
原创 Linux操作系统(3.2.14find)
一、linux开发运维环境安装及部署1.虚拟机的新建 典型->稍后安装操作系统->选择Centos7 64->设置虚拟机名称及存储路径(默认)->最大磁盘容量(20GB)、单个文件存储->自定义硬件->内存(2GB)、CPU 1颗 8核心(自定)、“新CD/DVD”中使用“使用ISO镜像”设置镜像文件存储路径、网络适配器选择NAT模式->关闭'2.配置分区(至少三个)(点击+添加分区)(1)/:根分区,期望容量处不填写,代表剩余空间全部分配(2)/b
2021-10-13 12:35:24
502
转载 面向对象的理解
例如,你想吃鱼香肉丝,面向过程就是买菜买调料做菜出锅吃鱼香肉丝这一系列的逻辑过程,而面向对象就是找个餐馆点一个鱼香肉丝付钱就能吃了。面向对象就是把事物对象化,包括属性和行为,建立对象的目的不是为了完成一个步骤,而是为了描叙某个事物在整个解决问题的步骤中的行为。JS面向对象...
2021-10-13 12:14:25
78
原创 cmoputed和method和watch的区别
watch可以没有返回值,它只依赖于一个值,这个值可以影响到多个值的变化。computed必须有返回值,根据返回值,才能知道依赖的关系,然后数据发生变化就触发该函数。计算属性是基于它们的依赖进行缓存的。method只要页面重新渲染就会调用并触发相应的函数。...
2021-09-24 11:37:51
115
原创 函数声明和函数表达式的区别:
函数声明和函数表达式的区别:function sum(){};函数声明,和var一样,会被提前到代码最前面定义。fn1();// 1function fn1(){ console.log(1);}var sum=function(){};函数表达式,函数在代码执行的当前才被执行,sum才被赋值。fn2();//报错var fn2 = function(){ console.log(2);}区别:(1)函数声明定义的函数,函数名是必须的,而函数表达式的函数名是可选的。(函
2021-09-23 17:39:48
1332
2
原创 MVC和MVVM
MVVM 是Model-View-ViewModel 的缩写,它是一种基于前端开发的架构模式,其核心是提供对View 和 ViewModel 的双向数据绑定,这使得ViewModel 的状态改变可以自动传递给 View,即所谓的数据双向绑定。Vue.js 是一个提供了 MVVM 风格的双向数据绑定的 Javascript 库,专注于View 层。它的核心是 MVVM 中的 VM,也就是 ViewModel。 ViewModel负责连接 View 和 Model,保证视图和数据的一致性,这种轻量级的架构让前
2021-09-22 15:55:25
322
原创 强缓存和协商缓存
1.强缓存和协商缓存强缓存只有第一次需要与服务端进行交互,在http1.0协议中,如果命中强缓存,会有exprices的请求头,会设置一个绝对时间,在这个时间有效之前,都使用强缓存,标识为memory cache在http1.1中,强缓存的请求头为cache-control:max-age:3600。这是设置了一个相对时间,在这个时间有效之前,都使用强缓存。强缓存的返回的状态码为200协商缓存是指每一次都要与服务器进行交互。先判断这个资源有没有过期,如果未过期,查看资源有没有被修改,没有被修改使用缓
2021-09-22 15:47:06
1760
原创 输入url到页面展示经历了什么过程?
输入url到页面展示经历了什么过程?1、浏览器的地址栏输入URL并按下回车。 2、浏览器查找当前URL的DNS缓存记录。 3、根据解析出的IP地址+端口, 4、请求到达传输层,tcp协议为传输报文提供可靠的字节流传输服务,它通过三次握手等手段来保证传输过程中的安全可靠。通过对大块数据的分割成一个个报文段的方式提供给大量数据的便携传输 5、HTTP发起请求,请求中携带(请求头header、请求体body)。 6、服务器处理请求,浏览器接收HTTP响应。 7、渲染页面,构建DOM树。
2021-09-22 15:46:26
390
原创 http和https
http和https的区别?参考答案:http传输的数据都是未加密的,也就是明文的,网景公司设置了SSL协议来对http协议传输的数据进行加密处理,简单来说https协议是由http和ssl协议构建的可进行加密传输和身份认证的网络协议,比http协议的安全性更高。主要的区别如下:Https协议需要ca证书,费用较高。http是超文本传输协议,信息是明文传输,https则是具有安全性的ssl加密传输协议。使用不同的链接方式,端口也不同,http协议的端口为80,https的端口为443。http
2021-09-22 15:43:07
162
原创 HTTP状态码
http常见的状态码: 100 Continue 继续,一般在发送post请求时,已发送了http header之后服务端将返回此信息,表示确认,之后发送具体参数信息 200 OK 正常返回信息 201 Created 请求成功并且服务器创建了新的资源202 Accepted 服务器已接受请求,但尚未处理204 (无内容) 服务器成功处理了请求,但没有返回任何内容 301 Moved Permanently 请求的网页已永久移动到新位置。 服务器返回此响应(对 GET 或 HEAD 请求
2021-09-22 15:41:39
50
原创 new一个新对象的过程:
new一个新对象的过程:(1)先创建了一个新对象 var person={};(2)将这个对象的_proto_的指针指向了这个构造函数的原型对象prototype。(3)将构造函数的作用域赋给这个新对象(4)执行构造函数的内部代码,并将其属性和方法添加给person中的this对象。即Person.call(this). 继承构造函数的属性以及方法。(5)返回这个新对象personfunction Person(name,age){this.name=name;this.age=age;}
2021-09-22 15:40:54
2098
原创 DOM事件流:
1.捕获: 从外向内2.执行目标阶段3.冒泡: 从内向外事件委托:将子元素的事件委托(绑定)给父元素优点:1.减少绑定的次数2.后期新添加的元素也可以享用之前委托的事件原理:冒泡触发事件的是谁:子元素如何找到触发事件的对象:event.targetcurrentTarget 与target区别:currentTarget要求绑定事件的元素一定是触发事件的元素;target绑定事件的元素不一定是触发事件的元素...
2021-09-22 15:40:16
93
原创 函数柯里化
在函数式编程中,函数是一等公民。那么函数柯里化是怎样的呢?函数柯里化指的是将能够接收多个参数的函数转化为接收单一参数的函数,并且返回接收余下参数且返回结果的新函数的技术。函数柯里化的主要作用和特点就是参数复用、提前返回和延迟执行。在一个函数中,首先填充几个参数,然后再返回一个新的函数的技术,称为函数的柯里化。通常可用于在不侵入函数的前提下,为函数 预置通用参数,供多次重复调用。const add = function add(x) { return function (y) {
2021-09-17 15:30:25
685
转载 ES6变量声明的6种方法(var、const、let)
var let const 的区别对于let 是否存在变量提升的思考?(1)var 存在变量提升,但let 和const 不存在(2)var let 的变量允许重复赋值,但 const 不能。const 是常量,声明时必须赋值,且不允许修改。(3)同一作用域下let const 声明的变量不能重复再次声明,但var 可以(4)let const 存在暂时性死区(temporal dead zone ,简称TDZ),在未声明未初始化之前不能调用。(5)let const 属于局部变量,只在
2021-08-04 10:20:49
406
原创 元素水平垂直居中的方法
一、水平居中(1)区块元素:margin:auto;(2)内联元素:text-align:center;二、垂直居中(1)绝对定位子对父绝对定位left、top均为父元素宽高的一半:50%使用margin-top与margin-left : -(自身宽高的一半)px(2)绝对定位子对父绝对定位left、top均为父元素宽高的一半:50%transform:translate(-50%,-50%)(3)相对定位子对父相对定位left、top均为父元素宽高的一半:50%tra
2021-08-03 16:18:51
93
原创 隐藏元素的八大方法
display:none不占空间,无法点击visibility:hidden占据空间,无法点击overflow:hidden占据空间,无法点击opacity:0占据空间,可以点击z-index:-1000不占空间,无法点击transform:scaleY(0)占据空间,无法点击相对定位 相对定位 绝对定位position:relative; position:absolute;top:-9999px;
2021-07-23 00:24:38
96
原创 Vue:自定义组件引入单页面+动态绑定图片
通过自定义组件向单页面组件引入普通属性component文件下的Header.vue:<template> <div> <h1>{{title1}}<span>{{title2}}</span></h1> </div></template>export default { props: { title1: { type: String,
2021-07-22 22:19:34
1674
原创 浏览器内核
Trident内核(俗称IE内核)IE浏览器、360浏览器、搜狗浏览器Gecko内核Firefox浏览器Webkit内核Safari浏览器、Chrome浏览器(以前为webkit内核,现为Blink内核)Presto内核(已废弃)Opera(最初为Presto内核,后为webkit内核,现为Blink内核)Blink内核Chrome浏览器、Opera...
2021-07-21 21:33:35
57
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人