- 博客(44)
- 收藏
- 关注
RSS订阅原创 vue自定义指令
如何自定义指令注册一个自定义指令有全局注册与局部注册全局注册注册主要是用过 Vue.directive 方法进行注册Vue.directive 第一个参数是指令的名字(不需要写上 v-前缀)，第二个参数可以是对象数据，也可以是一个指令函数// 注册一个全局自定义指令 `v-focus`Vue.directive("focus", { // 当被绑定的元素插入到 DOM 中时…… ...
2022-04-21 10:26:58
125
原创 Vue知识点小结
Element-ui之ElScrollBar组件滚动条的使用文档中并没有关于这个 scrollbar组件的使用文档，搜索一番得知这是一个隐藏组件，官方在 github 的 issues 中表示不会写在文档中，需要用的自己看源码进行调用。scrollbar组件暴露了 native, wrapStyle, wrapClass, viewClass, viewStyle, noresize, tag...
2021-04-09 14:15:10
134
1
原创 Vuex及mapState，mapGetters，mapMutations，mapActions在子模块的简单使用
Vuex安装npm n install vuex --saveVuex使用案列store/index.jsimport Vue from 'vue'import Vuex from 'vuex'import getters from './getters';Vue.use(Vuex)// https://webpack.js.org/guides/dependency-ma...
2021-04-09 14:09:21
744
原创 koa2微信公众号开发及JS-SDK的使用
微信公众号项目介绍当前只对实现思路进行说明，不作基础介绍！详细信息查看微信官方文档及git地址！实现功能新关注自动回复；被动回复；推送消息；自定义菜单；js-sdk使用；网页授权获取用户信息koa2环境搭建koa-generator的安装cnpm install -g koa-generatorkoa2项目建立koa2 -e wechat使用飞鸽内网穿透...
2020-05-26 09:34:49
255
原创 vue插槽，混入 (mixin) ，自定义指令，Vue.set全局操作
插槽基本使用插槽就是子组件中的提供给父组件使用的一个占位符，用slot表示，父组件可以在这个占位符中填充任何模板代码，如 HTML、组件等，填充的内容会替换子组件的slot标签.<body> <div id="root"> <child> <p>你好！</p> </child> &...
2020-05-18 16:55:04
125
原创 flex常用布局
Sticky Footer当页面内容高度小于可视区域高度时，footer 吸附在底部；当页面内容高度大于可视区域高度时，footer 被撑开排在 content 下方；360截图16240127357130.png<style> body { min-height: 100vh; display: flex...
2020-05-13 14:46:19
62
原创 继承实例
继承实例//定义产品对象function Base(){ /*产品名称*/ this.name='' this.description='' /*普通价格*/ this.normalPrice=144 /*团购价格*/ this.youhuijia=120 /*已经购买的人数*/ this.buySum=100; ...
2020-04-29 15:54:33
42
原创 函数防抖和函数节流
函数防抖和函数节流函数防抖和函数节流：是优化高频率执行的JavaScript代码的一种手段。常用于JavaScript中的一些事件，如浏览器的resize、scroll，鼠标的mousemove、mouseover，键盘的keypress等。例如input输入框的keypress事件在触发时，会不断地调用绑定在事件上的回调函数，极大地浪费资源，降低前端性能。为了优化体验，就需要对这类事件进行调用...
2020-04-29 15:54:02
126
1
原创 h5 video方法，事件，属性详解
1.video属性<!-- video 不支持 IE8及以下版本浏览器，支持三种视频格式：MP4，WebM 和 Ogg --> <video src="test.mp4" controls width="400" height="300"></video> <!-- 禁止下载 --> <video src="test.mp4" ...
2020-04-29 15:53:49
229
原创 数组常用方法
数组常用方法收集1、join() --原数组不变，返回字符串join(separator): 将数组的元素组起一个字符串，以separator为分隔符，省略的话则用默认用逗号为分隔符，该方法只接收一个参数：即分隔符。var arr = [1,2,3];console.log(arr.join()); // 1,2,3console.log(arr.join("-")); // 1-2-3...
2020-04-29 15:51:49
231
原创 jQuery插件编写模板
jQuery插件编写模板;(function($,window,document,undefined){ //定义插件myplugin，在插件中使用MyPlugin对象 $.fn.videoPlay = function(options){ return this.each(function() { //保持插件的链式调用，确保插件返回this关键字 ...
2020-04-29 15:49:55
115
原创 ajax在ie9浏览器请求失败的兼容问题
ajax在ie9浏览器请求失败的兼容问题在chrome下调试接口的时候都可以正常访问，但是在IE9下访问的时候数据都没有了，查看ajax请求过程，既然没数据，那就是请求失败了，在error的回调里打印信息，确实没进入success回调里;$.ajax方法一直在执行error针对 拒绝访问 是由于浏览器安全机制导致的，解决方法为点击IE浏览器的的“工具->Internet 选项->...
2020-04-29 15:48:25
482
原创 移动端适配方案vw+rem(推荐)
前言rem 这个单位对于前端来说并不陌生了,在移动端适配方面,我们经常会用到它,通常我们会采用类似淘宝flexible.js的方案, 写px,然后通过插件转化成rem。现在已经许多兼容性问题现在不再那么头疼了,因此我们现在有了更好的适配方案(不需要计算插件,不需要写js代码).设置meta为移动端<meta name="viewport" content="width=device-...
2020-04-29 15:41:18
191
原创 redux笔记
安装AntDesigncnpm install antd --save创建store仓库cnpm install --save redux安装好redux之后，在src目录下创建一个store文件夹,然后在文件夹下创建一个index.js文件import { createStore } from 'redux' // 引入createStore方法import reducer fr...
2020-04-29 15:38:55
274
原创 React router v4笔记
使用npm来进行安装npm install --save react-router react-router-domReactRouter动态传值设置, 以:开始的，然后紧跟着你传递的key(键名称)名称。<Route path="/list/:id" component={List} />Link上传递值<li><Link to="/list/1...
2020-04-29 15:36:59
47
原创 React学习笔记
脚手架的安装//安装脚手架工具npm install -g create-react-app//创建项目create-react-app demo01JSX简介JSX就是Javascript和XML结合的一种格式。React发明了JSX，可以方便的利用HTML语法来创建虚拟DOM，当遇到<，JSX就当作HTML解析，遇到{就当JavaScript解析.Fragment标签...
2020-04-29 15:35:12
72
原创 TypeScript笔记
安装TypeScript包npm install typescript -g使用步骤npm init -y来初始化项目，生成package.json文件。在终端中输入tsc --init；创建tsconfig.json文件，它是一个TypeScript项目的配置文件，可以通过读取它来设置TypeScript编译器的编译参数。安装@types/node,使用cnpm install @t...
2020-04-29 15:32:41
117
原创 ES6变量的解构赋值用途
交换变量的值let x = 1;let y = 2;[x, y] = [y, x];从函数返回多个值函数只能返回一个值，如果要返回多个值，只能将它们放在数组或对象里返回。有了解构赋值，取出这些值就非常方便。// 返回一个数组function example() { return [1, 2, 3];}let [a, b, c] = example();// 返回一个对...
2020-04-29 14:59:32
30
原创 原生js和jquery获取元素坐标、尺寸及监听页面滚动
offsetTop、offsetLeft、offsetWidth、offsetHeightoffsetTop --- 当前对象到其上级层顶部的间隔.offsetLeft --- 当前对象到其上级层左边的间隔.offsetWidth --- 当前对象的宽度offsetHeight --- 当前对象的高度offsetParent --- 当前对象的上级层对象.如果对象是包括在一个DIV中...
2020-04-29 11:34:43
762
原创 微信小程序基础笔记
列表循环//1.wx:key用于提高列表渲染的性能//-- wx:key绑定一个普通字符串的时候，那么这个字符串名称肯定是循环数组中的对象的唯一属性！//-- wx:key="*this" 就表示你的数组是一个普通数组 *this表示循环项；如：[1,4,7,87],["a","bold","clear"]//2.当出现嵌套循环的时候尤其要注意绑定的名称不要重名！//3.默认情况下不写w...
2020-04-21 15:26:16
119
原创 CSS布局--圣杯布局和双飞翼布局
1. 圣杯布局左右两边大小固定不变，中间宽度自适应。可以用浮动、定位以及flex这三种方式来实现！<!--html --> <div class="main"> <div class="left">左边</div> <div class="center">中间</div> <di...
2020-04-13 16:16:53
64
原创 es6 class及super关键字
传统方法JavaScript 语言中，生成实例对象的传统方法是通过构造函数。function Point(x, y) { this.x = x; this.y = y;}Point.prototype.toString = function () { return '(' + this.x + ', ' + this.y + ')';};var p = new Poin...
2019-09-16 14:45:25
105
原创 Object.keys方法
在实际开发中，我们有时需要知道对象的所有属性;ES5 引入了Object.keys方法，成员是参数对象自身的(不含继承的)所有可遍历( enumerable )属性的键名。传入对象，返回属性名var data={a:1,b:2,c:9,d:4,e:5}; console.log(Object.keys(data));//["a", "b", "c", "d", "e"] Ob...
2019-09-16 14:44:29
48
原创 基于vue-cli@3.0搭建管理系统项目并进行配置优化
项目说明本示例根据vue-cli@2.0项目进一步优化,使用vue-cli@3.0搭建；主要针对项目结构和权限管理进行优化。github地址运行前先server文件夹通过node启动express(使用express简单模拟登陆和获取用户信息接口)node app.js主要实现功能使用express模拟用户数据；重新封装axios请求用户权限管理，动态生成侧边栏和面包屑导航；在...
2019-09-16 14:44:09
52
原创 webpack4.x从0开始构建多页项目(二)-多页实现
webpack4.x从0开始构建多页项目(一)-项目说明.webpack4.x从0开始构建多页项目(二)-多页实现.webpack4.x从0开始构建多页项目(三)-插件及loader配置.配置多页的主要方法动态配置多页面需要在公共配置中引入globconst glob = require("glob"); //glob，这个是一个全局的模块，动态配置多页面会用得着1. 获取html-w...
2019-08-20 17:34:50
42
原创 webpack4.x从0开始构建多页项目(三)-插件及loader配置
webpack4.x从0开始构建多页项目(一)-项目说明.webpack4.x从0开始构建多页项目(二)-多页实现.webpack4.x从0开始构建多页项目(三)-插件及loader配置.1.转换 ES6 代码，解决浏览器兼容问题用 babel 转换 ES6 代码需要使用到 babel-loader ，我们需要安装一系列的依赖：cnpm i babel-core babel-loader...
2019-08-20 17:34:37
89
原创 webpack4.x从0开始构建多页项目(一)-项目说明
webpack4比webpack3多了一个webpack-cli，它把一些内置的模块都迁移到这个webpack-cli里面去了webpack4.x从0开始构建多页项目(一)-项目说明.webpack4.x从0开始构建多页项目(二)-多页实现.webpack4.x从0开始构建多页项目(三)-插件及loader配置.实现功能根据src中pages的文件夹自动生成多页面。自动打包html对...
2019-08-20 17:34:17
68
原创 git学习笔记
git是一个分布式的版本控制软件。版本控制是一种记录一个或若干文件内容变化，以便将来查阅特定版本修订情况的系统。微信图片_20190809100320.jpg一. 安装配置1.安装直接下载安装包：https://gitforwindows.org/2.用户名和邮箱配置设置你的用户名称与邮件地址。 这样做很重要，因为每一个 Git 的提交都会 使用这些信息，并且它会写入到你...
2019-08-09 11:33:34
37
原创 前端针对ajax请求loading效果实现的方法
一.普通页面实现jquery给出了两个函数来判断这两个节点，判断DOM元素加载完成，还是页面中的所有关联文件(包括图片)$(document).ready()是在页面上所有DOM元素加载完毕后才执行。$(window).load();方法是在网页中所有的元素(包括元素的关联文件)完全加载到浏览器后才执行。//此处选用load方法$(window).load(function(){...
2019-08-01 17:34:34
380
原创 vue 项目中使用filters过滤器
一.全局过滤器：src目录下新建filters目录，filters目录里新建index.js文件//index.jsexport function gettType(typeId) { switch (typeId) { case 1: return "智能安防" break; case 2: ...
2019-07-19 14:40:30
159
原创 前端模块化（CommonJs,ES6 Module, AMD和CMD）
主要针对CommonJs和ES6 Module进行学习commonJS一个单独的文件就是一个模块。每一个模块都是一个单独的作用域，也就是说，在该模块内部定义的变量，无法被其他模块读取，除非定义为global对象的属性。输出模块变量的最好方法是使用module.exports对象。加载模块使用require方法，该方法读取一个文件并执行，返回文件内部的module.exports对象...
2019-07-03 16:24:42
44
原创 es6 Promise
1. Promise对象有以下两个特点对象的状态不受外界影响。Promise对象代表一个异步操作，有三种状态：pending(进行中)、fulfilled(已成功)和rejected(已失败)。只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态。这也是Promise这个名字的由来，它的英语意思就是“承诺”，表示其他手段无法改变。一旦状态改变，就不会再变，任何时候都可...
2019-07-03 11:46:31
37
原创 在vue中配合element-ui使用vue-quill-editor编辑器及七牛文件上传
git地址：https://gitee.com/crui14994/myExample/tree/master/edit-qiniu-example开发前准备注：使用七牛上传前先进入server文件夹运行服务器代码便于获取token注册一个七牛云账号空间名称bucketSK 和 AK ,在控制面板的密匙管理储存空间的外链域名，在储存空间可以找到使用脚手架初始化项目# 安装c...
2019-07-03 11:45:45
155
原创 Async的使用
Async的使用Async函数已写入ES7标准中，通过async函数可以更友好直观的写异步代码。在实际工作中，经常会遇到这样的场景：接口A需要的入参是接口B响应中的部分或全部内容，这时在执行请求接口A的代码时就需要等待接口B响应完成以后再执行，这就涉及异步调用。1. Promise例子模拟异步请求：生成随机数，如果随机数小于1则认为是resolve的情况，执行resolve函数；如果大...
2019-07-02 10:47:19
241
原创 vue预渲染插件 prerender-spa-plugin（seo优化，生成多页面）
vue等框架打包的项目一般为SPA应用，而单页面是不利于SEO的，现在的解决方案有两种：SSR服务器渲染,如Nuxt.js。预渲染模式，这比服务端渲染要简单很多，而且可以配合 vue-meta-info 来生成title和meta标签，基本可以满足SEO的需求注意：使用预渲染vue-router必须使用history模式build生成的代码必须放在服务器根目录，否则会报错可参考官...
2019-04-22 15:31:12
173
原创 vue中关于router，vuex，axios，api，utils的一些常用配置
项目介绍基于vue-cli@2.0的常用配置,代码切换到vuecli@2.0分支查看；后期基于vue-cli@3.0进行配置优化,具体查看基于vue-cli@3.0搭建管理系统项目并进行配置优化基于vue2.0项目开发中的一些思路主要包括：使用脚手架初始化项目将需要用到的工具函数新建一个utils文件夹统一管理使用router的一些优化使用Vuex的一些优化封装axios及统一...
2019-04-21 14:40:43
163
原创 基于Node.js的微信JS-SDK后端接口实现（三）
微信公众号开发之五微信网页授权开始之前建议先阅读微信官方文档 微信公众号开发之五微信网页授权一.网页授权的作用我们一般会自己开发web应用中加入授权，用来获取用户的openid(或unionid)，来实现用户体系。比如：我们常做的基于微信的用户体系，利用openid做唯一的身份识别。二.微信网页授权包括2种形式：静默授权。只能获取到openid;用户不用手动点击确定，直接跳到回调页...
2019-04-18 23:29:51
80
原创 基于Node.js的微信JS-SDK后端接口实现（一）
先上github地址：https://github.com/crui14994/wechat-jssdk一. 先来看看微信的接入指南QQ截图20190417185848.pngQQ截图20190417185934.png二. 用花生壳内网映射外网的软件，把本地的ip映射到外网QQ截图20190417190345.png三. 接入验证(使用的是测试号)...
2019-04-17 20:23:56
55
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人