- 博客(22)
- 收藏
- 关注
原创 vue px单位转vw单位 记录
本文记录一下px自动转换vw适配的方法:npm i postcss-aspect-ratio-mini postcss-px-to-viewport postcss-write-svg postcss-cssnext postcss-viewport-units cssnano --savecnpm i cssnano-preset-advanced --save-dev配置postcss.config.js文件module.exports = { "plugins": { "po
2020-05-19 11:40:23
646
1
原创 前端面试题库——什么是防抖和节流?有什么区别?如何实现?
什么是防抖与节流?防抖(debounce):当持续触发事件时,一定时间段内没有再触发事件,事件处理函数才会执行一次,如果设定的时间到来之前,又一次触发了事件,就重新开始延时。节流(throttle):当持续触发事件时,保证一定时间段内只调用一次事件处理函数。节流通俗解释就比如我们水龙头放水,阀门一打开,水哗哗的往下流,秉着勤俭节约的优良传统美德,我们要把水龙头关小点,最好是如我们心意按照一定规...
2020-02-28 10:22:05
3439
1
原创 前端面试题库——['1', '2', '3'].map(parseInt)
第一眼看到这道题目的时候,下意识的反应是[1,2,3],但是真正的答案是[1,NaN,NaN]。通常情况下,map方法中的callback函数只需要接受一个参数,就是正在被遍历的数组元素本身。这并不意味着map只给callback传了一个参数(会传递三个参数——currentValue:当前元素的值;index:当前元素的索引值;arr :当前元素属于的数组对象)。通常使用parseInt时,...
2020-02-27 16:36:03
222
原创 vue-seamless-scroll实现列表无缝滚动
一个简单的无缝滚动,最近折磨了我好久,记录一下。先上一下最终实现效果:最开始html标签用的table、thead、tbody然后结合animate和settimeout实现的,但是实现之后每次滚动都抖一下,也找不到原因;后来寻思是不是table的原因,于是换成div试了一下,原来的问题解决了但是出现了新问题:滚动不流畅,就像网速不好似的。。。于是,我又换成了现在的vue-seamless-...
2020-02-19 10:31:29
3942
2
原创 文章分享——Vue的slot-scope的场景的个人理解
分享一篇文章——Vue的slot-scope的场景的个人理解,对于我个人理解作用域插槽很有帮助Vue的slot-scope的场景的个人理解
2019-12-03 16:56:09
190
原创 vue实现列表无缝滚动
vue实现列表无缝滚动HTML部分代码css部分代码js部分代码HTML部分代码<template> <div id="box" class="wrapper"> <div class="contain" id="con1" ref="con1" :class="{anim:animate==true}"> <List ...
2019-10-21 14:17:43
2713
原创 vue小练习之todolist
效果图:代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>小目标列表</title> <link href="https://cdn.bootcss.co
2019-02-19 17:27:33
235
原创 响应式游戏网站之首页轮播图制作
下面上首页轮播图部分代码,先看效果图:下面上代码: &lt;div class="hero-section"&gt; &lt;div class="hero-slider"&gt; &lt;!--Hero Item start--&gt; &lt;d
2019-01-21 09:05:23
607
原创 响应式游戏网站之首页导航制作
看到一个风格很喜欢的游戏网站,准备试着用bootstrap做一下,正好最近在学习bootstrap。今天记录一下首页导航部分:图上是效果图,下面附代码:html:<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="utf-8"> <meta http-equi
2019-01-19 10:34:23
354
原创 freecodecamp小练习——Caesars Cipher凯撒密码
凯撒密码(让上帝的归上帝,凯撒的归凯撒)下面我们来介绍风靡全球的凯撒密码Caesar cipher,又叫移位密码。移位密码也就是密码中的字母会按照指定的数量来做移位。一个常见的案例就是ROT13密码,字母会移位13个位置。由’A’ ↔ ‘N’, ‘B’ ↔ ‘O’,以此类推。写一个ROT13函数,实现输入加密字符串,输出解密字符串。所有的字母都是大写,不要转化任何非字母形式的字符(例如...
2019-01-02 14:14:27
217
原创 freecodecamp小练习——Falsy Bouncer过滤数组假值
记录一下今天接触的一个关于Boolean的小知识点。代码:function bouncer(arr) { // 请把你的代码写在这里 return arr.filter(element=>Boolean(element));}bouncer([7, "ate", "", false, 9]);...
2018-12-28 17:01:29
192
原创 freecodecamp小练习——Reverse a String翻转字符串
很小的练习:先把字符串转化成数组,再借助数组的reverse方法翻转数组顺序,最后把数组转化成字符串。代码:function reverseString(str) { var strf=str.split(''); return strf.reverse().join('');}reverseString("hello");很简单的小练习,记录一下。...
2018-12-27 10:08:06
138
原创 freecodecamp任务一——Build a Tribute Page
最近有在按照freecodecamp的教学课程进行学习。其实很茫然不知道从哪里开始着手,只能再找一个教程按进度学习。今天按照进度进入第一个比较完整的小项目练习,来此记录一下。今天的任务是设计一个(https://codepen.io/FreeCodeCamp/full/NNvBQW/) 页面,使用的是bootstrap框架。之前有了解过bootstrap,但是没有投入实践,今天也算是熟悉一下该框架...
2018-12-24 17:20:07
982
原创 vue之自定义指令
这篇文章以聚焦输入框为例简单总结一下vue中自定义指令的内容。当页面加载时,该元素将自动获得焦点 ,也就是当你打开页面时还没有点击任何内容,该输入框就已经处于聚焦状态。下面用指令实现这个功能: // 注册一个全局自定义指令 `v-focus` Vue.directive('focus',{ // 当被绑定的元素插入到 DOM 中时…… inserted:fun...
2018-12-12 11:33:53
130
原创 vue练习之品牌列表案例
今天做了一个品牌列表案例,一个动图展示今天的学习成果:这次页面用了bootstrap框架上代码:&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &am
2018-12-11 17:44:55
948
2
原创 vue小练习之购物车实现
今天从网上找了一个购物车的小例子,照着敲了一下,收获不少。下面的用一个小动图展示一下成果:接下来上代码:<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <link href="css/shoppingcart.css" rel="stylesheet"
2018-12-07 17:57:00
520
原创 Flex 布局教程:语法篇
上午学习了一下flex布局的基础语法,以下内容主要参考了flex布局教程:语法篇-阮一峰的网络日志【感谢】一、Flex 布局是什么?Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为 Flex 布局。 .box{ display: flex; }行内元素也可以使用 Flex 布局。 ...
2018-12-06 13:56:27
174
原创 vue小练习之添加、删除信息行
做了一个添加、删除信息行的小练习,比较简单,上代码<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id=
2018-12-05 16:27:44
253
原创 vue.js条件渲染中v-if 对比v-show
这篇记录一下vue的条件渲染:v-if:<h1 v-if="ok">Yes</h1>也可以用 v-else 添加一个“else 块”:<h1 v-if="ok">Yes</h1><h1 v-else>No</h1>在 元素上使用 v-if 条件渲染分组因为 v-if 是一个指令,所以
2018-12-05 13:32:57
429
原创 vue中计算属性与方法的不同之缓存
今天没太多进展,只是看了一点vue.js官网的一些东西。说实话,看的很吃力。今天总结一下vue中计算属性computed和方法methods在缓存上的区别。以上两幅图中,实现的功能是相同的:将message的值反转。图一是像绑定普通属性一样在模板中绑定计算属性,reversedMessage依赖于message,当 message 发生改变时,所有依赖 reversedMessage 的绑定也...
2018-12-03 18:10:49
422
原创 vue小练习——选项卡切换
上午做了个选项卡的小练习,很简单,可以熟悉语法吧。上代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="
2018-11-30 11:20:06
301
原创 vue小项目练习——输入标题并将输入的标题添加到标题列表
第一次写博客,先自我介绍一下吧,我是18届中国石油大学(华东)计算机科学与技术专业的本科毕业生[有没有学长或者学姐,吱吱吱],现从事前端工作。希望通过这个博客记录自己的学习之路,加油!今天没有开发任务,自学了一下vue,做了个小练习。之前只是简单看了一下vue的模板语法,今天的小实例让我学习不少。上代码。&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head...
2018-11-29 17:30:56
553
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人