![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端基础
文章平均质量分 64
小hu同学
hello world!
展开
-
使用正则格式化HTML标签进行页面渲染
需求今天是做了1个需求,我在1个富文本里面编辑的文字,需要渲染到一个预览的PDF上展示(Vue项目)可以看到我使用v-html会将html标签进行解析,样式并不是想要的。v-text或者{{}},这样又将标签直接展示出来了。我在富文本存的文字内容给到后端时,是会带上标签的,比如。这样我在根据后端返回的字段里面获取参数进行渲染。...原创 2022-07-17 16:30:10 · 576 阅读 · 0 评论 -
如何在keep-alive中使用倒计时
项目:基于安卓设备开发的H5描述:头部为状态栏,中间内容区域使用的是keep-alive,来进行的切换需求1:在Home页面点击某个按钮,跳转至页面A需求2:在页面A有一个关闭按钮,一个倒计时,点击关闭跳转至Home页,倒计时结束后也跳转至Home这里就不展开了在路由页面添加路由后,就可以点击跳转this.$router.push('/路由名称')<div class="modeCountDown">{{ modeCount }}秒</div>下面代码为.原创 2022-05-25 10:20:53 · 299 阅读 · 0 评论 -
Vue生命周期详解
前面Vue入门基础(二)的时候里面有说过Vue的生命周期,说的比较浅。本篇文章会详细的讲解Vue的生命周期生命周期&生命周期函数生命周期(Life Cycle)是指一个组件从创建 -> 运行 -> 销毁的整个阶段,强调的是一个时间段。生命周期函数:是由 vue 框架提供的内置函数,会伴随着组件的生命周期,自动按次序执行。注意:生命周期强调的是时间段,生命周期函数强调的是时间点。1.1 组件生命周期函数的分类1.2 生命周期图示1.3 创建阶段1. befo.原创 2021-12-27 18:52:01 · 14059 阅读 · 0 评论 -
Vue入门基础(四)—— 动态组件&插槽&自定义指令
本篇文章主要讲述的是 动态组件&插槽&自定义指令一、动态组件1、什么是动态组件动态组件指的是动态切换组件的显示与隐藏2、如何实现动态组件渲染Vue提供了一个内置的组件,专门用来实现动态组件的渲染。示例代码如下 data(){ //1、当前要渲染的组件名称 retrn{ comName:'Left'} } <!--2. 通过is属性,动态指定要渲染的组件 --> <component :is='.原创 2021-12-27 18:50:07 · 719 阅读 · 0 评论 -
Vue入门基础(三)
经常会听到说组件化开发,那到底什么是组件呢?怎么组件化开发呢?组件与组件之间是什么关系呢?组件之间的数据共享是怎么共享呢?看下面文章来带你了解Vue组件1.1 什么是组件化开发组件化开发指的是:根据封装的思想,把页面上可重用的 UI 结构封装为组件,从而方便项目的开发和维护。1.2 Vue中的组件化开发vue 是一个支持组件化开发的前端框架。vue 中规定:组件的后缀名是 .vue。之前接触到的 App.vue 文件本质上就是一个 vue 的组件。1.3 Vue组件的组成3部分.原创 2021-12-27 17:51:19 · 1534 阅读 · 0 评论 -
Vue入门基础(二)
本篇文章是接着上一篇文章的,可以先看下 上一篇文章4.Vue常用特性4.1 常用特性概览表单操作自定义指令计算属性过滤器侦听器生命周期4.2 表单操作1. 基于Vue的表单操作input 单行文本textarea 多行文本select 下拉多选radio 单选框checkbox 多选框1、单行文本 绑定数据 <span>姓名:</span> <span> <input type.原创 2021-12-27 17:45:23 · 1466 阅读 · 0 评论 -
一篇文章让你了解什么是art-template模板引擎
目录1、模板引擎1.1 以前的项目存在的问题1.2 模板引擎的作用1.3 模板引擎渲染1、模板引擎art-template是由腾讯出品的一款比较流行的模板引擎,易上手art-template官网atr-template文档1.1 以前的项目存在的问题数据和HTML标字符串拼接导致,代码混乱,拼接容易出错,不易维护业务逻辑和数据界面混合,代码容易出错且字符串拼接中 不能换行 要是换行的话 需要 ‘\’ 来转义字符for(var i = 0; i<res.length;i++原创 2021-09-15 12:52:32 · 5475 阅读 · 0 评论 -
高级JavaScript第(五)篇
爆肝六千字,让你了解什么是ES6,ES6能带来了什么方便,能解决我们什么问题原创 2021-05-15 14:55:04 · 247 阅读 · 7 评论 -
高级JavaScript第(四)篇
本篇文章为高级JavaScript第四篇,主要说的是正则表达式,说了那么多,其实要真正的了解,还是有一定难度的转载 2021-05-01 20:05:40 · 243 阅读 · 0 评论 -
高级JavaScript第(三)篇
本篇文章为高级JavaScript第(三)篇,主要讲了函数的定义和调用、this的指向问题、严格模式、高级函数、闭包、递归原创 2021-04-24 12:16:11 · 422 阅读 · 0 评论 -
高级JavaScript第(二)篇
高级JavaScript第(二)此篇文章主要说了构造函数和原型还有原型链相关的方面以及一些ES5的知识要点原创 2021-04-17 12:13:31 · 319 阅读 · 0 评论 -
高级JavaScript第(一)篇
此篇文章主要详细说了一下什么是面向对象、类的创建、基础、属性、方法原创 2021-04-12 23:05:16 · 594 阅读 · 2 评论 -
什么是回调地狱?如何解决回调地狱
什么是回调地狱?该如何解决回调地狱?原创 2021-03-20 21:26:06 · 2751 阅读 · 2 评论 -
“Gulp”前端开发的好帮手
一、第三模块Gulp构建工具基于Node平台开发的前端构建工具(需要安装node.js)将机械化操作编写任务,想要执行机械化操作时执行一个命令行命令任务就能自动执行了用机器代替手工完成一些代码的压缩二、Gulp能做什么项目上线,HTML、CSS、JS文件压缩合并语法转换(es6、less…)公共文件抽离修改文件浏览器自动刷新三、Gulp使用使用npm install gulp下载gulp库文件(不要加-g)-g是全局安装 不加则是本次项目安装在项目根目录下建立gulpfil原创 2021-03-19 23:19:22 · 110 阅读 · 0 评论 -
分享一下使用swiper踩的坑
分享一下,使用swiper插件的时候踩到的坑原创 2021-02-21 22:46:48 · 466 阅读 · 0 评论 -
将Vue项目部署至服务器(一)
在开发完成后如何进行打包并部署本地服务器呢?一、首先打开你需要部署的项目我这里使用vscode软件 打开一个新的终端打开后在下面命令行进入该项目目录文件进行原创 2021-02-17 13:24:23 · 1556 阅读 · 0 评论 -
深浅拷贝的区别
一、浅拷贝浅拷贝只能拷贝一层,更深层次对象级别拷贝的只拷贝引用路径,将原来的变量做修改后,浅拷贝的值也会随着改变 var obj = { id:1, name:'andy', msg:{ age:18 } } var o = {}; // for(var k in obj){ // // k是属性名 ob原创 2021-02-17 11:52:32 · 251 阅读 · 0 评论 -
JavaScript——每隔1秒依次输出(1-10)
我做过一个笔试题是说使得程序每隔⼀秒依次输出 1~10<script> for(var i=1; i<=10; i++;){ //封装一个函数 执行异步操作 (function(i){ setTimeout(function(){ conslon.log(i)},1000*i)})(i) }</script>原创 2021-02-08 22:24:44 · 2264 阅读 · 2 评论 -
ES5中新增的方法之——数组方法
ES5中新增的数组方法迭代(遍历)方法:forEach()、map()、filter()、some()、every();一、forEach()方法array.forEach(function(currentValue,index,arr)) currentValue:数组当前项的值index:数组当前的索引arr:数组对象本身 <script> // forEach 迭代(遍历)数组 var arr = [1,2,3] var原创 2021-02-08 21:47:32 · 119 阅读 · 0 评论 -
Vue的计算属性与watch
一、Vue的计算属性是什么?它的计算属性是 computed二、计算属性computed的特点有哪些?computed是计算属性、实时响应的。计算属性会依赖于它所使用的data中的属性,只要是依赖的属性值有改变,则自动重新调用一下计算属性;如果它所依赖的这些属性值没有发生改变,那么计算属性的值是从缓存中来的,而不是重新编译,那么它的性能就会比较高,所以Vue中尽可能的使用computed来代替watch。<!DOCTYPE html><html> <hea原创 2021-01-30 22:10:36 · 1183 阅读 · 0 评论 -
深拷贝与浅拷贝
一、深拷贝1、什么是深拷贝?深拷贝主要是将另一个对象的属性值拷贝过来之后,另一个对象的属性值并不受到影响,因为此时它自己在堆中开辟了自己的内存区域,不受外界干扰。2、深拷贝的方法(1)JSON转换var targetObj = JSON.parse(JSON.stringify(copyObj))let arr4 = JSON.parse(JSON.stringify(arr))缺点是:1、如果对象里有函数,函数无法被拷贝下来2、无法拷贝copyObj对象原型链上的属性和方法3、当数据原创 2021-01-26 20:35:29 · 147 阅读 · 0 评论 -
时间格式化输出
将时间戳格式化为日期时间输入代码为formatDate(new Date(1409894060000), 'yyyy-MM-dd HH:mm:ss 星期w')输出为2014-09-05 13:14:20 星期五下面是函数封装的代码对于 2014.09.05 13:14:20yyyy: 年份,2014yy: 年份,14MM: 月份,补满两位,09M: 月份, 9dd: 日期,补满两位,05d: 日期, 5HH: 24制小时,补满两位,13H: 24制小时,13hh: 12制小原创 2021-01-24 20:08:15 · 1014 阅读 · 0 评论 -
用JavaScript 实现斐波那契数列函数
用JavaScript 实现斐波那契数列函数,返回第n个斐波那契数例如:f(1)=1,f(2)=1等1、使用for循环的方法: function fibonacci(n) { //将num1变量赋值为1 var num1 = 1; //将num2变量赋值同样赋值1 var num2 = 1; //使用for循环 i=2 i<n的也就是函数值n for(var i=2;i<n;i++){ //将num2的旧值加上num1后重新赋值给num2 num2=num2+num1原创 2021-01-23 14:38:26 · 2301 阅读 · 0 评论 -
关于修改This指向的问题
修改this指向一般会用到的是call(),apply(),bind()刚刚看到这样一个题目就拿过来讨论一下:封装一个函数 abc,使这个abc指向指定的对象function bindThis(abc, oTarget) { }call()方法首先我们先使用call()来改变this指向function bindThis(abc, oTarget) { return function(x,y){ return abc.call(oTarget,x,y)} }原创 2021-01-22 09:19:47 · 95 阅读 · 0 评论 -
细说JavaScript中的“对象”
一、什么是对象? 现实生活中:万物皆对象,对象是一个具体的事物,看得见摸得着的实物。例如:一本书、一辆汽车、一个可以是“对象”,一个数据库、一张网页、一个远程服务器的连接也可以是“对象”。 在JavaScript中,对象是一组无序的相关属性和方法的集合,所有的事物都是对象,例如字符串、数值、数组、函数等 对象是由属性和方法组成的属性:事物的特征,在对象中用属性原创 2020-08-15 23:13:17 · 145 阅读 · 0 评论 -
细说JavaScript中的预解析
概述JavaScript代码是由浏览器中的JavaScript解析器来执行的。JavaScript解析器在运行JavaScript代码时候分为两步:预解析和代码执行我们js引擎运行js 分为两步: 预解析和 代码执行(1) 预解析:js引擎会把js里面所有的 var 还有 function提升到当前作用域的最前面(2) 代码执行:按照代码书写的顺序从上往下执行预解析分为变量预解析(变量提升)和函数预解析(函数提升)(1)变量提升:就是把所有的变量声明提升到当前的作用域最前面,不提升赋值操作原创 2020-08-04 21:47:05 · 159 阅读 · 0 评论 -
JavaScript——作用域详解及应用
一、作用域概述1、通常来说,一段程序代码中所用到的名字并不总是有效和可用的,而限定这个名字的可用性的代码范围就是这个名字的作用域。作用域的使用提高了程序逻辑的局部性增强了程序的可靠性,减少了名字冲突。2、js的作用域(es6)之前:全局作用域 局部作用域3、全局作用域:整个script标签,或者是一个单独的js文件4、局部作用域:在函数内部就是局部作用域,这个代码的名字只在函数内部起效果和作用二、变量的作用域2.1 变量作用域的分类在JavaScript中,根据作用域的不同,变量可以分为两种:原创 2020-08-02 21:49:59 · 283 阅读 · 0 评论 -
JavaScript——函数的概念及应用(三)
函数的返回值1、return语句之后的代码不被执行//函数返回值注意事项//1.return 终止函数function getSum(num1,num2){ return num1+num2;//return 后面的代码不会被执行 alert('我是不会被执行的')}console.log(getSum(1,2))2、return只能返回一个值,如果用逗号隔开多个值,以最后一个值为准//return只能返回一个值function ac(num1,num2){return num1,原创 2020-07-31 23:17:46 · 166 阅读 · 0 评论 -
JavaScript——函数的概念及应用(二)
一 、函数的参数1、导读:函数的参数分为形参和实参function 函数名(形参1,形参2......)括号里面的为形参 调用时 函数名(实参1,实参2)2、介绍形参:形式上的参数实参:实际的参数3、形参和实参的执行过程function coo(atf){ //形参是接收实参的 atf = ‘红色’ console.log(atf);}coo('红色');//在开发中首先调用了coo函数名到函数中,发现携带了实参‘红色’,这样就赋值给了//形参atfcoo('绿色');这样结果就原创 2020-07-28 18:50:56 · 100 阅读 · 0 评论 -
JavaScript——函数的概念及应用(一)
函数的概念 在JavaScript中,可能会定义非常多的相同的代码或者功能相似的代码,这些代码可能需要大量重复使用,虽然for循环语句能实现一些简单的重复操作,但是比较具有局限性,此时我们就可以使用js中的函数。函数:就是封装了一段可被重复调用执行的代码块,通过此代码块可以实现大量代码的重复使用。例如://1.求1-100的累加和var sum = 0for (var i=1;i<=100;i++){ sum+=i;}console.log原创 2020-07-26 15:18:27 · 157 阅读 · 0 评论 -
前端标签基础讲解(一)
前端基础讲解(一)一、超链接超链接写法 <a href=" 链接地址" target="_blank"></a> 使用_blank跳转另一个页面不会隐藏原来页面2.超链接下载压缩文件同目录下,下载文件名称<a href=" img.zip" target="_blank"></a>超链接点击图片跳转<a hre...原创 2020-04-16 13:47:57 · 409 阅读 · 0 评论 -
关于JavaScript数组中的冒泡排序
冒泡排序:是一种算法,把一系列的数据按照一定的顺序进行排列显示(从小到大或者从大到小)1.例如:数组中有[5,4,3,2,1],想让它变成[1,2,3,4,5]过程是:第一次5跟4比较,4比他小就会换成[4,5,3,2,1],然后5在跟3比较,发现3也比他小,继续换个位置…依次类推,直到5到最后,没有与它比较的[4,3,2,1,5]。第二次4跟后面的比较…[3,2,1,4,5]第三次3跟后面的比较…[2,1,3,4,5]第四次2跟后面的比较…[1,2,3,4,5]这样就完成了排序的顺序这样我原创 2020-07-26 13:16:08 · 228 阅读 · 0 评论 -
CSS高级技巧——精灵图
1、 精灵图为什么需要精灵图精灵图的使用精灵图的案例1.1为什么需要精灵图 在平常上网过程中,打开网址就可以看到网页了,网页中会有许多的小图标及图片,会像服务器去请求某个小图标,有多个小图标都要一个一个的去请求过来,这样会让服务器的压力过大,也大大降低页面的加载速度,因此,为了有效减少服务器接收和发送请求的次数,提高页面的加载速度,出现了CSS精灵技术(也称CSS Sprites,CSS雪碧) &nb原创 2020-05-30 18:16:17 · 394 阅读 · 0 评论 -
Vue中将数据中的数字过滤为单位显示
vue的过滤器我写这篇文章是我在开发过程中遇到了这个问题,就是有一个小小的bug,需要将后台传过来的值2364828转换为以万结尾的单位,我就试着网上看看,试了几种网友分享的方法都不行,后来看到了一个贴子,试了一下果然成功了。这里我来具体的将问题以及解决办法说一下。问题可以看到我在网页上显示的是一串长长的数字解决方法<div class="count"> <div> <img src="~assets/img/content/e转载 2021-01-11 23:16:36 · 1415 阅读 · 2 评论