- 博客(22)
- 收藏
- 关注
RSS订阅原创 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
650
1
原创 前端面试题库——什么是防抖和节流？有什么区别？如何实现？
什么是防抖与节流？防抖（debounce）：当持续触发事件时，一定时间段内没有再触发事件，事件处理函数才会执行一次，如果设定的时间到来之前，又一次触发了事件，就重新开始延时。节流（throttle）：当持续触发事件时，保证一定时间段内只调用一次事件处理函数。节流通俗解释就比如我们水龙头放水，阀门一打开，水哗哗的往下流，秉着勤俭节约的优良传统美德，我们要把水龙头关小点，最好是如我们心意按照一定规...
2020-02-28 10:22:05
3448
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
224
原创 vue-seamless-scroll实现列表无缝滚动
一个简单的无缝滚动，最近折磨了我好久，记录一下。先上一下最终实现效果：最开始html标签用的table、thead、tbody然后结合animate和settimeout实现的，但是实现之后每次滚动都抖一下，也找不到原因；后来寻思是不是table的原因，于是换成div试了一下，原来的问题解决了但是出现了新问题：滚动不流畅，就像网速不好似的。。。于是，我又换成了现在的vue-seamless-...
2020-02-19 10:31:29
3953
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
2722
原创 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
237
原创 响应式游戏网站之首页轮播图制作
下面上首页轮播图部分代码，先看效果图：下面上代码： &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
611
原创 响应式游戏网站之首页导航制作
看到一个风格很喜欢的游戏网站，准备试着用bootstrap做一下，正好最近在学习bootstrap。今天记录一下首页导航部分：图上是效果图，下面附代码：html:<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="utf-8"> <meta http-equi
2019-01-19 10:34:23
356
原创 freecodecamp小练习——Caesars Cipher凯撒密码
凯撒密码（让上帝的归上帝，凯撒的归凯撒）下面我们来介绍风靡全球的凯撒密码Caesar cipher，又叫移位密码。移位密码也就是密码中的字母会按照指定的数量来做移位。一个常见的案例就是ROT13密码，字母会移位13个位置。由’A’ ↔ ‘N’, ‘B’ ↔ ‘O’，以此类推。写一个ROT13函数，实现输入加密字符串，输出解密字符串。所有的字母都是大写，不要转化任何非字母形式的字符(例如...
2019-01-02 14:14:27
219
原创 freecodecamp小练习——Falsy Bouncer过滤数组假值
记录一下今天接触的一个关于Boolean的小知识点。代码：function bouncer(arr) { // 请把你的代码写在这里 return arr.filter(element=>Boolean(element));}bouncer([7, "ate", "", false, 9]);...
2018-12-28 17:01:29
194
原创 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
132
原创 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
954
2
原创 vue小练习之购物车实现
今天从网上找了一个购物车的小例子，照着敲了一下，收获不少。下面的用一个小动图展示一下成果：接下来上代码:<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <link href="css/shoppingcart.css" rel="stylesheet"
2018-12-07 17:57:00
531
原创 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
254
原创 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
431
原创 vue中计算属性与方法的不同之缓存
今天没太多进展，只是看了一点vue.js官网的一些东西。说实话，看的很吃力。今天总结一下vue中计算属性computed和方法methods在缓存上的区别。以上两幅图中，实现的功能是相同的：将message的值反转。图一是像绑定普通属性一样在模板中绑定计算属性，reversedMessage依赖于message，当 message 发生改变时，所有依赖 reversedMessage 的绑定也...
2018-12-03 18:10:49
426
原创 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
557
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人