08 2018 档案
摘要：vue开发中遇到这样一个需求实现导航栏和中间内容相结合实现页面滑动导航跟随改变的效果。看效果： 这里我用的是vue所带的插件：vue-awesome-swiper，传送门：https://www.npmjs.com/package/vue-awesome-swiper 这个api纯英文，不过不是很难
阅读全文
摘要：vue开发中，很多地方如果说都用到了某一方法，我们就可以进行指令化封装，通过自定义指令来实现这里通过两个例子说明vue-Directive的使用 1.v-focus 主要用来实现页面加载进来的时候文本框自动获取焦点，因为原生的方法存在兼容问题，所以通过指令 来解决后可以解决部分兼容 问题 实现如下：
阅读全文
摘要：很多时候我们需要在真机上调试，进行代码的维护修改，如何在手机上查看呢？ 我们拿vue来说， 1.在vue的config/index.js文件中我们可以看到项目启动的一个端口号 上图域名是我进行修改后的，大家打开后应该会默认显示localhost 2.window+R，输入cmd进入控制台，然后输入命
阅读全文
摘要：在一次这样的需求中，需要实现滑倒底部时自动请求数据，需要动态创建节点然后追加到某元素中，这期间遇到的问题就是在动态创建节点后，类名也已经加上了 ，但是样式就是没有生效，最后发现原因的产生竟然是<style scoped></style>中scoped属性 该属性的作用是用来绑定当前样式不被污染，同时
阅读全文
摘要：如上所示一条简单的请求数据，用到了vue中axios,promise,qs等等 这里我将vue中用到的axios进行了封装方便日后使用 先对工具类进行封装utils/axios.js: // 引入模块 import axios from "axios" import qs from 'qs' //
阅读全文
摘要：我们知道，vue2.0以后，vue就不再对vue-resource进行更新，而是推荐axios，而大型项目都会使用 Vuex 来管理数据，所以这篇博客将结合两者来发送请求 1.安装axios cnpm i axios -S 2.方案一：修改原型链 首先，在main.js中引入 在这个时候，你还是无法
阅读全文
摘要：今天总结一下vue的脚手架的搭建。很简单，今天我们就来说一下 对于脚手架的具体搭建方法，我这里不在很详细的书写，具体方法我推荐菜鸟教程的方法，和具体，你一步一步的来就可以实现。 链接地址：http://www.runoob.com/vue2/vue-install.html vue2.0脚手架的搭建
阅读全文
摘要：vue中我么会经常用到通用的一些全局的方法，如何左才能实现全局的复用减少代码累赘呢？ 我们一般将公用的方法分装再utils.js文件中，然后再main.js主入口文件中将utils.js中的公共的方法通过@import引入进来即可，或者我们通过再main.js中设置Vue.prototype.xxx
阅读全文
摘要：温馨提示：一下css封装，建议按需使用，否则会造成很大的代码冗余，且很多样式会造成不符合预期的效果，建议合理使用 <a href="https://meyerweb.com/eric/tools/css/reset/">Reset.css</a> function.css /* 禁止选中文本 */
阅读全文
摘要：vue项目的默认端口为8080，有时候处于某些原因会造成端口号的冲突，因此需要我们适当的更改其端口号来解决问题，将上图中的port更改为合适的端口号就可以，但是需要注意的是浏览器的安全限制端口号详情见：https://www.cnblogs.com/bgwhite/p/9543177.html
阅读全文
摘要：浏览器由于安全问题，都会设置默认的非安全不能访问的端口 解决办法? 推荐使用这种，免去了配置的麻烦。 右键单击Chrome快捷方式 ➡ 目标 ➡ 在后面添加参数：--explicitly-allowed-ports=xxx （xxx为目标端口号） 例如：...\chrome.exe –explici
阅读全文
摘要：vue路由再vue开发的项目中可以说是一个必用的组件，而这个部分的水却依旧很深，今天我们深入分析其内部的东西，先看这样一个效果： 大家 可以看到上图中，我们通过两种方式实现了一个vue路由跳转的过度动画医技页面的参数的传递。 跳转方式及传参： vue跳转方式一共有三种：编程式跳转和router-li
阅读全文
摘要：Common.js //封装类名 function byClassName(sClassName){ if(document.getElementsBYClassName){ return document.getElementsByClassName(sClassName); } else { v
阅读全文
摘要：HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>数码时钟</title> <style type="text/css"> * { margin: 0; padding: 0; } #box { ma
阅读全文
摘要：HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>加载更多</title> <style type="text/css"> .list li{ padding: 10px; line-height: 15px; }
阅读全文
摘要：HTML CSS JS Common.js JS
阅读全文
摘要：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <!-- saved from url=(0036)ht
阅读全文
摘要：HTML： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>放大镜效果</title> <link rel="stylesheet" href="index.css"> </head> <body> <div
阅读全文
摘要：这里主要提供思路： 一共两个页面通过原生来实现，我们需要对cookie进行封装。 在商品列表页，我们将点击添加的商品放入一个对象中，而后将该对象放入数组中，一个对象可以说就是一个商品。在购物车页面将数据从cookie中读取出来，然后再渲染到页面中。即可完成购物车的操作。 源码传送门：链接：https
阅读全文
摘要：<!DOCTYPE html PUBLIC "-//W3C//Dli XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/Dli/xhtml1-transitional.dli"> <html xmlns="http://www.w3.o
阅读全文
摘要：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.o
阅读全文
摘要：HTML <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>表单留言信息过滤</title> <style type="text/css"> body,html{ height: 100%; } body{ display: fl
阅读全文
摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>留言字数限制</title> <style> body{ background:skyblue; } h3{ text-align: center; } .text{ widt
阅读全文
摘要：HTML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <!-- saved from url=(00
阅读全文
摘要：<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>自定义右键菜单</title> <style> body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fi
阅读全文
摘要：HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>轮播图</title> <link rel="stylesheet" href="css/common.css"/> <link rel="stylesheet" h
阅读全文
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>艺龙</title> <style type="text/css"> * { margin: 0; padding: 0; } ul { list-style:
阅读全文
摘要：1. <!DOCTYPE html> <html > <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>发送验证码倒计时功能</title> <style> @charset "ut
阅读全文
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>方向检测</title> <style type="text/css"> * { margin: 0; padding: 0; } ul { list-styl
阅读全文
摘要：<!DOCTYPE html> <html > <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>发送验证码倒计时功能</title> <style> @charset "utf-8
阅读全文
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv
阅读全文
摘要：<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>广告自动关闭</title> </head> <style> .tip{ position: fixed; top:
阅读全文
摘要：<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>广告自动关闭</title> </head> <style> .tip{ position: fixed; top:
阅读全文
摘要：<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>吸顶效果</title> <style> *{ padding: 0; margin: 0; } body{ height: 2000px; } /*吸顶效果*
阅读全文
摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <style> .up { display: none; width: 100px; height: 100px; background: red
阅读全文
摘要：<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表单正则验证</title> <style type="text/css"> *{ margin: 0; padding: 0; } body{ backgro
阅读全文
摘要：今天我给大家带来用原生js实现表单登陆的10天内免登陆 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表单正则验证</title> <style type="text/css"> *{ margin: 0;
阅读全文
摘要：actions：既然mutations只能处理同步函数，我大js全靠‘异步回调’吃饭，怎么能没有异步，于是actions出现了... actions和mutations的区别 1.Actions 提交的是 mutations，而不是直接变更状态。也就是说，actions会通过mutations，让m
阅读全文
摘要：getters： 有时候，我们需要对state的数据进行筛选，过滤。这些操作都是在组件的计算属性进行的。如果多个组件需要用到筛选后的数据，那我们就必须到处重复写该计算属性函数；或者将其提取到一个公共的工具函数中，并将公共函数多处导入 - 两者都不太理想。如果把数据筛选完在传到计算属性里就不用那么麻烦
阅读全文
摘要：前言：vuex的使用，想必大家也都知道，类似于状态库的东西，存储某种状态，共互不相干的两个组件之间数据的共享传递等。我会分开给大家讲解vuex的使用，了解并掌握vuex的核心(state,mutations,getters,actions). 首先，我们需要将vuex的安装依赖下载下来，npm in
阅读全文
摘要：Vuex 什么是Vuex？ 官方说法：Vuex 是一个专为 Vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。 个人理解：Vuex是用来管理组件之间通信的一个插件 为什么要用Vuex？ 我们知道组件之间是独立的，组件之
阅读全文
摘要：微信小程序登录流程图 一. 官方登录时序图 官方的登录时序图 二. 简单理解 这里仅按照官方推荐的规范来 0. 前置条件 一共有三端： - 微信小程序客户端 - 第三方服务器端- 微信服务器端 1. 客户端获得code，并将code传给第三方服务端 微信小程序端调用wx.login，获取登录凭证（c
阅读全文
摘要：问题描述： 1）wxml片段 <view bindtap="loadMulti"> <text>连续点击,加载多次</text> </view> <view bindtap="loadOnce"> <text>连续点击,加载一次</text> </view> 2）js代码片段 loadMulti:f
阅读全文
摘要：小程序开发 的时候，发现在文本内容中加入text-align: justify;后发现文本内容并未两端对齐，而加入 时也并未显示出来。 查阅官方api后发现如果需要加入空格就需要进行如下设置 <view> <text space="ensp">你好 啊 哈哈哈（空格是中文字符一半大小）</
阅读全文
摘要：使用方法： npm install wx-alipay -g wxToalipay --src={{小程序源码目录}} --dest={{支付宝小程序目录,可缺省}} 点击回车后就可将微信小程序转换为支付宝小程序， 注：需要注意的是在转换完成后，由于不完善之处，仍有很多地方需要我们自己去进行修改 例
阅读全文
摘要：没有支付宝账户的，https://memberprod.alipay.com/account/reg/index.htm先进行注册。不过相信现在大多数人都会有支付宝账户吧。有的话直接进行登陆就可以哦。https://auth.alipay.com/login/ant_sso_index.htm?go
阅读全文
摘要：微信小程序的开发入门流程： https://mp.weixin.qq.com/cgi-bin/registermidpage?action=index&lang=zh_CN进入后选择小程序注册 邮箱，密码，确认密码，验证码，注册， 微信的小程序注册审核一般都很快。 通过注册的邮箱和密码进行登陆，通过
阅读全文
摘要：一般书写大量文本内容时，我们一般都需要写下如下代码： text-indext:""; //首行缩进 white-space: normal; //文本内容一行显示 white-space: no-wrap//强制换行 word-wrap: break-word; = word-break: brea
阅读全文
摘要：关键词： scroll-view scroll-x="{{true}}" scroll-left white-space: nowrap; display: inline-block; scroll-view scroll-x="{{true}}" scroll-left white-space:
阅读全文
摘要：will-change属性可以提前通知浏览器我们要对元素做什么动画，这样浏览器可以提前准备合适的优化设置。这样可以避免对页面响应速度有重要影响的昂贵成本。元素可以更快的被改变，渲染的也更快，这样页面可以快速更新，表现的更加流畅。 举个例子，当对于素使用 CSS 3D变形时，元素及其内容可以在合成到页
阅读全文
摘要：CSS属性 touch-action 用于指定某个给定的区域是否允许用户操作，以及如何响应用户操作（比如浏览器自带的划动、缩放等）。 /* Keyword values */touch-action: auto;touch-action: none;touch-action: pan-x;touch
阅读全文
摘要：<!DOCTYPE html> <html lang="zh-cmn-Hans"> <head> <meta charset="utf-8" /> <title>calc()函数_CSS参考手册_web前端开发参考手册系列</title> <meta name="author" content="J
阅读全文
摘要：根据MDN上的解释如下： CSS属性pointer-events允许作者控制特定的图形元素在何时成为属性事件的target。当未指定该属性时，SVG内容表现如同visiblePainted。 除了指定元素不成为鼠标事件的目标，none值还指示鼠标事件穿过该元素，并指向位于元素下面的元素 语法： po
阅读全文
摘要：:placeholder-shown 另外，划重点，这个伪类是仍处于实验室的方案。也就是未纳入标准，当然我们的目的是探寻有意思的 CSS 。 当 input 类型标签使用了 placeholder 属性有了默认占位的文字，会触发此伪类样式。 配合:not()伪类，可以再改变当默认文字消失后的样式，再
阅读全文
摘要：:target 伪类选择器 :target 是 CSS3 新增的一个伪类，可用于选取当前活动的目标元素。当 URL 末尾带有锚名称 #，就可以指向文档内某个具体的元素。这个被链接的元素就是目标元素(target element)。它需要一个 id 去匹配文档中的 target 。 解释很难理解，看看
阅读全文
摘要：1.盒子边框的线条动画： <div class="cont"> <div class="bb"></div> </div> .bb{ position: relative; width: 200px; height: 200px; background: #666666; border: 1px s
阅读全文
摘要：先给大家介绍什么是柯里化与反柯里化 百度翻译： 在计算机科学中，柯里化（Currying）是把接受多个参数的函数变换成接受一个单一参数(最初函数的第一个参数)的函数，并且返回接受余下的参数且返回结果的新函数的技术。这个技术由 Christopher Strachey 以逻辑学家 Haskell Cu
阅读全文
摘要：前言 mpvue是一款使用Vue.js开发微信小程序的前端框架。使用此框架，开发者将得到完整的 Vue.js 开发体验，同时为H5和小程序提供了代码复用的能力。如果想将 H5 项目改造为小程序，或开发小程序后希望将其转换为H5，mpvue将是十分契合的一种解决方案。 目前，mpvue已经在美团点评多
阅读全文
摘要：ESLint的用途 1.审查代码是否符合编码规范和统一的代码风格； 2.审查代码是否存在语法错误； 中文网地址 http://eslint.cn/ 2.审查代码是否存在语法错误； 中文网地址 http://eslint.cn/ 使用VSCode编译器在Vue项目中的使用 在初始化项目时选择是否使用E
阅读全文
摘要：门诊服务 住院服务 综合服务 19:00-20:00 20:00-21:00 21:00-22:00
阅读全文
摘要：css3中对于伪元素的使用，在项目开发中使用得当将会对代码的可读性又很大的提升。但是对于伪类大家或许都知道是一些选择器的使用，这里总结了关于伪元素中单冒号和双冒号的区别： 再官方定义中规定单冒号都为伪类，是一种选择器 eg: a:first-child{} a:nth-of-type(2) {} a
阅读全文
摘要：<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>立方体动画</title> <style type="text/css"> body,div,p,ul,ol,li,dl,dt,dd,table,tr,td,f
阅读全文
摘要：beginPath() 对画线点的一个开始限制 moveTo() 画线的起点，只在开头使用 参数两个x轴，y轴 lineTo() 后续连线 两个参数x轴，y轴 stroke() 连线无填充 fill() 填充，默认黑色 closePath() 对画线点的一个结束限制 自动起着连接起点的作用 begi
阅读全文
摘要：save() 样式不受污染的起始范围 shadowOffsetX 阴影x轴的距离 shadowOffsetY 阴影y轴的距离 shadowBlur 模糊度 shadowColor 阴影颜色 restore() 保护样式不受污染的结束范围 clearRect() 可以理解为橡皮擦 参数四个：x轴，y轴
阅读全文
摘要：lineWidth 设置边框的大小 fillStyle 设置div的颜色 strokeStyle 设置边框的颜色 lineWidth 设置边框的大小 设置边框的大小 fillStyle 设置div的颜色 设置div的颜色 strokeStyle 设置边框的颜色 设置边框的颜色 注： 边框在不设置的情
阅读全文
摘要：<canvas>元素主要用来图形的绘制，通过脚本来完成（通常时js来实现）； 可以利用其实现图表，游戏等项目的开发。 getContext 获取画布的摸板是2d还是3d strokeRect(x,y,w,h); 四个参数： x轴，y轴，宽度，高度 主要用来设置边框，可以理解为border fillR
阅读全文
摘要：IE浏览器内核：Trident内核，也是俗称的IE内核； Chrome浏览器内核：统称为Chromium内核或Chrome内核，以前是Webkit内核，现在是Blink内核； Firefox浏览器内核：Gecko内核，俗称Firefox内核； Safari浏览器内核：Webkit内核； Opera浏
阅读全文
摘要：最近又遇到了JacvaScript中的call()方法和apply()方法，而在某些时候这两个方法还确实是十分重要的，那么就让我总结这两个方法的使用和区别吧。 1.改变函数内部的this指向的三种方法：call(),apply(),bind() 2. 相同点：都可以改变this指向。 都是在特定的作
阅读全文
摘要：类数组对象：arguments 在函数调用时，我们总能见到arguments这个对象，它具体是用来干什么的呢？感觉逼格非常高呢 函数在使用时，我们总会位函数传入各种参数，arguments会将参数储存起来以便我们使用，下标从0开始。返回值还有数组的长度。 函数在使用时，我们总会位函数传入各种参数，a
阅读全文
摘要：函数的使用，可以说有点基础的同学都会用，但是如何使用，才是函数真正的意义所在。用好了代码可读性，可维护性等都有很大提升，代码质量会很高。 箭头函数的使用 箭头函数不是没有this，而是它的this在定义之初就已确定，后续不再更改。 箭头函数的使用 箭头函数不是没有this，而是它的this在定义之初
阅读全文
摘要：/** * 发布订阅模式 */ var EventCenter = (function(){ var events = {}; /* { my_event: [{handler: function(data){xxx}}, {handler: function(data){yyy}}] } */ /
阅读全文
摘要：/** * 模块模式 = 封装大部分代码，只暴露必需接口 */ var Car = (function(){ var name = '法拉利'; function sayName(){ console.log( name ); } function getColor(name){ console.log( name );...
阅读全文
摘要：/** * 混合模式 = 原型模式 + 构造函数模式 */ function Animal(name, color){ this.name = name; this.color = color; console.log( this.name + this.color) } Animal.prototype.getInfo = function(){ ...
阅读全文
摘要：function Animal(opts){ var obj = new Object(); obj.name = opts.name; obj.color = opts.color; obj.getInfo = function(){ return '名称：'+obj.name +'， 颜色：'+ obj.color; } ...
阅读全文
摘要：/** * 构造一个动物的函数 */ function Animal(name, color){ this.name = name; this.color = color; this.getName = function(){ return this.name; } } // 实例一个对象 var
阅读全文
摘要：一、安装： 1、 服务器端：VisualSVN_Server 2、 客户端：TortoiseSVN 二、使用VisualSVN Server建立版本库 1、 首先打开VisualSVN Server Manager,如图: 2、 可以在窗口的右边看到版本库的一些信息,比如状态,日志,用户认证,版本库
阅读全文
摘要：小程序开发的editor我就不多说了，很多开发人员都有过吐槽，当然我个人觉得关键还要看习惯，我觉得是差不多的。但是呢，webstor作为前端开发的神器，如果不会用他实现小程序的开发，那就有点娄了。 汉化版的webstorm中的 settings是进不去的，因此先价格汉化包去掉 现在微信开发工具中将项
阅读全文
摘要：http://lorempixel.com/1600/900 https://unsplash.it/1600/900?random（国内加载略慢） https://uploadbeta.com/api/pictures/random/?key=BingEverydayWallpaperPictur
阅读全文
摘要：一、 安装 Git（git_for_windows.xp510.com.rar） 二、 使用 a) 进入到 git bash（命令行工具） b) 初始化user.name,user.email $ git config --global user.name "AmbitionG" $ git con
阅读全文
摘要：git可以说是世界上最先进的版本控制系统，大多语句的执行为linux语句，也不难怪，，起初他就是为了帮助开发linux开发内核而使用。 我们先来说git的主要功能，知道了这个，我们也就知道了为什么我们进行项目开发多会选择这个进行项目的开发 从一般开发者的角度来看，git有以下功能： 从服务器上克隆完
阅读全文
摘要：今天我给大家推荐的是关于工具的使用，对项目进行图片的压缩。工具地址：https://tool.lu/ 找到其中的图片优化，将需要缩小的图片拖进去，然后将生成好的图片点击下载，来到新的窗口，然后再新的窗口中将图片另存为到一个路径，至此一个图片的优化就算完成，不过这里的优化是将图片进行透明的设置，所以说
阅读全文
摘要：HTML和CSS编码规范内容 一、HTML规范 二、CSS规范 三、注意事项： 四、常用的命名规则 五、CSS样式表文件命名 六、文件命名规则 一、HTML规范： 1.代码规范 页面的第一行添加标准模式声明 <!DOCTYPE html> 代码缩进：tab键设置四个空格（通常在软件右下角设置相应空格
阅读全文
摘要：v-if 是“真实”的条件渲染，因为它会确保条件块(conditional block)在切换的过程中，完整地销毁(destroy)和重新创建(re-create)条件块内的事件监听器和子组件。 v-if 是惰性的(lazy)：如果在初始渲染时条件为 false，它不会执行任何操作 - 在条件第一次
阅读全文
摘要：前言 mpvue是一款使用Vue.js开发微信小程序的前端框架。使用此框架，开发者将得到完整的 Vue.js 开发体验，同时为H5和小程序提供了代码复用的能力。如果想将 H5 项目改造为小程序，或开发小程序后希望将其转换为H5，mpvue将是十分契合的一种解决方案。 目前，mpvue已经在美团点评多
阅读全文
摘要：微信小程序（wei xin xiao cheng xu），简称小程序，英文名Mini Program，是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或搜一下即可打开应用。全面开放申请后，主体类型为企业、政府、媒体、其他组织或个人的开发者，均可申请注册小程序。小程序、订
阅读全文
摘要：npm install --global vue-cli vue脚手架 vue init mpvue/mpvue-quickstart my-project 创建一个基于mpvue-quickstart的新摸板 在此我们需要命名我们的项目名称 我们开发小程序的appid， vux可选择性安装， ES
阅读全文
摘要：用到的关键字如下： class :class class :class :class current :current bindchange @change circular 是否实现无限滑动 true/false skip-hidden-item-layout 轮播图性能的优化 true/fals
阅读全文
浙公网安备 33010602011771号