前端小知识点
春风欲雨
这个作者很懒,什么都没留下…
展开
-
eslint代码规范介绍
eslint代码规范原创 2023-01-13 14:33:12 · 1319 阅读 · 0 评论 -
git简单配置
一:安装git二:在桌面点击鼠标右键,打开菜单里的 git bash三:设置用户名和邮箱$ git config --global user.name "zhaojixiang"$ git config --global user.email "[email protected]"四:执行 $ ssh-keygen -t rsa -C "[email protected]" 生成git 秘钥,连续敲击enter直到重新出现空白$符号五:在本地文件中查找生成的秘钥文件——路径:C:\User原创 2022-01-14 09:39:16 · 775 阅读 · 0 评论 -
Angular-Cli创建项目的全部过程
使用 CLI 创建一个项目并配置默认路由: ng new helloAngular –routing如果要跳过npm install 安装,则使用以下命令:ng new my-app --skip-install 项目结构目录分析 |--E2e 应用的端对端(e2e)测试,用 Jasmine 写成并用 protractor 端对端测试运行器测试。|--Node_modules 依赖包|--Src |--App Angular应用文件|--App.module.ts |..原创 2020-12-24 17:02:28 · 1163 阅读 · 1 评论 -
防止暴力点击(节流)
节流(throttle)在n秒内点击多次,只有一次生效。<template> <div> <button @click="throttle">按钮</button> </div></template><script>//定义let timer, lastTime;let no...原创 2019-11-29 15:18:01 · 1246 阅读 · 1 评论 -
如何在vue项目中给ul>li列表使用事件委托
ul> <li v-for="(item, index) in data" @click="handleClick(index)"> Click Me </li></ul>然后这样的话,结果就是所有的li元素都绑定了事件。我们都知道,过多的事件对于性能来说是很糟糕的,尤其在移动端,可以说是无法容忍。为了更好...原创 2019-11-29 14:57:18 · 6258 阅读 · 2 评论 -
如何使用react脚手架构建项目
前提:保证您的电脑已经成功安装了node和npm环境通过cmd执行 node -v 和 npm -v 查看是否下载成功和下载成功后的版本号。一、安装react脚手架,cmd执行 npm i -g create-react-app (-g为全局下载)二、在桌面上新建一个文件夹,打开后按住shift键并单击鼠标右键,在菜单栏中选择在此处打开命令窗口,在命令行中执行 cre...原创 2019-10-21 09:53:35 · 323 阅读 · 1 评论 -
vue中如何实现实现中英文切换
一、安装vue-i18n插件npm i vue-i18n二、main.js文件的配置import VueI18n from 'vue-i18n'Vue.use(VueI18n) // 通过插件的形式挂载const i18n = new VueI18n({ locale: 'zh-CN', // 语言标识 //this.$i18n.locale //...原创 2019-09-25 10:43:07 · 9951 阅读 · 3 评论 -
JS数组中的filter方法
一维数组:const arr = [1,2,3].filter((v)= > { console.log(v); //输出为1,2,3 return v>1;})console.log(arr); //输出为[2,3];二维数组:let data = [{ a: [{re:true},{re:false}] b: '123'...原创 2019-09-23 10:47:05 · 2551 阅读 · 0 评论 -
如何提高客户端的访问性能
网页内容减少 http 请求次数; 减少 DNS 查询次数; 减少 iframe 数量; 减少 DOM 元素数量; 延迟加载; 提前加载; 滚动加载; 根据域名划分内容; 避免页面跳转; 缓存 Ajax;图片css sprites,即精灵图,将多个图标文件整合到一张图片中(修改更新少的常驻型低色位的装饰小图); base64,体积小复用率低的背景装饰图标; icon...原创 2019-09-23 10:40:04 · 397 阅读 · 0 评论 -
弹出键盘时输入框被遮住
在移动端弹出键盘时输入框被遮住,如果使用定位将输入框(input或者textarea)定位到顶部区域,当手机的输入法为自带输入法时可能问题不大,但是当使用类似搜狗等输入法时,由于会高出自带输入法大约30个像素,就会造成输入框被遮盖一部分的现象。一、根据输入框的焦点来改变输入框的位置css 当输入框获得焦点, 改变位置input:focus{ position:fixed...原创 2019-09-23 09:45:53 · 1419 阅读 · 0 评论 -
vue中Class 与 Style 绑定
对象语法我们可以传给v-bind:class一个对象,以动态地切换 class:<div v-bind:class="{ active: isActive }"></div>上面的语法表示active这个 class 存在与否将取决于数据属性isActive的truthiness。你可以在对象中传入更多属性来动态切换多个 class。此外,v...原创 2019-09-21 14:22:11 · 187 阅读 · 0 评论 -
背景以及文本渐变
使用linear-gradient控制背景渐变<div class="bruce"> <div class="gradient-bg">iCSS</div></div>.gradient-bg { display: flex; justify-content: center; align-items: center; hei...原创 2019-09-19 14:39:47 · 162 阅读 · 0 评论 -
使用:nth-child()选择指定元素
<ul class="specified-scope"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>...原创 2019-09-19 14:34:45 · 455 阅读 · 0 评论 -
使用vw定制rem自适应布局
结合vw单位和calc()脱离移动端使用rem布局需要依赖JS设置不同屏幕宽高比的控制但是要注意:rem页面布局不兼容低版本移动端系统/* 基于UI width=750px DPR=2的页面 */html { font-size: calc(100vw / 7.5);}...原创 2019-09-19 14:33:47 · 782 阅读 · 0 评论 -
淘宝放大镜插件(vue-piczoom)
Build Setup 使用步骤# 安装 installnpm install vue-piczoom --save# 使用 use--scriptimport PicZoom from 'vue-piczoom'export default { name: 'App', components: { PicZoom }}--html<pic-z...原创 2019-09-19 11:19:14 · 3022 阅读 · 3 评论 -
Vue 中的 key 有什么作用?
一、首先让我们看一下vue中的源码中key值的使用因为key值的使用主要是在diff算法中用到, 所以我们可以在vue源码的src\core\vdom\patch.js目录中可以找到相关代码来进行分析。sameVnode函数从代码上可以看到,此处 key 决定了 当前节点是否应该 patch(打补丁),所以 key不相同的话,节点将会被销毁/添加,因此会执行如下事件,执行过程中会完整...原创 2019-09-19 10:25:36 · 3980 阅读 · 0 评论 -
vue中实现全选多选
一、给全选框绑定点击事件HTML:<div class="fixedLef" @click="chooseAllCart"> <input type="checkbox" :checked="chooseAll" name id /> <p>全选</p> </div>JS: chooseAllC...原创 2019-09-17 14:34:40 · 3897 阅读 · 0 评论 -
盒模型
box-sizing: content-box(W3C盒子模型):元素的宽高大小表现为内容的大小。 box-sizing: border-box(IE盒子模型):元素的宽高表现为内容 + 内边距 + 边框的大小。背景会延伸到边框的外沿。IE5.x和IE6在怪异模式中使用非标准的盒子模型,这些浏览器的width属性不是内容的宽度,而是内容、内边距和边框的宽度的总和。...原创 2019-09-16 17:35:24 · 248 阅读 · 0 评论 -
伪类和伪元素的区别
伪类和伪元素的区别:1、伪类的操作对象是文档树中已有的元素,用于当已有元素处于某个状态时,为其添加对应的样式,这个状态是根据用户行为而动态变化的。比如说,当用户悬停在指定的元素时,我们可以通过:hover来描述这个元素的状态。虽然它和普通的css类相似,可以为已有的元素添加样式,但是它只有处于dom树无法描述的状态下才能为元素添加样式,所以将其称为伪类。2、伪元素则创建了一个文档数外的元素...原创 2019-09-16 17:18:10 · 575 阅读 · 0 评论 -
在点击按钮的时候,怎么取消按钮中的文本被选中
user-selectCSS属性,控制着用户能否选中文本。除了在文本框里,它在chrome浏览器中对已加载的文本没有影响。注意:这是一个实验中的功能此功能某些浏览器尚在开发中,请参考浏览器兼容性表格以得到在不同浏览器中适合使用的前缀。由于该功能对应的标准文档可能被重新修订,所以在未来版本的浏览器中该功能的语法和行为可能随之改变。HTML:<p>你应该可以选中这段文本。...原创 2019-09-25 13:26:53 · 1157 阅读 · 0 评论 -
vue中data里写return和不写的区别
不使用return包裹的数据会在项目的全局可见,会造成变量污染 。 使用return包裹后数据中变量只在当前组件中生效,不会影响其他组件。 **后者的data是一个方法,**也就是: data:function(){ return{ }} ...原创 2019-09-25 13:44:47 · 1076 阅读 · 0 评论 -
vscode启动cpu占100%,特别卡怎么解决
在编辑器中找到文件》首选项》设置,然后搜索search.follow,将“控制是否在搜索中跟踪符号链接”的√去掉然后继续搜索exclude,在Files:exclude下面有一个添加模式,输入**/node_modules,设置忽略node_modules这个文件夹...原创 2019-09-26 10:18:53 · 5186 阅读 · 5 评论 -
the content must be served over HTTPS 解决方案
起因上传图片出现了如下警告:报错的原因就是当前页面是https协议加载的,但是这个页面发起了一个http的ajax请求,这种做法是非法的。HTTPS页面里动态的引入HTTP资源,比如引入一个js文件,会被直接block掉的.在HTTPS页面里通过AJAX的方式请求HTTP资源,也会被直接block掉的。客户端解决办法可以在相应的页面的<head>里加上这句代码,意思...原创 2019-10-08 14:16:28 · 29723 阅读 · 3 评论 -
bubbly-bg.js实现动态气泡背景效果
前言bubbly-bg.js是基于HTML5画布,压缩后的版本小于1kb,但是它能制作出各种漂亮的动态气泡背景效果,非常强大。使用可以通过npm来安装bubbly-bg.js动态气泡背景插件。npm install bubbly-bg --save可以在页面中约会bubbly-bg.js文件。<script type="text/javascript" src...原创 2019-10-08 10:31:27 · 655 阅读 · 0 评论 -
Bideo.js实现全屏视频背景
特性自动调整:Bideo.js可以根据当前浏览器窗口的大小自动调整视频尺寸,当浏览器窗口调整时,它会自适应窗口尺寸,移动端、PC端都能自动调整,使视频作为背景并全屏展示。覆盖:视频作为网页背景后,我们可以任意在视频上层放置任意HTML内容。视频封面:页面打开时,视频可能需要几秒钟才能加载完,那么我们可以设置一张图片作为视频的封面,等加载完再播放。HTML在你的页面body...原创 2019-10-08 10:23:37 · 1375 阅读 · 0 评论 -
Vue移动端右滑屏幕返回上一页
有些时候我们玩手机更喜欢使用手势滑动带来的用户操作体验。Vue touch directive是一个用于移动设备操作指令的轻量级的VUE组件。使用它可以轻松实现屏幕触控、滑动触发事件,提高用户体验。安装依赖使用npm安装vue-directive-touch组件。npm install vue-directive-touch --save引入组件在main.js中引入vue...原创 2019-10-08 10:14:18 · 2113 阅读 · 0 评论 -
使用element UI的日期选择器时,默认显示当天日期。
需求:输入框中要把当天日期显示在输入框中<el-form-item label="交易数据"> <el-date-picker type="date" placeholder="选择日期" v-model="searchFormField.date" ...原创 2019-09-30 15:58:00 · 2475 阅读 · 0 评论 -
vue项目引入字体.ttf
一、下载完字体后在src下新建common文件,文件夹中包含以下文件(FZCYJ.ttf 为例)二、打开font.css@font-face { font-family: 'myfont'; //重命名字体名 src: url('FZCYJ.ttf'); //引入字体 font-weight: normal; font-style: normal; }...原创 2019-09-30 15:28:49 · 1915 阅读 · 0 评论 -
浏览器的同源策略
前言:同源策略限制了从同一个源加载的文档或脚本如何与来自另一个源的资源的交互。这是一个用于隔离潜在恶意文件的安全机制。同源的定义如果两个页面的协议,端口(如果有指定)和主机都相同,则两个页面具有相同的源。我们也可以把它称为“协议/主机/端口 tuple”,或简单地叫做“tuple". ("tuple" ,“元”,是指一些事物组合在一起形成一个整体,比如(1,2)叫二元,(1,2,3)叫...原创 2019-09-30 15:17:27 · 317 阅读 · 0 评论 -
页面导入样式时,使用link和@import有什么区别?
(1)link属于XHTML标签,除了加载CSS外,还能用于定义RSS, 定义rel连接属性等作用;而@import是CSS提供的,只能用于加载CSS;(2)页面被加载的时,link会同时被加载,而@import引用的CSS会等到页面被加载完再加载;(3)import是CSS2.1 提出的,只在IE5以上才能被识别,而link是XHTML标签,无兼容问题; ( 4 )link支持使...原创 2019-09-30 14:39:53 · 182 阅读 · 0 评论 -
vue项目如何刷新当前页面
1.场景在处理列表时,常常有删除一条数据或者新增数据之后需要重新刷新当前页面的需求。2.遇到的问题1. 用vue-router重新路由到当前页面,页面是不进行刷新的2.采用window.reload(),location.reload();或者this.$router.go(0);刷新时,整个浏览器进行了重新加载,闪烁,体验不好3.解决方法provide / inject...原创 2019-09-29 20:58:18 · 671 阅读 · 0 评论 -
promise不兼容,es6语法报错
前言:在项目中使用到了ES6的Promise对象,代码在谷歌浏览器中正常运行,而在360浏览器下的兼容模式下,IE内核是不支持Promise的。ES6 promise的支持情况:一、polyfill.js解决<script src = "https://cdn.polyfill.io/v2/polyfill.min.js"></script>/...原创 2019-09-29 20:50:10 · 1388 阅读 · 0 评论 -
如何实现点击后将已有HTML结构复制并新增到页面上
html://绑定点击事件<div class="wlAddBtn " @click="add()"> 新增</div>//要复制的HTML结构 <div class="model" v-for="(val,index) in htmlArr" :key="index"> <p class="modelTitle...原创 2019-09-27 16:46:10 · 535 阅读 · 0 评论 -
Vue中使用fullpage.js实现全屏滚动(基础演示)
安装npm install --save vue-fullpage.js引用import VueFullpage from 'vue-fullpage.js'Vue.use(VueFullpage)使用<template> <div> <full-page :options="options"> ...原创 2019-09-26 11:13:03 · 12230 阅读 · 11 评论 -
vue中使用qrcodejs2 生成二维码
一、安装npm install qrcodejs2 --save二、引用importQRcode from 'qrcodejs2'三、HTML<div id="qrcode"></div>四、jsmethods: { // 生成二维码 qrcode() { let that = this; ...原创 2019-09-26 10:49:38 · 294 阅读 · 0 评论 -
vue-router 路由模式
vue-router 有 3 种路由模式:hash、history、abstract:switch (mode) { case 'history': this.history = new HTML5History(this, options.base) break case 'hash': this.history = new HashHistory(this, options...原创 2019-09-16 16:37:12 · 359 阅读 · 0 评论 -
使用mask雕刻镂空背景
效果图:代码:<template> <div> <div class="bruce pr flex-ct-x"> <div class="mask-layer"></div> </div> </div></template><script&...原创 2019-09-16 15:01:59 · 378 阅读 · 0 评论 -
逐个字符自动打印出来的文字
效果图:代码:<template> <div> <div class="bruce flex-ct-x"> <div class="auto-typing">Do You Want To Know More About CSS Development Skill</div> </...原创 2019-09-16 14:50:19 · 398 阅读 · 0 评论 -
$emit是如何向父组件传递数据的?
//1. 能够触发当前组件标签身上定义的一个事件 //2. 要触发当前组件标签身上的fn这个事件 //3. 所以我们要给当前组件标签注册一个fn事件 //4. 通过@就是v-on的缩写 @fn="" //5. 因为注册了fn事件,所以需要一个事件函数 @fn...原创 2019-08-30 16:20:28 · 463 阅读 · 0 评论 -
页面跳转样进入页面样式混乱错位但是刷新页面后又好了
原因:要是同样的样式,前面已经加载过了,浏览器在跳到下个页面相同的样式就不会再重新加载了。在起名的时候可以自行区分,也可以根据官网的提示,在页面的style中加上scoped <style scoped></style>这个可选 scoped 属性会自动添加一个唯一的属性 (比如 data-v-21e5b78) 为组件内 CSS 指定作用域,也就是给你定义的名字前加一串哈...原创 2019-09-04 13:51:02 · 5548 阅读 · 1 评论