- 博客(57)
- 收藏
- 关注
RSS订阅
原创 目录(前端面试题总结)
目录CSSJavaScriptvue2.0vue3.0小程序打包优化git其他CSS盒模型、BFC、清除浮动css定位的6个属性Flex弹性盒子基本属性浏览器兼容性问题解决方案JavaScriptpromise 对象js原型及原型链的理解js作用域，自由变量，变量提升，预解析闭包，this指向问题深拷贝，浅拷贝js数组方法详解vue2.0vue自定义指令 DirectiveMVVM和MVCvue中Computed、Methods、Watch区别vue监听和深度监听watch
2022-02-20 20:52:09
1013
原创 HTML+CSS+JavaScript开发跨平台应用程序Electron框架
Electron是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。 嵌入Chromium 和 Node.js 到 二进制的 Electron 允许您保持一个 JavaScript 代码代码库并创建 在Windows上运行的跨平台应用 macOS和Linux
2024-05-24 09:57:35
927
原创 vue-element-admin中使用mock数据和真实接口同时存在
下面有两种方法1.统一两种方案的code编码,我选择把mock的返回code统一为2002.在request.js文件中同时添加200和20000的放行条件。
2024-04-10 17:31:12
553
原创 Echarts+vue-baidu-map绘制行驶路线
在上述代码中，我们在模板中引入了baidu-map组件，并在其上添加了一个用于ECharts的div容器。在handler方法中，我们获取了百度地图实例，并初始化了ECharts实例。然后，我们假设有行驶路线的数据，通过drawDrivingPath方法将路线绘制在地图上。在vue.config.js文件中。
2024-04-09 17:32:15
526
原创 iframe嵌套详解
通常我们使用iframe直接直接在页面嵌套iframe标签指定src就可以了。但是，有追求的我们，并不是想要这么low的iframe. 我们来看看在iframe中还可以设置些什么
2022-06-29 12:56:32
9267
1
原创 Node.js中console输出到命令行的方法总结
文章目录使用控制台模块的基础输出清空控制台元素计数打印堆栈踪迹计算耗时stdout 和 stderr为输出着色创建进度条简单总结使用控制台模块的基础输出Node.js 提供了 console 模块，该模块提供了大量非常有用的与命令行交互的方法。最基础、最常用的方法是 console.log()，该方法会打印传入到控制台的字符串。如果传入对象，则它会呈现为字符串。可以传入多个变量到 console.log，例如：JSconst x = 'x'const y = 'y'console.log(
2022-04-27 17:51:47
2053
原创 JS 字符串方法总结
目录前言字符串长度.length查找字符串中的字符串indexOf()、lastIndexOf()、search()提取部分字符串slice()、substring()替换字符串内容replace()转换为大写和小写toUpperCase()、toLowerCase()连接两个或多个字符串concat()删除字符串两端的空格trim()提取字符串字符charAt()、charCodeAt()把字符串转换为数组split()前言JavaScript 字符串用于存储和操作文本，而字符串方法帮助您处理字符串
2022-03-31 18:04:07
191
原创 获取当前时间，封装时间格式化方法
获取当前时间在html中写个div类名为showTime <script> var t = null t=setTimeout(time,1000) //开始运行 function time (){ clearTimeout(t)// 清除定时器 dt = new Date(); var y = dt.getFullYear();//获取年 v
2022-03-29 13:40:34
379
原创 viewport + rem 解决移动端1px问题
解决方案同时通过设置对应viewport的rem基准值，这种方式就可以像以前一样轻松愉快的写1px了。在devicePixelRatio=2 时，设置meta：<meta name="viewport" content="width=device-width,initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no">在devicePixelRatio=3 时，设置meta：<meta
2022-03-08 19:06:09
486
原创 原生JS实现图片懒加载
直接上代码// onload是等所有的资源文件加载完毕以后再绑定事件window.onload = function(){ // 获取图片列表，即img标签列表 var imgs = document.querySelectorAll('img'); // 获取到浏览器顶部的距离 function getTop(e){ return e.offsetTop; } // 懒加载实现 function lazyload(imgs){ // 可视区域高度 var h = wind
2022-03-06 19:04:36
139
原创 TypeScript语法
目录引言JavaScript一门优秀的语言JavaScript的痛点类型带来的问题类型错误类型思维的缺失JavaScript添加类型约束介绍认识 [TypeScript](https://so.csdn.net/so/search?q=TypeScript&spm=1001.2101.3001.7020)TypeScript 特点众多项目采用TypeScript大前端的发展趋势入门TypeScript 编译环境TypeScript的运行环境变量的声明声明变量的关键字变量的类型推导（推断）数据类型Ja
2022-02-25 19:42:59
509
原创 JS ES6 promise 对象
promise 对象1.0 Promise的含义1.1 promise的两大特点1.2 promise的缺点2.0基本用法2.1用Promise对象实现的 Ajax 操作。1.0 Promise的含义所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上说，Promise 是一个对象，从它可以获取异步操作的消息。Promise 提供统一的 API，各种异步操作都可以用同样的方法进行处理1.1 promise的两大特点（1）对象的状态不受外
2022-02-20 20:19:34
135
原创 浏览器兼容性问题解决方案
不同浏览器的内核不尽相同，所以各个浏览器对网页的解析存在一定的差异浏览器内核主要分为两种，一是渲染引擎，另一个是js引擎所以浏览器兼容性问题一般指：css兼容，js兼容浏览器内核（渲染引擎）Chrome谷歌之前Webkit，已改为Blink内核FireFox火狐GeckoSafari苹果WebkitOpera欧朋现在也使用Chrome的Blink内核IETridentcss兼容...
2022-02-18 14:37:18
318
原创 Apache ECharts使用教程，vue中使用图表教程
简介这里先说一下什么是echarts如果你已经了解它是什么直接往下看教程ECharts 是一个使用 JavaScript 实现的开源可视化库，涵盖各行业图表，满足各种需求。遵循 Apache-2.0 开源协议，免费商用。兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等）及兼容多种设备，可随时随地任性展示。在项目中引入 Apache ECharts假如你的开发环境使用了npm或者yarn等包管理工具，并且使用 Webpack 等打包工具进行构建，本文
2022-02-16 16:18:19
1049
原创 vue自定义指令 Directive
前言一、Vue的自定义指令分为？vue中除了核心功能内置的指令外，也允许注册自定义指令。有的情况下，对普通DOM元素进行底层操作，这时候就会用到自定义指令。自定义指令分为全局自定义指令和局部的自定义指令全局自定义指令是通过Vue.directive(‘第一个参数是指令的名称’,{第二个参数是一个对象，这个对象上有钩子函数})下边举例说明: Vue.directive('focus', { // el：指令所绑定的元素，可以用来直接操作 DOM。 //binding：一个对象，包含以
2022-02-14 20:09:50
357
原创 MVVM和MVC
一、早期的mvc早期的页面通常由多个PHP，jsp文件构成，这种代码难以维护，于是延伸了mvc开发模式和框架，前端展示以模板的形式出现，典型的框架如spring等，这种分成结构职责清晰，代码易于维护，但这里的mvc仅仅限于后端，前后端形成了一定的分离，前端只完成了开发成中的view层缺点1前端页面开发效率不高2前后端职责不清晰二、前端mvc随着ajax的发展，前端得到进一步发展，前端的类库也开始发展最著名的就是jq，因此前端mvc随之而来与后端类似，具有view,controller,mod
2022-02-14 20:00:12
422
原创 element ui 上传图片用法
通过 slot你可以传入自定义的上传按钮类型和文字提示。可通过设置limit和on-exceed来限制上传文件的个数和定义超出限制时的行为。可通过设置before-remove来阻止文件移除操作。<el-upload class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/" :on-preview="handlePreview" :on-remove="handleRemove" :be.
2022-02-14 19:53:24
1473
原创 vue中Computed、Methods、Watch区别
1.计算属性Computed模板内使用js表达式是很方便的，设计的目的只是为了简单运算。在模板中放入太多的逻辑会让模板过重且难以维护。所以，对于任何复杂逻辑，你都应当使用计算属性。<!-- 复杂运算 --><div>{{message.split('').reverse().join('')}}</div><!-- 计算属性代替复杂运算 --><div>{{reverseMessage}}</div>computed: {
2022-02-10 20:32:52
100
原创 vue监听和深度监听watch
watch可以让我们监控一个值的变化，从而做出相应的反应。 <div id="app"> 用户名：<input type="text" v-model='name'> <p>你的名字是：{{name}}</p> </div><!-- 引入vue --> <script src="/node_modules/vue/dist/vue.js"></script&.
2022-02-10 20:28:37
107
原创 Vue双向数据绑定原理
vue.js是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调来渲染视图。具体步骤：第一步： 需要observer(观察者)对数据对象进行递归遍历，包括子属性对象的属性，都加上 setter和getter这样的话，给这个对象的某个值赋值，就会触发setter，那么就能监听到了数据变化第二步： compile(模板解析器)解析模板指令，将模板中的变量替换成数据，然后初
2022-02-07 19:23:32
131
原创 Vue虚拟dom，Vue Diff算法
二、vue虚拟dom，diff算法想要理解虚拟dom首先要知道什么是虚拟dom？虚拟dom可以简单的用一句话概括，就是用普通的js对象来描述DOM结构，因为不是真实DOM，所以称之为虚拟DOM。虚拟dom是相对于浏览器所渲染出来的真实dom而言的，在react，vue等技术出现之前，我们要改变页面展示的内容,只能通过遍历查询dom树的方式,找到需要修改的dom,然后修改样式行为或者结构，来达到更新视图的目的。为什么要用虚拟DOM来描述真实的DOM呢？创建真实DOM成本比较高，如果用js对象
2022-02-07 19:20:19
83
原创 Vue生命周期的执行过程
简单粗暴的答案直接走起：答： 总共分为8个阶段。创建前/后，载入前/后，更新前/后，销毁前/后。创建前/后： 在beforeCreated阶段，vue实例的挂载元素$el和数据对象 data 都为undefined，还未初始化。在 created阶段，vue实例的数据对象data有了，$el还没有。载入前/后： 在beforeMount阶段，vue实例的$el和data都初始化了，但还是挂载之前为虚拟的dom节点，data.message还未替换。在mounted阶段，vue实例挂载完成，data.m
2022-02-07 19:11:31
304
原创 vue常用的指令，v-if和v-show的区别
vue常用指令： v-model 多用于表单元素实现双向数据绑定v-for 格式： v-for="（item,index) in/of 数组json" 循环数组或jsonv-show 显示内容 ,通过display=block/none来控制元素隐藏出现v-hide 隐藏内容 同上v-if 显示与隐藏 （dom元素的删除添加 同angular中的ng-if 默认值为false）v-else-if 必须和v-if连用v-else 必须和v-if连用 不能单独使用 否则报错 模板编译错误v-bind 动.
2022-02-07 19:08:37
389
原创 Vue中的data为什么是一个函数
一. 组件和实例定义data的区别 vue实例中的data既可以市对象，也可以是函数const app = new Vue({ el:"#app", // 对象格式 data:{ foo:"foo" }, // 函数格式 data(){ return { foo:"foo" } }组件定义data只能是一个函数如果组件data定义为对象就会报错二. 组件data定义
2022-02-07 18:46:44
873
原创 Vue过滤器filter
过滤器就是一个数据经过了这个过滤器之后出来另一样东西。 vue中的过滤器分为两种：局部过滤器和全局过滤器全局过滤器 // global-filter是过滤器名称// 函数第一个参数是需要过滤的数据.// 函数第二个参数是给过滤器传递的值. Vue.filter('global-filter',(val,...args)=>{ console.log(`需要过滤的数据是:${val}`) return val + ' 过滤器追加的数据' }) var app =..
2022-02-06 09:34:54
150
原创 vue2与vue3双向数据绑定区别
新的响应式机制采用了ES6的ProxyApi，抛弃了Object.defineProperty()Vue2双向数据绑定存在的问题： 关于对象 Vue 无法检测 property 的添加或移除。由于 Vue 会在初始化实例时对property执行 getter/setter转化，所以property必须在 data对象上存在才能让 Vue 将它转换为响应式的 关于数组 Vue 不能检测以下数组的变动： 当你利用索引直接设置一个数组项时，例如：vm.items[indexOfIt..
2022-02-06 09:31:24
291
原创 vue组件化开发
使用组件的好处 组件是可以复用性的易于维护有封装性，易于使用大型项目中降低组件之间重复性 父传子 <!-- 父组件 --><template> <div> <my-child :parentMessage="parentMessage"></my-child> </div></template><script> import MyChild from .
2022-02-06 09:27:13
121
原创 Vue3新语法
Vue2与Vue3 最大的区别 — Vue2使用选项类型API（Options API）对比Vue3合成型API（Composition API作用: 聚合代码 & 逻辑重用1. 使用 reactive 绑定数据 <template> <div> <h1>使用 reactive 绑定数据</h1> <p>{{state.msg}}</p> <p>{{info}}</p>.
2022-02-06 09:22:54
952
原创 Vue组件通信
父传子 父组件给子组件传递自定义属性，子组件通过props来接收 父组件代码 <son :fa-msg="msg"></son> <!-- 子组件绑定faMsg变量,注意驼峰-->import son from './Son' //引入子组件data () { return { msg: '父组件', }},components:{son}, 子组件代码 <p>子组件接收到内容：{{ faMsg }}</p
2022-01-28 13:52:22
66
原创 JS数据类型判断方法
数据类型的判断大概有四种方法： typeof、instanceof、constructor、Object.prototype.toString.call()、jquery.type()typeof(1)、Number、String、Boolean、undefined以及引用数据类型中Function,可以使用ypeof检测数据类型，分别对应的数据类型小写字符 (2)、用typeof检测构造函数创建的Number,String,Boolean都返回object (3)、引用数据类型：Array、O.
2022-01-21 13:29:47
92
原创 js数组方法详解
js数组方法 join()push() 和 pop()shift() 和 unshift()sort()reverse()concat()slice()splice()indexOf()和 lastIndexOf() （ES5新增）forEach() （ES5新增）map() （ES5新增）filter() （ES5新增）every() （ES5新增）some() （ES5新增） join() 就是把数组转换成字符串，默认的是逗号( ，...
2022-01-21 13:14:48
77
原创 深拷贝，浅拷贝
深拷贝与浅拷贝的区别 浅拷贝：只复制第一层的浅拷贝深拷贝：深复制则递归复制了所有层级 为什么要使用深拷贝 我们希望在改变新的数组（对象）的时候，不改变原数组（对象） 数组浅拷贝 直接遍历 var array = [1, 2, 3, 4];function copy (array) { let newArray = [] for(let item of array) { newArray.push(item); } ...
2022-01-21 09:02:00
120
原创 闭包，this指向问题
1.闭包的概念简单的理解就是函数中套了一个函数，内层函数可以访问外层函数中的变量,而外层函数不能访问内层的变量闭包的情况一般有两种一个是作为参数被传递，作为返回值被返回出去// 函数作为返回值function create() { const a = 100 return function () { console.log(a) }}const fn = create()const a = 200fn() // 100// 函数作为参数被传递
2022-01-15 21:02:24
605
原创 js作用域，自由变量，变量提升，预解析
作用域：就是一个变量可以使用的范围作用域分为全局作用域、函数作用域、块级作用域 js中有一个最外层的作用域，全局作用域 js中可以通过函数来创建一个独立作用域称为函数作用域 es6中新增了块级作用域（大括号，比如：if{},for{},while(){}…） 2、自由变量 自由变量概念：当前作用域没有定义的变量 一个变量在当前作用域没有定义，但是被使用 向上级作用域，一层一层寻找，直至找到为止 如果到全局作用域还没找到，就会报错xx is not defined var a = .
2022-01-14 20:51:33
89
原创 js原型及原型链的理解
1. prototype每个函数都有一个prototype属性，被称为显示原型2._ proto _每个实例对象都会有_ proto 属性,其被称为隐式原型每一个实例对象的隐式原型 proto _属性指向自身构造函数的显式原型prototype3. constructor每个prototype原型都有一个constructor属性，指向它关联的构造函数。原型链获取对象属性时，如果对象本身没有这个属性，那就会去他的原型__proto__上去找，如果还查不到，就去找原型的原型，一
2022-01-14 20:45:29
331
原创 vue-cli4打包优化（10M变300kb）
项目开始时webpack配置 vue-cli3以后，我们修改webpack配置，需要自己在项目根路径下创建vue.config.js文件。 一、 配置 proxy 跨域 使用vue-cli发开项目，在本地开发环境中，如果遇到跨域的问题。可以通过配置proxy的方式，解决跨域问题： module.exports = { devServer: { open: false, // 自动启动浏览器 host: '0.0.0.0', // localhost port
2022-01-13 20:41:27
477
原创 vue vueRouter导航守卫
导航守卫正如其名，vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。有多种机会植入路由导航过程中：全局的, 单个路由独享的, 或者组件级的。注意：参数或查询的改变并不会触发进入/离开的导航守卫全局守卫全局前置守卫router.beforeEach全局解析守卫router.beforeResolve全局后置钩子router.afterEach全局前置守卫当一个导航触发时就会触发全局前置守卫，所有的导航都会通过全局前置守卫每个守卫方法接收三个参数：to: Rou
2022-01-11 19:49:16
387
原创 promise封装小程序api请求
在项目中我们使用请求 需要通过api封装为什么封装api因为在项目中 请求使用的地方会有很多 不利于后期维护 如果我我们讲api封装出来 只需要维护api文件就可以了这里以uniapp封装api来写小程序为例先在项目目录中创建一个utils文件夹 在该文件夹下创建一个js文件为请求的封装 代码如下// 封装请求const http = ({url, method='get', data=''}) => { return new Promise((resolve, reject)
2022-01-11 10:53:24
134
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人