![](https://img-blog.csdnimg.cn/20201014180756919.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
我的小熊不见了
技术改变生活,而你改变世界
展开
-
移动端h5自适应适配之flexible.js打假
移动端h5自适应适配之flexible.js打假最近做一个移动端的h5适配,在网上找方案基本上都是使用flexible.js,然后顺理成章我也入了这个坑。引用flexible.js的方式无外乎cdn引入:<script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.2/??flexible_css.js,flexible.js"></script>下载文件到本地或者npm安装。源代码如下:在引入之后发现遇到了各种奇怪的问题,比原创 2021-11-24 15:55:45 · 3082 阅读 · 1 评论 -
使用vue实现一个电子签名组件
使用vue实现一个电子签名组件在生活中我们使用到电子签名最多的地方可能就是银行了,每次都会让你留下大名。今天我们就要用vue实现一个电子签名的面板想要绘制图形,第一步想到的就是使用canvas标签,在之前的文章里我们使用canvas实现了一个前端生成图形验证码的组件,被吐槽不够安全,那么这个电子签名组件相比不会被吐槽了吧~canvas<canvas> 标签是 HTM...原创 2020-01-03 16:26:30 · 1998 阅读 · 0 评论 -
Docker安装ELK并实现JSON格式日志分析
ELK是什么ELK是elastic公司提供的一套完整的日志收集以及前端展示的解决方案,是三个产品的首字母缩写,分别是ElasticSearch、Logstash和Kibana。其中Logstash负责对日志进行处理,如日志的过滤、日志的格式化等;ElasticSearch具有强大的文本搜索能力,因此作为日志的存储容器;而Kibana负责前端的展示。ELK搭建架构如下图:加入了filebea...原创 2019-10-24 13:52:55 · 1289 阅读 · 0 评论 -
电商左侧商品分类菜单实现
电商左侧商品分类菜单实现无论是pc端还是手机端,都有类似左侧分类,点击后右侧切换内容的功能页面。要想实现这个功能,首先第一步是要掌握左右布局的方法。左右布局推荐使用flex弹性布局.parent { display: flex;}.left { width: 200px; height: 100%; background-color: red...原创 2019-10-11 10:40:38 · 2658 阅读 · 0 评论 -
程序员不装x能行?先给登录来一个图形验证码!(canvas实现)
细心的同学可以发现,现在很多网站当登录多次之后就会出现一个图形验证码,或是当提交表单、或点击获取手机验证码等等场景都会有图形验证码的出现。那么图形验证码是为了解决什么问题而出现的呢?什么是图形验证码图形验证码是验证码的一种。验证码(CAPTCHA)是“Completely Automated Public Turing test to tell Computers and Human...原创 2019-09-09 14:36:43 · 643 阅读 · 0 评论 -
给手机端页面留一个调试后门吧(vue)
当我们在浏览器开发vue页面时,由于浏览器对于调试有天然的支持,我们开发起来很方便。但是现在已经进入了移动端时代,移动端页面的需求越来越大。在开发移动端页面的时候我们通常是在浏览器完成开发完成,之后才在手机端测试,如果测试出现问题还得重新回到浏览器上寻找错误。甚至还有嵌入在APP的页面,经过调试之后还要重新发包。当然还有更加奇怪的现象,由于手机浏览器和Web浏览器的差异,经常会发现在W...原创 2019-09-04 10:25:47 · 1261 阅读 · 0 评论 -
vue父子组件通信高级用法
vue项目的一大亮点就是组件化。使用组件可以极大地提高项目中代码的复用率,减少代码量。但是使用组件最大的难点就是父子组件之间的通信。子通信父父组件<template> <div class="parent"> 我是父组件 <!--父组件监听子组件触发的say方法,调用自己的parentSay方法--> <!--通过:m...原创 2019-08-27 10:51:30 · 1072 阅读 · 0 评论 -
Vue.js动态绑定class
在项目中我们经常遇到需要动态切换`class`的需求,比如说点击图片放大,又或者选中项变颜色,再比如实现换皮肤的功能等等。这时候`vue`的动态`class`就能帮助我们了。使用对象控制classboolean控制<div v-bind:class="{ active: isActive }"></div>在上面的语法中,active 是c...原创 2019-05-05 10:13:54 · 910 阅读 · 0 评论 -
vue实战-vue父子组件通信方式汇总
vue项目的一大亮点就是组件化。使用组件可以极大地提高项目中代码的复用率,减少代码量。但是使用组件最大的难点就是父子组件之间的通信。子通信父&lt;template&gt; &lt;div class="parent"&gt; 我是父组件 &lt;!--父组件监听子组件触发的say方法,调用自己的parentSay方法--&gt; &原创 2019-02-20 19:02:21 · 296 阅读 · 0 评论 -
vue实战-换皮肤2(使用less实现)
在上一节中我们通过动态切换html中css的引用路径实现了vue中的换皮肤功能。但是这种方法有一个缺陷,那就是只能用css的语法来实现。这个缺陷在某些变态的需求下会增加我们很多工作量,因此本节中将介绍vue中另一种换皮肤的实现思路,用less语法实现换肤。上节中讲过,想要达到换皮肤的目的无非就是替换掉样式文件,而一般项目中使用less都会在style标签中import样式文件。但是现在我们想...原创 2019-02-19 17:27:25 · 1846 阅读 · 1 评论 -
vue实战-实现换主题/皮肤功能
现在的app和pc网站做的越来越花哨,但是有时候用户并不喜欢你给他挑选好的主题颜色,这个时候就需要一个换皮肤的功能了。那么我们怎么在vue中实现这个换皮肤的功能呢?实现思路我们用vue一般都是写单页面程序,因此在实际发布的时候只有一个html以及一堆静态文件(js、css、img之类)。而在html中引用了这些js和css。我们要换皮肤的话其实就是动态的去切换css,所以在这里实...原创 2019-02-19 16:29:03 · 1500 阅读 · 0 评论 -
vue实现换主题\皮肤功能
现在的app和pc网站做的越来越花哨,但是有时候用户并不喜欢你给他挑选好的主题颜色,这个时候就需要一个换皮肤的功能了。那么我们怎么在vue中实现这个换皮肤的功能呢?实现思路我们用vue一般都是写单页面程序,因此在实际发布的时候只有一个html以及一堆静态文件(js、css、img之类)。而在html中引用了这些js和css。我们要换皮肤的话其实就是动态的去切换css,所以在这里实...原创 2019-02-13 17:16:52 · 9446 阅读 · 2 评论 -
vue改变数据视图刷新问题
有时候我们会碰到数据已经更新了但是视图不更新的问题,有几个原因:1、根属性不存在,而想要直接给根属性赋值导致的视图不更新。此时初始化属性的时候给根属性初始化一个空值就可以了。2、只有通过以下几个方法更新数组push() pop() shift() unshift() splice() sort() reverse()vue才能检测到数组更新。如果想直接通过下标修改数组的话...原创 2018-06-26 17:13:47 · 7291 阅读 · 0 评论 -
script引用vue,iview入门实战
iview大体上可以分为两种使用方式:1,直接使用script引用iview的js。2,使用iview提供的脚手架。第一种方式使用iview和vue比较简单,适合刚上手vue和iview以及想体验vue特性但是又不想搭建webpack的小伙伴。<!-- import Vue.js --><script src="https://cdn.jsdelivr.ne...原创 2018-06-29 13:49:05 · 4654 阅读 · 0 评论 -
ivew iview-project脚手架入门实战
iview大体上可以分为两种使用方式:1,直接使用script引用iview的js。2,使用iview提供的脚手架。第一种方式使用script引用iview和vue比较简单,适合刚上手vue和iview的小伙伴。第二种方式iview已经为我们提供了非常精彩的iview脚手架实例。下载实例后,你需要安装node。之后在含有package.json这个文件执行命令。安装依赖...原创 2018-06-29 14:47:19 · 4917 阅读 · 0 评论