- 博客(46)
- 收藏
- 关注
原创 Hash模式与History模式的区别
对于单页面应用,服务器端只保存了首页的html资源,如果服务器没有相应的配置,以这样的地址去访问服务器,是找不到资源的;意思是试着去加载所请求的路径在服务器上对应的资源,如果找不到,就以地址为文件夹,往下找index.html;所以服务器需要进行相应的配置来支持History模式,当服务器找不到所请求的资源时,将首页静态文件返回给客户端,客户端再根据当前路由地址解析页面,实现页面跳转。History模式是基于HTML5中的History API,主要用到pushState()方法和。
2023-08-09 16:25:41
656
原创 vue pc端 百度地图点连线
index.html引入<script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak= 这里是你的ak值"></script>vue页面初始化地图var map = new BMapGL.Map("allmap");// 创建百度地图地图实例 var point = new BMapGL.Point(116.404, 39.915) // 创建点坐标
2021-10-08 10:19:09
551
原创 在vue项目中展示外部链接页面
1、在vue项目中展示外部链接页面 <div style="width: 100%;height: 100px;background-color: #00d1b2"></div> <div style="width: 100%;height: 500px;"> <iframe style="width: 100%; height: 800px;" src="https://vue-js.com/learn-vue/lifecycle/initE
2021-09-26 17:35:39
2549
原创 设置element 分页的背景色和选中颜色
element 分页<div class="paging"> <el-pagination small :current-page.sync="start" :pager-count="5" layout="prev, pager, next" :total="total" @current-change="changeCur
2021-06-21 16:31:00
1778
原创 fliter方法
1、过滤时间,以什么样的形式展示 filter.dateFormat()filter.dateFormat(过滤的时间,过滤后的样式)filter.dateFormat(item.beginTime, ‘yyyy-MM-dd’)结果为:2017-07-20filter.dateFormat(item.beginTime, ‘medium’)结果为:Oct 29, 2010 11:40:23 AMfilter.dateFormat(item.beginTime, ‘yyyy-MM-dd H
2021-02-20 11:12:19
855
原创 css设置图片不停旋转。
<img class="figure" src="../../assets/logo_20201222190757.png" alt=""> .figure{ width: 90px; -webkit-animation:rotateImg 3s linear infinite; vertical-align: middle; } @keyframes rotateImg { 0% {transform : rotate(0deg);} 100
2020-12-22 19:34:12
853
原创 截取字符串的一部分
// JS截取字符串可使用 substring()或者slice()//// 函数:substring()// 定义:substring(start,end)表示从start到end之间的字符串,包括start位置的字符但是不包括end位置的字符。// 功能:字符串截取,比如想从"MinidxSearchEngine"中得到"Minidx"就要用到substring(0,6)// 例子:var src="images/off_1.png";alert(src.substring(7,10))
2020-12-18 16:01:45
807
1
原创 微信小程序-扫码获取信息
功能描述:点击扫码按钮,获取二维码信息;用户可以在用二维码生成工具生成一个二维码测试在.wxml页面定义一个扫码按钮: <text class="saoma" bindtap="addGoosInfo">扫码</text>点击扫码,调用对应的.js文件中addGooInfo接口: addName: "",/**扫码 */ addGoosInfo: function() { var that = this; var show; wx.scanC
2020-12-18 15:58:29
4663
1
原创 把数字转为日期格式
把数字转为日期格式 function transfer_time(value) { let secondTime = parseInt(value);// 秒 let minuteTime = 0;// 分 let hourTime = 0;// 小时 let dayTime = 0; // 天 let mouthTime = 0; // 月 let yearTime = 0; //年 i
2020-12-16 13:55:37
544
原创 截取字符串某个值之后或之前的数据?
截取字符串某个值之后或之前的数据?String str="/201901/2019012";//从起始位置截取到最后一个“/”之前的全部字符,得到“/201901”String n=path.substring(0,path.lastIndexOf("/"));//截取最后一个“/”之后的全部,得到“/2019012”String n1=path.substring(path.lastIndexOf("/"));lastIndexOf(String str) 返回指定子字符串最后一次出现的
2020-12-05 11:32:13
1565
原创 判断数组中是否包含某个值?
判断数组中是否包含某个值?var index = Array.findIndex(item => item.id === id)//或者使用var index = Array.indexOf(str) // 当数组里的对象为字符串时用这个方法更简单//index==-1 代表不存在 不等于-1的就存在...
2020-12-04 10:43:09
1050
原创 Avoided redundant navigation to current location报错
Vue - 项目中报错Error: Avoided redundant navigation to current location: “/xxx“.的解决方案在一个vue项目中重复跳转到同一个路由地址时报错!报错显示路由重复,对功能没有影响。解决方法在入口文件下添加代码:// 解决ElementUI导航栏中的vue-router在3.0版本以上重复点菜单报错问题import Vue from 'vue'import VueRouter from 'vue-router'Vue.use.
2020-11-28 18:34:24
176
原创 图片懒加载?
1、图片懒加载理解思路1、设置图片src属性为同一张图片,同时自定义一个data-src属性来存储图片的真实地址2、 页面初始化显示的时候或者浏览器发生滚动的时候判断图片是否在视野中3、 当图片在视野中时,通过js自动改变该区域的图片的src属性为真实地址2、图片懒加载的代码实现 //querySelectorAll在文档内找全部符合选择器描述的节点包括Element本身。 let lazyImages = [...document.querySelectorAll('.lazy-image
2020-10-23 14:49:42
126
原创 小程序生命周期(全局,页面,组件)
生命周期函数–监听页面加载onLoad: function (options) {},/**生命周期函数–监听页面初次渲染完成/onReady: function () {},/*生命周期函数–监听页面显示/onShow: function () {},/*生命周期函数–监听页面隐藏*/onHide:function () {},/**生命周期函数–监听页面卸载/onUnload: function () {},/*页面相关事.
2020-10-05 08:14:41
196
原创 vue项目的打包优化
1、首先打vue ui控制面板找到项目文件,点击任务进入之后点击start编译和热更新(用于开发环境)运行这个项目**2、在没有报警告的情况下,去点击build编译并压缩(用于生产环境)进行打包**3、js/chunk-vendors.bb76b22d.js和element-ui的文件过大所以需要对其进行优化1.通过 vue-cli 3.0 工具生成的项目,默认隐藏了所有 webpack 的配置项,如果程序员有修改 webpack 默认配置的需求,可以在项目根目录中,按需创建 vue.con
2020-09-24 21:59:38
1814
原创 vue中的provide和inject (依赖注入)
1、vue中的provide和inject一、名词解析:provide:Object | () => Objecti:nject:Array | { [key: string]: string | Symbol | Object }provide:提供依赖``是一个对象,或者是一个返回对象的函数。里面呢就包含要给子孙后代的东西,也就是属性和属性值。inject: 注入依赖一个字符串数组,或者是一个对象。属性值可以是一个对象,包含from和default默认值。说明:prov
2020-09-22 21:24:35
1454
原创 vue中mixins(混入)的使用
一、来自官网的描述混入 (mixins): 是一种分发 Vue 组件中可复用功能的非常灵活的方式。混入对象可以包含任意组件选项。当组件使用混入对象时,所有混入对象的选项将被混入该组件本身的选项。二、项目中如何使用混入在vue组件内,如果想将一些公共功能,如组件、方法、钩子函数等复用,混入是一个很好的选择。下面简单介绍一下混入的方式及特点。你可以将一个对象作为混入的选项,在组件中复用。因为vue实例也是对象,所以你可以将vue实例作为混入选项传递进去。我们可以创建一个目录mixins,在创建一
2020-09-22 21:24:15
111
原创 虚拟DOM和 Diff算法
虚拟DOM1、用js来模拟DOM中的节点。传说中的虚拟DOM。虚拟dom实现过程:1.根据真实dom产生虚拟dom? 虚拟dom?就是一个特殊对象(经过一些处理能产生真实dom)2.进行编译解析3.将虚拟dom 变成真实dom 也就 挂载4.数据发生变化 产生新的虚拟dom5、将数据变化后的虚拟dom 和之前的虚拟dom 通过differ 算法 进行比对6、比对之后更新视图 一样的不变 不一样重新渲染<!DOCTYPE html><html lang="en"
2020-09-21 09:16:57
357
原创 vue的常用指令?
1、条件相关的指令:v-showv-forv-ifv-elsev-else-ifv-show:控制一个元素是否隐藏,是通过控制CSS中的display来实现的。v-for用v-for指令根据遍历数组来进行渲染v-if:控制一个元素是否创建或销毁v-else:v-else是搭配v-if使用的,它必须紧跟在v-if或者v-else-if后面,否则不起作用。v-else-if:v-else-if充当v-if的else-if块,可以链式的使用多次。可以更加方便的实现switch语句。
2020-09-16 21:07:28
110
原创 js中事件委托?
概念事件委托,顾名思义,就是将本来需要 A 处理的事情,委托给 B 来处理。在 JavaScript 中的事件委托又称事件代理,事件委托就是利用事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件。当然,如果子元素阻止了事件冒泡,那么委托也就没法实现了。好处:提高性能1.事件委托的优点3.1、减少内存消耗试想一下,若果我们有一个列表,列表之中有大量的列表项,我们需要在点击列表项的时候响应一个事件;<ul id="list"> <li>item
2020-09-10 21:06:51
99
原创 js中数组扁平化处理?
什么是数组扁平化?数组扁平化就是将一个多维数组转换为一个一维数组实现基本方式1、对数组的每一项进行遍历。2、判断该项是否是数组。3、如果该项不是数组则将其直接放进新数组。4、是数组则回到1,继续迭代。5、当数组遍历完成,返回这个新数组。1. es6中的flat函数也可以实现数组的扁平化let arr1 = [1,2,['a','b',['中','文',[1,2,3,[11,21,31]]]],3]; console.log( arr1.flat( Infinity ) );//
2020-09-10 20:48:59
103
原创 数组排序的方法?
1、sort排序 let arr = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "0", "9", "8", "7","6","3","4","5","5"]; var res = []; console.log(arr); //排序前["1", "2", "3", "4", "5", "6", "7", "8", "9", "0", "9", "8", "7", "6", "3", "4", "5", "5"] arr.s
2020-09-09 21:44:39
644
原创 数组的去重的方法?
1.forEach+includes或者map+includes1.forEach+includeslet arr = ["1", "2", "3", "4", "5", "6", "0", "9", "8", "7","6","3", "4", "5","5"]; var res = []; arr.forEach(val => { if (!res.includes(val)) { res.push(val); } });
2020-09-09 21:00:59
84
原创 es6新增的数组方法?
Array.from()Array.from方法用于将两类对象转为真正的数组:类似数组的对象(array-like object)和可遍历(iterable)的对象(包括ES6新增的数据结构Set和Map)。下面是一个类似数组的对象,Array.from将它转为真正的数组。let arrayLike = { '0': 'a', '1': 'b', '2': 'c', length: 3};// ES5的写法var arr1 = [].slice.call
2020-09-08 21:56:14
153
原创 es5新增的数组方法?
1.把数组转换为字符串toString() 方法把数组转换为数组值(逗号分隔)的字符串。var fruits = ["Banana", "Orange", "Apple", "Mango"];document.getElementById("demo").innerHTML = fruits.toString(); 结果为:Banana,Orange,Apple,Mangojoin() 方法也可将所有数组元素结合为一个字符串。它的行为类似 toString(),但是还可以规定分隔符:
2020-09-08 21:41:05
90
原创 generator(特点,项目应用)?
1、generator(1)Generator函数是ES6提供的一种异步编程的解决方案;(2)Generator函数是一个状态机,封装了多个内部状态,执行Generator函数会返回一个遍历器对象,也就是说,Generator函数除了是状态机,还是一个遍历器对象生成函数。返回的遍历器对象,可以依次遍历Generator函数内部的每一个状态。2.Generator函数的特征:(1)function 关键字与函数名之间有一个*号;(2)Generator函数内部使用yield表达式,定义内部的不同状态
2020-09-06 19:08:45
165
原创 async,await(特点,项目中应用)?
async,await作用: 是一套关于异步的解决方案await有两个作用,一是作为求值关键字,二是将异步操作变成同步操作;如果方法中使用了await,那么在方法前面必须加上async当await作为求值关键字时 后面可以跟Promise或表达式,可以直接获取Promise中的值或表达式的值跟Promiseapp.use(async (ctx, next) => { // next()返回的是Promise,a的值是"hello, world!" const a = await ne
2020-09-06 19:05:27
107
原创 promise(特点,项目中如何应用)?
1、promisepromise 是用于异步编程的,他解决了编程的中的回调地狱,属性:使用 Promise 对象中有三个参数,pending:初始化状态fulfilled:操作成功rejected: 操作失败promise 优点:①统一异步 API- Promise 的一个重要优点是它将逐渐被用作浏览器的异步 API ,统一现在各种各样的 API ,以及不兼容的模式和手法。②Promise 与事件对比- 和事件相比较, Promise 更适合处理一次性的结果。在结果计算出来之前或之
2020-09-06 19:00:21
439
原创 JavaScript中let、const、var 的区别?
1、let、const、var 的区别?1、是否存在变量提升?1、var声明的变量存在变量提升。即变量可以在声明之前调用,值为undefined。2、let和const不存在变量提升。即它们所声明的变量一定要在声明后使用,否则报会错。2、是否存在暂时性死区?1、let和const存在暂时性死区。即只要块级作用域内存在let命令,它所声明的变量就“绑定”(binding)这个区域,不再受外部的影响。3.是否允许重复声明变量?1、var允许重复声明变量。2、let和const在同一作用域不允许重
2020-09-06 18:50:41
202
原创 vuex的使用方法?
1、什么是Vuex?vuex是一个专门为vue.js设计的集中式状态管理架构。状态?我把它理解为在data中的属性需要共享给其他vue组件使用的部分,就叫做状态。简单的说就是data中需要共用的属性。2、vuex概念五个核心:state: 存储数据的地方actions: 异步操作mutations: 同步操作,只有mutations可以修改state中的数据getters: 相当于 state的计算属性。moduleas:模块化 modeA, modeB,modeC3、引入Vuex(前
2020-09-03 21:10:19
589
原创 原型与原型链?
1.构造函数构造函数 ,是一种特殊的方法。主要用来在创建对象时初始化对象。每个构造函数都有prototype(原型)属性2、原型的作用就是实现属性和方法的共享1.prototype每个函函数对象,除了原型 [proto] 之外,还有 prototype 属性,当函数对象作为构造函数创建实例时,该 prototype 属性值将被作为实例对象的原型 [proto] ——原型链 (JS原型与原型链继承)2.proto每个对象中都包含了一个 [proto] 内部属性,这个属性所对应的就是自身
2020-09-02 20:56:32
73
原创 js继承?
1、js继承继承概念:通过某种方式让一个对象可以访问到另一个对象的属性和方法,把这种方式称之为继承。继承是为了获取更多的拓展,减少代码的冗余1、原型链继承基本思路:原型链继承的基本思想是利用原型让一个引用类型继承,另一个引用类型的属性和方法。function sup(){this.name=["王二","李四"];}function suber(){}suber.prototype=new sup(); //继承suplet a=new suber()console.log(a.na
2020-09-02 20:41:19
119
原创 this以及apply,call,bind之间的关系?
1、this是什么?1、在全局环境中,this等于window。2、构造函数中,this指向new出来的那个新的对象。3、在函数中,this永远指向调用他的那个对象。4、在箭头函数中this指向包裹着箭头函数的第一个函数。2、改变this指向的方法apply()和call()1、apply()方法接受两个参数,一是作用域,二是参数。function test (test1, test2) {console.log(test1 + test2);}function applyTes
2020-09-01 20:48:43
158
原创 如何判断数据类型?
1、判断数据类型的几种方法1、typeof、2、instanceof、3、constructor、4、Object.prototype.toString.call()、5、jquery.type()1、typeof使用typeof可以判断基本数据类型,在使用typeof判断引用数据类型时除了判断function时返回function类型,其他引用类型返回的都是object。并且返回的数据类型是字符串形式的小写使用方法:typeof a2、instanceof使用instanceof可以判断已知
2020-08-31 20:45:10
7269
原创 js数据类型有哪些?
1、js数据类型js数据类型分为基本数据类型和引用数据类型,在我们创建变量时,浏览器就在判断是基本类型还是引用类项,基本数据类型指的是简单的数据段,而引用数据类型指那些可能由多个值构成的对象。基本数据类型:number(数字)、string(字符串)、boolean(布尔类型)、symbol(独一无二的)、Undefined、null。引用数据类型:object(类型)、array(数组)、function(函数)、Date、RegExp等。...
2020-08-31 19:46:09
873
原创 H5新特性?
1.语义化标签好处:1.使代码结构清晰,便于阅读2.便于SEO3.无障碍阅读4.便于后期的维护与开发2.智能表单html5中提供了多个新的类型的input类型1.color2.datatime3.data4.tel5.e-mail6.number7.range8.search3.音频(audio)和视频(video)4.canvas5.svg6.地理地位7.拖放的API8.web worker9.web storageweb socket...
2020-08-30 19:58:11
276
原创 css3动画?
1、css3实现动画有几种方式?css实现动画主要有3种方式,第一种是:transition实现渐变动画第二种是:transform转变动画第三种是:animation实现自定义动画,下面具体讲一下3种动画的实现方式1.1transition的中文含义是过渡。过渡是CSS3中具有颠覆性的一个特征,可以实现元素不同状态间的平滑过渡(补间动画),经常用来制作动画效果。补间动画:自动完成从起始状态到终止状态的的过渡。不用管中间的状态。帧动画:通过一帧一帧的画面按照固定顺序和速度播放。如电影胶片
2020-08-30 19:55:05
198
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人