![](https://img-blog.csdnimg.cn/20201014180756724.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端学习
一夜枫林
特别欣赏一种人,他们的知识储备和信息密度都远高于我,可还是愿意听我说那些没有营养的废话。我总觉得,温柔博学浪漫是人身上最难得的特质。懂得向下兼容,到哪都是宝藏。
展开
-
Vue字符串里的中文数字转换为阿拉伯数字
【代码】Vue字符串里的中文数字转换为阿拉伯数字。原创 2024-03-20 11:36:26 · 818 阅读 · 0 评论 -
js比较实在的深拷贝
【代码】js比较实在的深拷贝。原创 2023-04-04 15:18:03 · 103 阅读 · 0 评论 -
哀悼灰色图层
css哀悼灰色图层原创 2022-12-05 15:37:46 · 194 阅读 · 0 评论 -
js对时间日期判断今天昨天明天
【代码】js对时间日期判断今天昨天明天。原创 2022-10-18 10:11:58 · 2738 阅读 · 2 评论 -
uniapp进度条及下载单位转换
【代码】uniapp进度条及下载单位转换。原创 2022-09-13 10:42:42 · 798 阅读 · 0 评论 -
js生成24小时时间
js生成24小时时间原创 2022-08-19 10:17:26 · 1164 阅读 · 0 评论 -
uniapp本地打包详细步骤
第一步 安装好 Android studio 官网地址:https://developer.android.google.cn/studio/第二步下载Android 离线SDK解压 https://nativesupport.dcloud.net.cn/AppDocs/download/android第三步打开安装好的Android studio打开添加(HBuilder-Integrate-AS)找到文件选择 HBuilder-Integrate-AS然后左上角切换模式第四步到开发者原创 2022-07-25 17:25:54 · 13617 阅读 · 0 评论 -
Vue筛选数字是否有小数点
Vue筛选数字后面是否有小数点,如果有就保留两位,没有就不操作。filters: { toFixed(num) { if (!isNaN(num)) { return ((num + '').indexOf('.') == -1) ? num : num.toFixed(2); } },},原创 2021-08-17 17:33:19 · 2503 阅读 · 0 评论 -
App签名证书的SHA1签名怎么查看
项目中android之前申请的自有证书SHA1签名忘记了,后面要使用地图需要SHA1签名但是电脑查看的跟上架的应用SHA1签名不一样,导致地图无法使用。首先我们要先将app打包后: 1.将包名.apk后缀名修改为 .zip后进行文件解压, 2.进入解压后进入META-INF目录,该目录下会存在文件CERT.RSA, 3.在该目录下打开cmd,输入命令 :keytoo原创 2021-06-07 16:57:28 · 1720 阅读 · 1 评论 -
悬浮球
悬浮球可左右靠边悬浮,可停止保留原来位置,可控制数值可更改自己想要的//子组件<template> <view> <view id="_drag_button" class="drag" :style="'left: ' + left + 'px; top:' + top + 'px;'" @touchstart="touchstart" @touchmove.stop.prevent="touchmove" @touchend="touchend" @c原创 2021-04-30 15:01:04 · 468 阅读 · 1 评论 -
input 再次获取焦点
<input type="text" :focus="volume" @blur="focus=false">this.volume = false;this.$nextTick(() => { this.volume = true;});uni.hideKeyboard(); uniapp 开发中可用于隐藏键盘原创 2021-04-09 14:30:30 · 326 阅读 · 0 评论 -
简述Vue的双向数据绑定的理解
Vue实现双向数据绑定的原理:就是利用了Object.Property()这个方法,重新定义了对获取属性值(get)和设置属性(set)的操作来实现的,它接收的三个参数,要操作的对象,要定义或者要修改的对象的属性名,属性描述符。重点接收最后的属性描述符,属性描述符是一个对象,主要有两种形式:数据的描述性和存取描述符。这两种对象只能选择一种使用,不能混合两种描述符的属性同时使用。 每个组件实例都对,应一个 watcher 实例,它会在组件渲染的过程中把“接触”过的数据属性,记录为依赖。之后当依赖原创 2021-03-02 16:34:03 · 296 阅读 · 0 评论 -
字符串取指定的数字或文字
let a = 'loveid=123&userid=456';要求取id的123 和 uesrid的456 的数字,很多新手就是不知道怎么取其实字符串有个indexof()可以操作,还有其他很多可以实现let a = 'loveid=123&userid=456';let b = a.indexof('='); // 返回出现第一次的下标let c = a.indexof('&userid='); //返回&的下标let id = a.slice(b+1,c原创 2021-01-13 09:46:27 · 364 阅读 · 0 评论 -
setInterval定时器
setInterva 中文:定时调用函数名 我们俗称:间隔定时器使用方法data() { return { newdate:null, }; },mounted() { this.newdate = setInterval(() =>{ console.log("我是间隔定时器,每五秒调用一次") },5000) },// beforeDestroy(销毁前)在实例销毁之前调用。实例仍然完全可用。beforeDestroy() { console.l原创 2021-01-07 10:00:02 · 592 阅读 · 0 评论 -
picker的使用
简单快速的使用picker很方便data(){ return{ ShopName:["唐僧","孙悟空","猪八戒","沙悟净","白龙马"], index:0 } }<picker @change="bindPickerChange" :value="index" :range="ShopName"> <view>{{ShopName[index]}}</view></picker>methods原创 2020-12-25 17:00:42 · 2013 阅读 · 4 评论 -
常用的css小妙招,建议新手收藏
input修改光标颜色<input type="number">input{ caret-color: rgba(0, 255, 0, 1.0);}div背景透明色<div>背景颜色</div>div{ height: 100px; width: 100px; background: red; opacity: 0.5; //值为: 0.1 -- 0.9}文字隐藏,只会隐藏内容,不会影响元素<div>文字隐原创 2020-12-24 17:01:43 · 217 阅读 · 4 评论 -
计算两者经纬度的距离
普遍上班打卡计算 var radLat1 = lat * Math.PI / 180.0; var radLat2 = lats * Math.PI / 180.0; var a = radLat1 - radLat2; var b = lng * Math.PI / 180.0 - lngs * Math.PI / 180.0; var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin原创 2020-12-11 09:57:02 · 338 阅读 · 0 评论 -
隐藏 scroll-view 组件的滚动条
App.vue 加如下样式可以去除 scroll-view 组件的滚动条::-webkit-scrollbar { display: none; width: 0 !important; height: 0 !important; background: transparent; -webkit-appearance: none; }原创 2020-12-04 11:16:57 · 342 阅读 · 0 评论 -
uniapp点击实现滑动到底部
uniapp点击实现滑动到底部工作记录 上干货setTimeout(() => { uni.pageScrollTo({scrollTop: 99999, duration: 0});}, 500);原创 2020-11-25 15:56:41 · 1393 阅读 · 0 评论 -
uniapp获取当前位置
使用uniapp官方API uni.getLocationuni.getLocation({ type: 'wgs84', geocode: true, //设置该参数为true可直接获取经纬度及城市信息 success: (res) => { console.log(res.address); this.list = res.address }, fail: function() { uni.showToast({原创 2020-10-10 11:04:48 · 1613 阅读 · 0 评论 -
uni-app扫码添加声音
uni-app uni.scanCode 扫码是再开发app时扫码是没有声音的只有震动,那扫码如何添加声音呢?uni.scanCode({ success: (res) => { consle.log(res) const innerAudioContext = uni.createInnerAudioContext(); innerAudioContext.autoplay = true; innerAudioContext.src原创 2020-10-10 09:19:12 · 2205 阅读 · 1 评论 -
Vue父组件可以监听到子组件的生命周期吗?
答案可以1)实现方式一比如有父组件 Parent 和子组件 Child,如果父组件监听到子组件挂载 mounted 就做一些逻辑处理,可以通过以下写法实现://Parent.vue<Child @mounted="doSomething"/>//Child.vuemounted(){ this.$emit("mounted")}2)实现方式二以上需要手动通过 $emit 触发父组件的事件,更简单的方式可以在父组件引用子组件时通过 @hook 来监听即可,如下所示:原创 2020-07-27 20:01:27 · 1094 阅读 · 0 评论 -
js为什么是单线程
解答可以从DOM的层面来理解:DOM会改变页面的结构就是渲染页面,但是js也会,js和DOM同时操作的话就是会矛盾了,所以它必须是单线程的只能保障同一个时间只能做一件事情,然后就不有冲突。...原创 2020-07-27 15:33:31 · 114 阅读 · 0 评论 -
计算属性和普通属性的区别
区别computed 属性是vue的计算属性,是数据层到视图的数据转化映射;计算属性是基于他们的依赖进行缓存的,只有在相关依赖发现改变时,他们才会重新求值,也就是说,只要他的依赖没有发生变化,那么每次访问的时候计算属性都会立即返回之前的计算结果,不在执行函数;computed 是响应式的,methods并非响应式。调用方式不一样,computed定义的成员像属性一样访问,methods定义的成员必须以函数形式调用。computed是带缓存的,只有依赖数据发生改变,才会重新进行计算,而method原创 2020-07-27 14:40:22 · 1136 阅读 · 0 评论 -
说一下减少dom的办法?一次性给你大量的dom怎么优化?
一、减少dom数量的方法可以使用伪元素,阴影实现的内容尽量不使用DOM实现,如清除浮动、样式实现等;按需加载,减少不必要的渲染;结构合理,语义化标签二、大量DOM时的优化当对Dom元素进行一系列操作时,对Dom进行访问和修改Dom引起的重绘和重排都比较消耗性能,所以关于操作Dom,应该从以下几点出发:1. 缓存Dom对象首先不管在什么场景下。操作Dom一般首先会去访问Dom,尤其是像循环遍历这种事件复杂度可能会比较高的操作/那么可以在循环之前就将主节点,不必循环的Dom节点先获取到,那么在原创 2020-07-27 11:59:23 · 4784 阅读 · 0 评论 -
Vue单页面与多页面的区别
定义SPA单页面应用(SinglePage Web Application),指只有一个主页面的应用(一个html页面),一开始只需要加载一次js、css的相关资源。所有内容都包含在主页面,对每一个功能模块组件化。单页应用跳转,就是切换相关组件,仅仅刷新局部资源。MPA多页面应用(MultiPage Application),指有多个独立页面的应用(多个html页面),每个页面必须重复加载js、css等相关资源。多页应用跳转,需要整页资源刷新。区别1.刷新方式SPA:相关组件切换,页面局部刷新或原创 2020-07-25 09:31:41 · 5856 阅读 · 0 评论 -
Vue的生命周期
Vue的八大生命周期beforeCreate (创建前)在数据观测和初始化事件还未开始created(创建后)完成数据观察,属性和方法的运算,初始化事件,$el属性还没有显示出来beforeMounted(挂载前)在挂载开始之前被调用,相关的render函数首次首次被调用。实例已经完成以下的配置:编译模板,吧data里面的数据的模板生产html。此时还没有挂载html到页面上。mounted(挂载后)在el被新创建的 vm.$el 替换,并挂载到实例上去之后调用。实例已完成以下的配置:用上面编译的原创 2020-07-23 20:25:10 · 87 阅读 · 0 评论 -
Vue中双向数据绑定是如何实现的?
1.原理View的变化能实时让Model发生变化,而Model的变化也能实时更新到View。Vue采用数据劫持&发布-订阅模式的方式,通过ES5提供的Object.defineProperty() 方法来劫持 (监控) 各属性的getter、setter,并在数据(对象)发生变动时通知订阅者,触发相应的监听回调。并且,由于是在不同的数据上触发同步,可以精确的将变更发送给绑定的试图,而不是对所有的数据都执行一次检测。要实现Vue中的双向数据绑定,大 致 可 以 划 分 三 个 模 块:Obse原创 2020-07-23 19:27:30 · 2705 阅读 · 0 评论 -
渐进式框架的理解
简单快速的理解什么是渐进式框架的理解渐进式代表的含义是:主张最少。每个框架都不可避免会有自己的一些特点,从而会对使用者有一定的要求,这些要求就是主张,主张有强有弱,它的强势程度会影响在业务开发中的使用方式。比如说,Angular,它两个版本都是强主张的,如果你用它,必须接受以下东西:必须使用它的模块机制- 必须使用它的依赖注入- 必须使用它的特殊形式定义组件(这一点每个视图框架都有,难以避免)所以Angular是带有比较强的排它性的,如果你的应用不是从头开始,而是要不断考虑是否跟其他东西集成原创 2020-07-23 16:41:46 · 16108 阅读 · 1 评论 -
说出vue.cli项⽬中src⽬录每个⽂件夹和⽂件的⽤法?
assets文件夹是放静态资源。components是放组件。router是定义路由相关的配置。app.vue是一个应用主组件。main.js是入口文件。原创 2020-07-22 11:45:37 · 128 阅读 · 0 评论 -
Vue中的v-model的使⽤
v-model:基础语法<template> <div > <input type="text" v-model="search"> <div>这是输入的值:{{ search }}</div> </div></template><script>export default { data() { return { search:''原创 2020-07-22 11:33:18 · 139 阅读 · 0 评论 -
axios及安装,和使⽤,以及封装。
axios安装:yarn add axiosnpm install axios -Ssrc 下创建 request/http.jsimport axios from 'axios';import {Toast} from 'vant';// 创建实例const instance = axios.create({ baseURL: "http://localhost:8080", timeout: 10000,});// 请求拦截instance.intercept转载 2020-07-22 09:19:21 · 195 阅读 · 0 评论 -
Vue中v-for为什么使⽤key?
我们需要使用key来给每个节点做一个唯一标识,Diff算法就可以正确的识别此节点,找到正确的位置区插入新的节点。加key主要不是为了性能,主要是为了区分两个 vnode 节点。比如一个列表,增加其中一项,如果不加 key 区分,增加后新旧 vnode 对比就会出现 bug。因为列表元素 DOM 结构相同,vue 会把原本不相同的 vnode 认为是 sameVnode,导致 bug。说到底,key的作用就是更新组件时判断两个节点是否相同。相同就复用,不相同就删除旧的创建新的。在渲染简单的无状态组件时,如原创 2020-07-22 09:03:09 · 225 阅读 · 0 评论 -
vue-loader是什么?使用它的途径有哪些?
理解vue-loader事情的起源是被人问到,一个以.vue结尾的文件,是如何被编译然后运行在浏览器中的?突然发现,对这一块模糊的很,而且看mpvue的文档,甚至小程序之类的都是实现了自己的loader,所以十分必要抽时间去仔细读一读源码,顺便总结一番。vue-loader作用:解析和转换.vue文件。提取出其中的逻辑代码 script,样式代码style,以及HTML 模板template,再分别把他们交给对应的loader去处理。用途:js可以写es6,style样式可以写scss或less、原创 2020-07-22 08:53:43 · 5031 阅读 · 1 评论 -
Vue常用的指令及用法
v-if :判断是否隐藏v-if 可以判断一个属性 的长度 或 是否true 等等 来进行控制隐藏显示 可以结合 v-else 来使用 注意:使用v-else 必须要有v-if如果不需要频繁切换某节点使⽤v-if(初始渲染开销较⼩,切换开销⽐较⼤)。<div v-if="list.lenght > 0"> v-if </div> <div v-else> v-else </div>v-for:数据循环v-for循环普通数组//原创 2020-07-22 08:34:35 · 1084 阅读 · 0 评论 -
JS如何获取DOM元素
什么是 HTML DOM文档对象模型(Document Object Model),是W3C组织推荐的处理可扩展置标语言的标准编程接口。简单理解就是HTML DOM 是关于如何获取、修改、添加或删除 HTML 元素的标准。我们用JavaScript对网页进行的所有操作都是通过DOM进行的。JS获取DOM元素的方法(8种)通过ID获取(getElementById)通过name属性(getElementsByName)通过标签名(getElementsByTagName)通过类名(getElem原创 2020-07-21 11:09:01 · 154 阅读 · 0 评论 -
如何让CSS只在当前组件中起作⽤
1.在组件中的style前面加上scoped就可以了。<style scopes>div{ background: res;}</style>2.通⽤样式写在根组件中,不设置scoped 这样其他组件就会继承根组件样式原创 2020-07-20 08:37:03 · 823 阅读 · 3 评论 -
v-show和v-if指令的共同点和不同点?
1.共同点:都能控制元素的显示和隐藏。2.不同点:实现本质⽅法不同,v-show本质就是通过控制css中的display设置为none,控制隐藏,只会编译⼀次;v-if是动态的向DOM树内添加或者删除DOM元素,若初始值为false,就不会编译了。⽽且v-if不停的销毁和创建⽐较消耗性能。3.总结:如果要频繁切换某节点,使⽤v-show(切换开销⽐较⼩,初始开销较⼤)。如果不需要频繁切换某节点使⽤v-if(初始渲染开销较⼩,切换开销⽐较⼤)。v-show 使用:(v-show使用方法有几种,我这写一原创 2020-07-20 08:32:04 · 13036 阅读 · 4 评论 -
Jquery和vue对比
jQuery到Vue的转变是一个思想的转变,将原有的直接操作dom的思想转变到操作数据上前言:很多人说jquey和vue没有什么可比的,应该和Angular,React来比吧,我到觉得他们倒没有多大的可比性,都是基于mvvm思想设计的框架,无非就是实现的方式不一样,在不同场景下性能上会有一些差异。然而从jquery到vue或者说是到mvvm的转变则是一个思想想的转变,是将原有的直接操作dom的思想转变到操作数据上去,难道不是一个根本性的改变吗?jquery介绍:想必大家都用过jquery吧,这个曾经.原创 2020-07-20 08:17:29 · 2238 阅读 · 3 评论 -
Vue和React的对比
我们来搞一搞Vue和React的对比好吧,话不多说,上干活。1.react整体是函数式的思想,把组件设计成纯组件,状态和逻辑通过参数传入, 所以在react中,是单向数据流,推崇结合immutable来实现数据不可变。 react在setState之后会重新走渲染的流程,如果shouldComponentUpdate返回的是true,就继续渲染, 如果返回了false,就不会重新渲染,PureComponent就是重写了shouldComponentUpdate, 然后在里面作了props和state的原创 2020-07-19 19:20:17 · 420 阅读 · 1 评论