- 博客(47)
- 收藏
- 关注
RSS订阅原创 css用div实现table效果
最近项目需要实现类似table样式，使用div实现了如上图的效果：html代码如下<div class="table-wrapper"> <div class="table-item"> <span class="table-title">能量(kcal)</span> <span class...
2019-10-11 14:08:29
1256
原创 css样式技巧总结
1. 如何正使用backgroud-image background-color: #FEE3E4 width: 252px height: 351px background-image: url('../assets/images/bg.png') background-repeat : no-repeat backgr...
2019-10-11 13:57:01
199
转载 vue render函数的使用和参数
{ // 和 `v-bind:class` 的 API 相同 class: { foo: true, bar: false }, // 和 `v-bind:style` 的 API 相同 style: { color: 'red', fontSize: '14px' }, // 普通的 HTML 属性 attrs: { id...
2019-10-08 11:54:20
1484
原创 vue如何使用mixins
mixins意思是混入，引入mixins会把mixins中定义的内容，作为组件的一部分注入这个组件，如果在全局注册，会影响所有组件，所以尽量不要全局使用；mixins其实是把好多组件重复用到的，公共的内容抽离出来，本质就是js文件，里面的格式和方法和组件中一样，只不过用mixins管理，这样在写组件的时候，一些重复的内容直接引用即可，省去了重复的工作mixins我们可以放一些，处理数据...
2019-10-08 10:49:45
288
原创 如何处理vue 使用proxyTable之后处理开发环境和生产环境路径问题
第一步. 修改vue ---config --- index.js dev中的内容pathRewrite 重写 是为了在请求时baseUrl是显示为loacalhost:8080/ 而不是loacalhost:8080/fooddev: { // Paths assetsSubDirectory: 'static', assetsPublicPath...
2019-10-04 23:28:51
2249
原创 vue 报错之{ parser: "babylon" } is deprecated; we now treat it as { parser: "babel" }.
vue项目中使用sass时遇到{ parser: "babylon" } is deprecated; we now treat it as { parser: "babel" }.问题详细解决方法如下。1.安装prettiernpm install prettier --save-dev安装完之后npm run dev这时会报错Module build failed: TypeE...
2019-09-28 17:15:56
1186
原创 vue element menu结合动态组件使用
如何结合element 的menu 点击不同的菜单选项，在同一个页面里渲染不同内容呢？关键词：使用动态组件在同一个页面里渲染不同组件<component :is="currentView"></component>结合element上代码html代码<el-menu default-active="1" ...
2019-09-23 11:25:08
379
原创 nodejs之stream
对http 服务器发起请求的request 对象就是一个 Stream，所有的stream都是EventEmitter的实例它的事件有：data: 当有数据时触发end：没有更多数据可读时触发error：读取或写入时发生错误触发finish：数据被写入底层时触发下面的例子是处理post请求的例子var http = require("http")var querys...
2019-07-31 15:48:30
95
原创 常用的算法（持续更新）
1.escapeHTML() 将输入的html转义；（防止利用前端输入框输入脚本内容进行恶意攻击的，将输入转义）function escapeHTML(str) { return String(str) .replace(/&/g, '&') .replace(/"/g, '"') ...
2019-07-30 10:02:38
111
原创 iview之table的render函数里this指向问题
项目中遇到table里的colums的render函数，一直找不到this解决方法：在data里把当前vue实例缓存备用，轻松解决问题data () { var self = this // 存储当前vue实例this,这行是重点 return { columns: [ { title: '管理员', key: 'admin...
2019-07-29 15:36:24
2422
1
原创 iview 之table 多个操作按钮时使用下拉菜单显示
最近项目遇到，多个操作按钮需要隐藏显示，通过下拉列表显示，实现如图，直接上代码(h, params, vm) => { return h('Dropdown', [ h('i-button', { props: { ...
2019-07-16 15:59:47
1602
原创 iview 踩坑之 menu菜单
<Menu :theme="theme3" active-key="0" class="menu-wrapper" width="100%" @on-select="handleSelect"> <Menu-group title="租户"> <Menu-item v-for="(item,index) of me...
2019-07-15 10:21:06
555
转载 前端跨页面通信，你知道哪些方法
在浏览器中，我们可以同时打开多个Tab页，每个Tab页可以粗略理解为一个“独立”的运行环境，即使是全局对象也不会在多个Tab间共享。然而有些时候，我们希望能在这些“独立”的Tab页面之间同步页面的数据、信息或状态。正如下面这个例子：我在列表页点击“收藏”后，对应的详情页按钮会自动更新为“已收藏”状态；类似的，在详情页点击“收藏”后，列表页中按钮也会...
2019-07-02 09:41:32
403
原创 踩坑iview之无法监听scroll事件
iview在组件里无法监听scroll事件，需要在mounted里原生绑定div.addEventListener('scroll',function () {})
2019-07-01 11:52:13
1597
1
原创 git 使用https克隆代码
使用https clone代码的时候，一般会告诉你验证问题，无法拉取代码，在clone之前，在命令行里输入以下代码，亲测有效git config http.sslVerify "false"然后再git clone XXXXX...
2019-07-01 11:31:17
4598
1
原创 处理vue路由不刷新问题
项目中遇到的场景，从A页面到B页面，再返回的A页面，A页面没有刷新，可以这样解决：watch: { '$route'(to, from) { if (from.path == "/clusters/create") { this.getList(); } }}...
2019-07-01 11:27:09
340
原创 vue axios 实现并发请求
项目中遇到了同时请求两个接口的并发请求，如果遇到更多也适用，直接上代码axios.js代码根据axios官网示例使用axios.all(options).then(axios.spread(res=>{}))方法，我使用promise处理了resolve和rejectclass HttpRequest { mergeRequest(options) { retu...
2019-07-01 11:22:24
1464
原创 nodejs学习笔记1
nodejs三大特性：1.单线程，最大能力处理请求2.非阻塞I/O，I/O请求时不会等待，而是执行之后语句3.事件驱动，I/O结束了，会加入到event loop中等待调度没有web容器，所以路径不是文件夹的嵌套关系...
2019-03-25 14:08:30
112
原创 git 创建本地分支推到远程以及本地分支与远程分支关联
1.我们拿到项目的时候，通常需要先从远程master分支上获取代码，此时可以使用git clone指令将远程代码克隆到本地git clonehttps://www.xxx/xxx.git2.通常我们开发不会在master主干分支上开发，会利用给git checkout 指令新建自己的分支，然后在自己创建的分支开发git checkout dev3.此时远程没有自己的dev分支的...
2019-03-18 14:24:10
1403
转载 setTimeout(fn,0)和Promise.resolve()区别
一、js的异步任务运行机制（1）所有同步任务都在主线程上执行，形成一个执行栈（execution context stack）。（2）主线程之外，还存在一个"任务队列"（task queue）。只要异步任务有了运行结果，就在"任务队列"之中放置一个事件。（3）一旦"执行栈"中的所有同步任务执行完毕，系统就会读取"任务队列"，看看里面有哪些事件。那些对应的异步任务，于是结束等待状态，进入...
2019-02-11 14:54:01
948
原创 javascript的加载、编译、线程
一. Js嵌入网页的三种方式：1.script标签对，将代码块写入进去；2.加载外部脚本<script src="example.js"></script>，如果脚本使用了非英文字符，还需要注明charset；<script charset="utf-8" src="https://7n.w3cschool.cn/attachments/image...
2018-12-28 14:33:14
189
原创 原生js实现无缝轮播图
先上效果图原理图如图可见，是页面按顺序依次显示5张图片，包裹这五张图片的外层的盒子，我们叫ul，通过向左或右移动不同距离，实现在视图中显示的不同的图片，实现轮播，而同时下面的分页小球需要根据当前显示的内容进行点亮；而无缝轮播图需要在第五张图片后面再加上第一张图片，这样通过右侧箭头，向右切换，当页面切换到第六张时，也就是最后一张图片，此时需要将ul的位置设置为第一张图的位置...
2018-10-17 15:59:11
732
原创 使用js实现轮播图
先上效果原理，html布局分为内容页部分，分页部分，有5个内容页对应5个分页小球；有一个最外层的盒子大小为图示大小，里面的盒子，宽度要远大于外层盒子的宽度，因为这个盒子要存放所有采取float布局的内容页，float布局会使所有内容页都排在一行，通过父盒子的overflow：hidden属性，隐藏超出外层盒子的部分；点击分页小球，里面的内容页反向移动相应距离 ，当然页面移动需要动画效果...
2018-10-17 11:33:59
222
1
原创 原生js实现滚动条
上效果图页面布局一个wrapper，左侧是内容部分，右侧是滚动条部分，包括滚动区域和滚动小块，原理是利用滚动滑块在滚动区域的滚动距离与内容区域在盒子中移动距离比例关系实现联动html部分代码<div class="scroll-wrapper"> <p class="content"></p> <div class="sc...
2018-10-16 22:07:51
2283
1
原创 css3滤镜
css3提供了fiter属性，可以对图片做特效处理，如模糊，亮度，对比度等常用写法：-webkit-filter:blur(1px) /*兼容Chrome, Safari, Opera */filter:blur(1px)常用的效果有：blur（px） 高斯模糊 brightness(%) 亮度（0-100%） contrast(%) 对比度 drop-shadow(水...
2018-10-13 16:12:16
281
原创 媒体查询media query
1.媒体查询让css可以更精确作用域不同媒体类型和同一媒体的不同条件 ；可以使用max或min表示“大于等于”，“小于等于”；可以用在css中的@media和@import规则上也可用在html和xml中@media screen and (width:600px){…}@import url('demo.css') screen and (width:600px)<link m...
2018-10-13 15:00:44
542
原创 bootstrap笔记之栅格系统
1.栅格系统通过行和列来创建布局，一行（row）被划分12等份宽度，想让列宽等于几就设置预定义类比如.col-md-4，这个元素在中等屏幕中占4份宽的列2.所有的列必须必须是row的子元素，且只有列可以作为row的子元素，row要被包裹在.container（固定宽度）或.container-fluid(100%宽度中)<div class="container"> ...
2018-10-13 12:20:40
282
原创 ES6之变量的解构赋值
解构，ES6允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构一、数组的解构赋值var a = 1;var b = 2;var c = 3;//ES6允许写成下面对应位置，对变量赋值。var [a, b, c] = [1, 2, 3];1.这种写法属于“模式匹配”，只要等号两边的模式相同，左边的变量就会被赋予对应的值let [aa, [[bb],...
2018-10-12 23:20:59
99
原创 ES6 之let 和const
1.const声明常量，只读不可写，声明的时候必须立即初始化（赋值），let声明的变量只在代码块中起作用2.不存在变量提升，变量一定要先声明，再使用console.log(foo); // 输出undefinedconsole.log(bar); // 报错ReferenceErrorvar foo = 2;let bar = 2;3.let不允许在相同作用域，重复声明一个变量...
2018-10-12 21:47:53
115
转载 github好用的插件
GitHubOctotree推荐指数：★★★★★insight.io推荐指数：★★★★★OhMyStar2The best way to organise your GitHub Stars.AstralOrganize Your Github StarsWith Ease.GitH...
2018-10-11 23:52:54
527
原创 vue实现menu之间的联动，用到better-scroll
实现右侧食物列表滚动，左侧菜单栏显示对应分类原理：计算右侧商品栏每个类别商品的总高度，将他们存入一个数组，左侧的菜单栏每个分类的索引取自这个数组，比如左侧index为0的时候，对应展示右侧的是第一个分类的商品，index为1时，对应展示右侧的是第二个分类的商品，根据better-scroll监听到页面的滚动的位置，当页面滚动位置介于第i类和i+1类商品高度区间，返回对应的索引值i，依次类推...
2018-10-10 23:36:49
444
原创 vue 异步组件加载
异步组件加载：vue打包后会生成app.js这里包含了所有的组件和业务逻辑，会在app运行时同步加载所有组件，而一些大型项目有很多组件和复杂的业务逻辑，此时就可以使用异步组件加载的方式，需要哪个组件去加载哪个组件而不是一次性加载所有组件使用方法：1.在vue-router中使用之前我们都是将组件直接import进去，现在可以这样写，将import写在component的箭头函数中...
2018-10-10 22:58:39
663
原创 vue中使用better-scroll插件注意事项和参数
better-scroll常用于移动端页面滚动1.注意问题，它一定有一个固定尺寸的wrapper，内容的高度要大于这个wrapper才会发生滚动，所以不要忘记加wrapper2.在使用better-scroll页面，点击事件无效，是因为better-scroll阻止了默认的点击事件，所以需要传入click：true的参数到better-scroll的对象中，如下3.当页面高度出现变化时...
2018-10-10 22:47:20
1390
原创 vue常见报错信息处理
以下均是我在做vue项目中常见且容易遇到过的问题，大部分问题根据此经验都可以解决1.浏览器界面提示服务器拒绝了你的请求解决方法：绝大部分原因是服务器端口被占用了，去config—index.js下修改端口号2.提示找不到stylus，当我们使用了stylus，但是却没有安装依赖就会提示该信息解决方法，在你所在的项目目录中，输入：npm install stylus --save-...
2018-10-10 22:21:31
3084
原创 css sticky footer布局
什么是css sticky footer布局？如果页面内容不足一页的时候，页脚块粘贴在视窗底部；如果内容足够长时，超过一页时，页脚块会被内容向下推送。此案例中是详情页面当页面内容不足一页，close按钮始终在底部，当页面内容超过一页，close按钮不会被内容遮盖，而是向下推送，在内容下面如图：样例html代码，布局模板，必须有一个wrapper，包裹内容部分<!--...
2018-10-10 21:55:30
272
原创 vue之购物车抛物线小球动画效果实现
先上最终效果图，在商品页面和商品详情页面点击加号添加商品时都可以看到小球抛物线落入购物车的动画效果此文章只写了商品页面购物小球的实现，商品详情页原理类似实现步骤：1.需要三个组件，最下方包含蓝色购物车的【购物车】组件shopCart.vue（子组件），每个【加减号】组成的购物小球组件cartControl.vue（子组件），和包含每个商品信息的goods组件goods.vue（父组...
2018-10-10 19:25:48
7095
4
原创 vue之插值
插值文本数据绑定最常见的形式就是使用mustache语法{{}}的文本插值如<p>Message:{{Msg}}</p> Mustache标签上中会被替换上数据对象上msg属性的值，无论何时，绑定的数据上对象的msg发生变化，插值部分的内容也会发生变化一次性插值，数据改变不会跟随改变，使用v-once指令<span v-once>...
2018-09-06 10:55:23
712
原创 html导航框架
首先，建立一个 main.html 用来划分显示导航和内容部分框架，将a.html的内容作为默认显示的内容；<head><title>main</title></head><frameset cols="120,*"><frame name="index" src="index.html"
2018-03-19 17:17:40
907
原创 HTML基础学习笔记4
大多数html元素被定为块级元素或内联元素块<div>1. <div> 元素是块级元素，它是可用于组合其他 HTML 元素的容器。2. <div> 元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。3. 如果与 CSS 一同使用，<div> 元素可用于对大的内容块设置样式属性。4. 以新行开始和结束，比如<h1>...
2018-03-19 15:41:25
143
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人