前端
前端技术总结
Whuiry
这个作者很懒,什么都没留下…
展开
-
【JS】根据数组对象的某个属性,重新进行升降序排列
【JS】根据数组对象的某个属性,重新进行升降序排列。原创 2023-02-13 10:17:09 · 287 阅读 · 0 评论 -
JS实现:根据开始和结束时间,获取此时间段内所有日期并自定义输出格式
输入开始结束时间,获取此时间段内所有日期的方法原创 2022-06-16 10:02:20 · 1821 阅读 · 0 评论 -
JS实现:数组中的json对象,按某个字段来进行字母排序
记录一下,有问题欢迎指出~!1.定义排序的函数function sortList(arr,flag){ return arr.sort((a,b) => { return a[flag].localeCompare(b[flag]) })}2.举例// 假设要处理的数据格式如arr一样const arr = [{level:'A'},{level:'C'},{level:'F'},{level:'B'}]// 执行方法sortList(arr,'level')// 返原创 2021-11-29 15:21:13 · 998 阅读 · 0 评论 -
vue中如何配置全局过滤器及分享字符串连接的方法
一、在src下创建filters文件夹,在index.js中定义方法:(1)在创建的index.js中写入这个连接字符串方法:export function listJoin(list, key, joinStr) { let result = '' const strArray = [] for (const item of list) { strArray.push(item[key]) } result = strArray.join(joinStr) retur原创 2021-04-14 23:37:01 · 296 阅读 · 0 评论 -
vue实现多选和取消多选的效果
一、要实现的效果1.当点击“全选”时,能全选所有;2.点取消掉列表的某个input框时,“全选”框不被选择;二、html结构前提: v-for循环遍历list,列表中的每个item都有checked属性,用v-model绑定item.checked;input标签有change方法,当值改变时生效(1)单选:<div v-for="(i,index) in list"> <input type="checkbox" v-m原创 2021-04-14 23:09:44 · 927 阅读 · 0 评论 -
每天20道前端面试题(二)
保持不断学习,为了方便自己查看,将一些查到或者知道的方式整合在一起,时不时复习一下原创 2021-02-24 15:23:39 · 281 阅读 · 0 评论 -
Flex的使用
主要是总结了一下Flex的各个属性,有些例子可能不大能实现,当时瞎写的,还是先来看看大神的笔记吧:阮一峰:http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html01 Flex的定义和使用1.Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性;2.任何一个容器都可以指定为 Flex 布局。3.采用 Flex 布局的元素,称为 Flex 容器(flex container),简称"容器"。它的所有原创 2020-08-11 00:31:09 · 256 阅读 · 0 评论 -
es6相关知识点总结+示例
02 变量扩展<!DOCTYPE html><html><head> <title></title></head><body><!--ECMAScript6.0简称ES6,它的目标,是使得JavaScript语言可以用来编写复杂的大型应用程序,成为企业级开发语言--><!--ECMAScript 和 JavaScript 的关系是,前者是后者的规格,后者是前者的一种实现(另外的 ECMA原创 2020-08-11 00:18:15 · 272 阅读 · 0 评论 -
Vue框架——基本知识点+示例(4)
01 路由定义<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><!--1.组件定义组件组件嵌套组件传参spa最直观的一个页面只有一个html--><style>/*<!-- 默认类 用户点击到当前的内容,自动添加的类--原创 2020-08-10 01:09:30 · 287 阅读 · 0 评论 -
Vue框架——基本知识点+示例(3)
01 transition1.v-on:事件 可简写为 @事件名字;2.选择标签.click() 自动触发click方法<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>transition</title></head><style> p{ width: 100px;原创 2020-08-10 00:47:09 · 358 阅读 · 0 评论 -
Vue框架——基本知识点+示例(2)
01 总结使用vue1.引入框架;2.实例化对象;3.配置参数;**vue指令v-cloakv-if 和 v-showv-html 和 v-textv-pre 和 v-oncev-modelv-bindv-onv-for02 发微博<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title&g原创 2020-08-10 00:13:30 · 308 阅读 · 0 评论 -
Vue框架——基本知识点+示例(1)
03 vue相关问题第一步:引入框架< script src=“js/vue.js”></ script>第二步:body中写入元素< div id=‘app’>{{msg}}</ div>第三步:实例化对象new Vue({ el:’#app’ //绑定元素 data:{ msg:‘Hello Vue!’ }})<!DOCTYPE html><html lang="en"><hea原创 2020-08-09 23:35:59 · 449 阅读 · 0 评论 -
常见几种浏览器兼容性问题与解决方案
为了方便自己能随时看,重复记忆,所以把百度里的文章转载过来啦!文章转载自:https://jingyan.baidu.com/article/d169e1864f9c53436611d8eb.html所谓的浏览器兼容性问题,是指因为不同的浏览器对同一段代码有不同的解析,造成页面显示效果不统一的情况。 在大多数情况下,我们的需求是,无论用户用什么浏览器来查看我们的网站或者登陆我们的系统,都应该是统一的显示效果。所以浏览器的兼容性问题是前端开发人员经常会碰到和必须要解决的问题。在学习浏览器兼容性之前,.转载 2020-08-09 22:13:02 · 805 阅读 · 0 评论 -
React框架——入门知识点总结+示例(3)
08 React包使用1.快速构建React开发环境(自己先新建一个文件夹–>cmd)$ cnpm install -g create-react-app //安装create-react-app$ create-react-app my-app //创建项目my-app$ cd my-app/$ npm start //启动服务搭建完成后会有:具体可参考:https://blog.csdn.net/qtfying/article/details/786656642.初使用进原创 2020-08-09 01:56:06 · 564 阅读 · 0 评论 -
React框架——入门知识点总结+示例(2)
05 事件书写1.事件绑定和this指向绑定事件:on+事件名字Click(首字母大写)/ onMouseEnter={this.函数名}<body> <div id="app"> </div> <script type="text/babel"> //1.类定义组件 class Child extends React.Component{ constructor(){原创 2020-08-04 02:12:43 · 245 阅读 · 0 评论 -
React框架——入门知识点总结+示例(1)
React框架01体验react1.搭建结构注意点:1.(重点)引入两个文件;2.创建绑定元素;3.在script里创建组件<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>React测试</title> <script src="https://cdn.staticfile.org/react/16原创 2020-08-03 01:07:34 · 543 阅读 · 0 评论 -
前端中容易遗忘的小知识点(2)
05 深拷贝 和 06浅拷贝浅拷贝:把对象的属性一一赋值,不考虑属性的值的类型获取属性值:对象.属性或者对象[‘属性’](属性是常量)/ (属性是变量)对象[属性]深拷贝:考虑对象的值,如果值是对象需要解析赋值a instanceof b:判断a是否是b的实例<!DOCTYPE html><html><head> <title>06深拷贝</title></head><body> <sc原创 2020-08-02 01:58:44 · 221 阅读 · 0 评论 -
前端中容易遗忘的小知识点(1)
01函数节流①什么是函数节流?某些代码不可以在没有间断的情况连续重复执行②为什么要实现函数节流?防止用户随意操作,导致程序运行缓慢(DOM操作比起非DOM交互,需要更多的内存和CPU时间,连续尝试过多的DOM操作可能会导致浏览器挂起,甚至崩溃)③如何实现函数节流?使用单词定时器可以实现函数节流(第一次调用函数,创建一个定时器,在指定的时间间隔后运行代码;当第二次调用该函数的时候,它会清除前一次的定时器并设置另外一个)02事件委托①什么是事件委托?事件委托就是利用冒泡的原理,把事件加到父级原创 2020-07-31 02:30:14 · 295 阅读 · 0 评论 -
使用node搭建服务器(wifi连接查看vue项目)
一、使用wifi连接node平台搭建的服务器,进行vue项目查看的步骤最近新学了node搭建服务器,步骤比较多,怕忘记了,按操作顺序记录下来供参考1.首先找到vue项目的文件夹,在上方输入“cmd”命令2.输入“npm run build”命令进行打包(用vue脚手架生成的项目,直接这么写,不然要去package.json里配置快捷键)3.打包完成,生成了dist文件夹4.复制这三个文件夹data文件夹:我放的是项目需要用的json、images;dist文件夹:打包生成的文件夹;i原创 2020-07-21 23:27:36 · 1324 阅读 · 0 评论 -
如何在Gitee上直接查看上传的项目
1. 点开项目页面,点击“服务”2.点击“Gitee Pages”3. 直接点“启动”按钮4. 出现网址,直接点击进入,即可查看原创 2020-07-21 22:13:15 · 2573 阅读 · 0 评论 -
如何获取网页logo与favicon图标使用
如何获取网页logo与favicon图标使用favicon图标介绍:favicon.ico一般用于作为缩略的网站标志,它显示位于浏览器的地址栏或者在标签上,用于显示网站的logo,如图红圈的位置, 目前主要的浏览器都支持favicon.ico图标.一、logo和ico图标获取1. 直接从其他网页中获取logo:关于网站图标的简单提取:直接在网址后面加上 /favicon.ico 就可以了2. 制作ico图标: http://www.bitbug.net/二、favicon图标使用当成功生成f原创 2020-07-12 21:05:52 · 4161 阅读 · 0 评论