lyyo_cd的博客

原创 JS-删除或替换字符串中特定字符

str.split('-').join('/') => '2020/09/08' // -截取，/拼接。str.replace(/c/g, '') => 'abdd' //全局删除字符（第二个参数为空）str.replace(/c/g, '嗨') => 'ab嗨嗨dd' //全局替换字符。str.replace(‘c’, '9') => 'ab9cdd' //替换第一个字符。

原创 解决页面添加锚点后跳转改变URL问题

　　直接奔主题，前端简单地锚点实现，把 a 标签的 href 写成想要跳到的元素的id ，比如点击 <a href="#box"></a> 页面就会自动滚动到 <div id="box"></div> 元素的位置。　　那么这样使用会产生一个现象，那就是 url 会被改变，浏览器默认的行为会将 id 放在 url 后面。比如：http://www.xxx.com#box　　此时返回上一页可能不是我们想要的路由，当页面刷新也会出席那问题　 解决的方..

原创 vue-awesome-swiper动态获取数据轮播失效

在vue项目中用vue-awesome-swiper这个插件，我轮播图片一般通过后端获取，循环展示，但会出现循环轮播失效的问题。设置了初始化属性依然无效：原因是循环还没有完的时候swiper组件运行冲突出错导致的，在swiper组件上对数据价格v-if就可以解决。代码如下：...

原创 vue路由传参不能直接传对象问题

直接传对象格式不对，需要转换成json格式传：用JSON.stringify(）转成json格式，传过去之后用JSON.parse()还原成对象即可需要传参的页面代码：接收到参数后的页面代码（在vue的data（）中注册）...

原创 使用vue-awesome-swiper4.1.1不能自动轮播，配置无效

按照官网步骤安装引入使用配置autoplay: true,后发现配置无效，查了无数文档后，终于发现是swiper版本问题swiper版本从7.x降到了5.x：配置写法：

原创 cnpm : 无法加载文件解决

cnpm报错 : 无法加载文件 D:\tools\node\node_global\cnpm.ps1。，因为在此系统上禁止运行脚本。解决：在win10 系统中搜索框 输入 Windos PowerShell选择 管理员身份运行执行：get-ExecutionPolicy，显示Restricted，表示状态是禁止的执行：set-ExecutionPolicy RemoteSigned更改权限为：A这时再执行 get-ExecutionPolicy ，就显示RemoteSigned

原创 js快捷抽取数组对象中某一属性值的集合

一、Array.from方法array.from方法就是将一个类数组对象（具有length属性的对象）或者可遍历的对象转换成真正的数组var user = [ { id: 1, name: "李四" }, { id: 2, name: "张三" }, { id: 3, name: "李五" } ]var userName = A

原创 前端面试题总结之JS

说说对闭包的理解 使用过的数组和对象的内置方法 ES6用过哪些特性 ajax中断请求方法 说一下this的指向 $set（）方法 对作用域问题的理解 浏览器静态资源缓存机制 js事件循环机制想起来再更新...

原创 前端面试题总结之vue

注：只是记录我面试时被问到的一些问题，以及本人的简单理解，并不是完全标准答案，也不保证可以作为任何面试参考，如有不准确欢迎指正~说说对vue生命周期的理解 父子组件在生命周期里的执行顺序 自定义组件 怎么进行组件封装 全局过滤器 vue双向绑定 路由传参 keep-alive缓存 组件间传值不定时添加更新内容~...

转载 var与let，const的区别（作用域、变量提升）

什么是变量提升？JavaScript 中，函数及变量的声明都将被提升到函数的最顶部。JavaScript 中，变量可以在使用后声明，也就是变量可以先使用再声明。一）var声明变量存在变量提升，let和const不存在变量提升console.log(a); // undefined ===> a已声明还没赋值，默认得到undefined值var a = 100;console.log(b); // 报错：b is not defined ===> 找不到b这个变量le.

原创 vue--两行代码实现全选功能

数据：方法：changeAll(){ // 全选change事件 // 所有选项状态与全选状态一致 this.items.forEach( item=>item.check = this.checkAll)}changeCur(){ // 单个选项change事件 // 所有选项选中，全选选中，只要有一个不选中，全选不选中 this.checkAll = this.items.every( ...

原创 前端面试题JS--求出大于30的数据并去重处理

题目：求出大于30的数据并且去重处理var arr = [12,35,21,30,45,45,45,32,32,32,24,24,24,29,29,10,11,11,36,36,56,38,38]步骤：1、大于30var arr2 = arr.filter(item=>item>30) // 大于302、去重var arr3 = arr2.new Set( arr2 ) // 大于30 去重后{ }3、将去重后{ }转化为[ ]Array.fro...

转载 解决使用vue-cli3创建项目时在git下交互提示符没反应问题

vue-cli3下我们使用vue create命令来快速创建项目，在window下会遇到交互提示符不工作的问题，如图所示：vue-cli官网给出了两种解决方法：下面对它们具体实践一下：方法一：第一种比较简单，就是将vue create命令改为winpty vue.cmd create命令，如下图所示：方法二：第二种方法是在~/.bashrc文件中添加以下行来为命令添加别名后执行vue create命令：首先.bashrc这个文件存在于C盘>>用户>&..

原创 vue init webpack执行脚本报错

【操作：】node -v v10.15.3；npm -v v6.12.0.；均已达到升级后版本，初始化vue-cli项目，安装cli，vue init webpack xx；【报错：】vue : 无法加载文件 C:\Users\Administrator\AppData\Roaming\npm\vue.ps1，因为在此系统上禁止运行脚本。有关详细信息，请参阅 https:/go.mi...

原创 img标签的src为空时，显示默认边框处理方法

不说废话，在查阅n多资料，踩过无数坑后，解决img的src为空的时候，会有恶心的默认边框（目前只在移动端测试）处理：

原创 H5页面苹果手机点击输入框输入内容时 页面自动放大

问题：H5页面，苹果手机点击input搜索框，输入内容时，页面会自动放大。解决：<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">user-scalable=no：禁止页面手动缩放...

原创 vue里a标签值解析变量，跳转页面，前面加默认域名端口的问题

let name = 'www.baidu.com/'<a :href="name">点击跳转到：localhost:8080/www.baidu.com/解决：写成<a :href="'https//:'+name">

原创 vue花括号里使用三元运算符(多条判断)

原创 vue根据接收data中某一个属性，动态添加不同的style样式

1.style动态赋值，利用三元表达式：效果：

原创 （vue）解决input[type='file']上传相同附件只传一次问题

js解决方法：HTML：<input id="file" type="file" onchange="upload()" />JS：document.getElementById('file').value = null;VUE逻辑：<inputref="referenceUpload"@change="referenceUpload"type="file"...

原创 vue项目中，判断限制input=file上传文件的类型及大小

vue-cli项目中，使用input=file上传附件，判断文件格式是否正确，在change事件里进行判断：类型：大小：let extName = files[0].name.substring(files[0].name.lastIndexOf(".")).toLowerCase();let AllUpExt = ".rar|.zip|.doc|.docx|.xls|....

原创 vue-cli+axios实现文件上传下载(下载接收后台返回文件流)

vue-cli+axios实现附件上传下载记录：上传：这里用formData格式传递参数；请求成功后后台返回上传文件的对应信息。重点是下载：##############downloadfile(res) {var blob = new Blob([res.data], {type: 'application/vnd.openxmlformats-officedocume...

原创 Vuejs快速获取input的值

一，使用$.ref来标识元素，代码：点击submit方法，this.$ref.  获取内容； 二，使用v-model双向绑定点击submit，this.upTitleArea获取内容，注意：v-model需要在data内声明，才能this获取 ...

原创 CSS图片底部3像素问题解决

由于之前面试经常被问到这个问题，加上项目中确实常遇到，虽然简单，还是记录下来。图片中两张img图片，底部多余的为图片3像素。是由图片元素默认为inline-block引起的。解决3像素，方法有很多种1，给img图片标签添加属性vertical-align:top;（不是baseline即可）：img{vertical-align:top;}2，img的父标签添加属性...

原创 vue.js的h5页面与android(WebViewJavascriptBridge) / ios(window.webkit.messageHandlers)交互详细

一、首先是h5页面与android交互：这里，我交互的android用的是WebViewJavascriptBridge：####android调用h5方法并传递消息：注意：在vue与android交互的时候，android的方法里this指向无效，需要赋值that；####   h5传递消息给android：二、h5页面与IOS交互，这里IOS用的是window.webk...

原创 js实现 MD5加密

使用js / jQuery扩展插件；下面使用的是jQuery扩展插件；首先引入jQuery，再引入md5.js引入成功，进行数据加密：此时变量sign为加密后数据。

原创 提交表单控制台报错：form control with name='' is not focusable.解决办法

bootstrap页面，当select选择项为-其他原因时，出现下方的textarea；当选择项为其他时，不填写原因，textarea被隐藏。textarea为必填，属性required；问题：当select选择项不是-其他原因时，此时下方的textarea是隐藏的，但是required属性还在，此时谷歌浏览器下提交表单会报错：An invalid form control with name='...

原创 vue项目中，组件里单独引入对应css

我的css文件，放在src文件夹下的assets文件夹下css内。根据你具体的文件路径配置，引入在当前页面路径下的css（不是在main.js里引入，main.js引入是公共css与js，之前文章有在main.js引入步骤）...

原创 vue的属性绑定（在引号中绑定）

vue在定义的属性中动态绑定数据，本人用到过两种：首先使用v-bind：XX绑定属性，一、直接定义数据绑定：二、已有内容拼接数据data内数据定义相同，标签内不同

原创 鼠标各键对应的ASCII码值

原创 Vue-cli项目中，引入css、js或者引入组件，检查后未发现错误，npm红叉报错原因

最近在用vue-cli搭建项目后，正常引入css、js，引入子路由，npm执行都报错，但是代码没问题，检查了很久；下面为报错内容：后知道这是vue中的eslint原因，eslint是语法检查工具，但限制过于严格，大部分开发人员无法适应。找到build文件夹下webpack.base.conf.js；如图，将module下语法检查配置删除，npm run dev重启服务即可：

转载 Vue-cli项目中引入外部/第三方css/js/less文件具体步骤

例子中css文件采用bootstrap.css，js文件采用jQuery，less文件用less.less(自定义文件)；步骤一：安装webpackcnpm install webpack -g步骤二：在src/assets下面新建css、js、less、fonts文件夹，并放入对应文件。将bootstrap.css放入css目录下，bootstrap.min.

原创 css/js解决 页面多次点击时出现部分蓝色

有时候双击或者多次点击一个地方，会出现一些蓝色的块。css3参考手册中是这么讲解下面是css 和 js 解决方式：css：body{-webkit-user-select: none;  -moz-user-select: none;  -ms-user-select: none;  user-select: none; }js：docu

原创 JSON.parse() 与 JSON.stringify() 用法

1.JSON.stringify（）将一个对象解析成字符串，确切的说是json类型，（也是序列化对象） 返回json /// 一般做传递参数时var obj = { uname:' 123456 '， img: 'p0281-m.jpg'  }JSON.stringify（obj） // 得到 {"uname"："123456","uimg"："p0281-m.jpg"}；2.

原创 动态添加元素后 js点击 DOM查找不到

问题：调用append（)方法动态添加一个元素，为这个元素绑定点击事件，却查找不到这个元素，点击事件无效。解决：调用live()方法$(' select ').live( ‘click’，function(){} ); 但是在jquery1.9及其以上版本无法使用live（），可以用on（）方法代替live（）；on（）和bind（）de的区别是live不仅可以给页面中现有的元素绑定事件，

原创 bootstrap-select下拉搜索插件 动态加载自己数据的二级联动

bootstrap-select是boot的下拉搜索插件，使用的时候有时我们需要动态从后台 或者 直接加载动态数据。下面是根据一级下拉菜单，动态加载二级联动方式。（不是ajax后台获取）首先引入js与css文件（一个css两个js）link rel="stylesheet" href="css/bootstrap-select.css">一、下拉搜索（html）

原创 css清除select默认下拉箭头

有时候不想用select默认下拉箭头，用自己的代替，只需要隐藏select默认的下拉箭头，替换上自己的就可以了。具体css代码如下：111111111css:select{appearance:none;  -moz-appearance:none;  -webkit-appearance:none;  background: url('..

原创 css 实现标题溢出显示省略号

简单设置：为标题所在标签添加css：width : 100px ;overflow ： hidden；  text - overflow : ellipsis ;    / *  文字溢出部分隐藏并替换为省略号  */white - space : nowrap ;    /*  多行文字不换行  */

原创 innerHTML与innerText的区别

简单理解：一：只有一个标签的内容，例子如下：测试innerHTML与innerText此时，inner HTML与inner Text获取到都是b内的内容：测试innerHTML与innerText；二：嵌套的子标签的内容，例子如下：测试子inner此时，innerHTMl获取到内容为div下的标签：测试子inner；inner Text获取到内容为

转载 web网页 页面布局的几种方式

网页基本布局方式：（1）流式布局 Fluid流布局与固定宽度布局基本不同点 就在于对网站尺寸的侧量单位不同。固定宽度布局使用的是像素，但是流布局使用的是百分比，这位网页提供了很强的可塑性和流动性。换句话说，通过设置百分比，我们不需要考虑设备尺寸或者屏幕宽度大小了，可以为每种情形找到一种可行的方案，应为你的设计尺寸将适应所有的设备尺寸。流布局与媒体查询和优化样式技术密切相关。（2