- 博客(54)
- 收藏
- 关注
RSS订阅原创 vue快速实现 倒计时
vue实现 倒计时<template> <div> <a-button :disabled="time > 0" @click="btnClick" > {{ time > 0 ? `${time}秒后可重新点击` : '点击' }} </a-button> </div></template><script>export default
2022-02-24 14:32:31
784
原创 vue中封装全局组件方法
vue项目中全局注册js文件 js文件便捷添加样式vue项目中全局注册js文件首先是创建一个js文件叫Toast.jsexport const Toast = { Toast1: () => { var p = document.createElement("div") p.innerHTML = "11" //调用下面的style方法 style(p, { 'color': 'red', 'border': '1px solid
2020-09-29 21:52:37
317
原创 如何用vue封装一个原生的吸顶效果
用惯了第三方ui组件库封装的组件，今天自己尝试用vue封装一个吸顶效果新建组件Sticky.vue，具体实现看以下操作：<template> <div id="sticky"> <div ref="sticky" class="sticky" :class="stickyIndex ? 'sticky_nav' : ''"> 吸顶 </div> <div class="sticky_row" v-for="
2020-09-28 19:29:27
312
原创 封装返回顶部组件
封装一下返回顶部吧，这个在实际开发中用到的地方很多，看一下具体实现代码吧父页面引入注册子组件<template> <div class="home"> <Gotop/> </div></template><script>// @ is an alias to /srcimport Gotop from "@/components/Gotop.vue";export default { name:
2020-09-24 21:18:41
227
原创 H5支付流程概述
手机H5支付流程概述昨天写了一个手机微信小程序的支付流程，今天自己参考了微信小程序官方文档，找到了浏览器支付调用微信支付的方法以及支付过程，还是老样子，先来看看这个思维导图，理解了昨天的那个，今天这个也就看起来比较简单明了了，还是逐步分析1.请求下单这一步是由用户在浏览器通过点击支付按钮调起来的，这一步之后会在商户的后台**保存这个订单 **2.调微信支付接口下单这一步是由商户的后台来直接请求微信支付后台的，这时候微信支付后台会返回给商户后台跳转的URL商户后台收到后来返回给前端302消息跳转
2020-09-23 21:35:16
1407
1
原创 vue搭建项目
一、重新认识vue-cli安装最新版本脚手架vue-cli官网:https://cli.vuejs.org/zh/目前版本：v4.5.x安装：npm install -g @vue/cli2.使用vue脚手架创建项目第一种命令行vue create 项目名（字母开头，不要大写） 回车default (自动安装)manually （建议：手动安装）第二种：以图形界面方式创建vue ui 3.vue-cli4.5目录结构public index.html ---入口h
2020-09-23 00:23:45
113
原创 如何用vue实现登录授权
一、APP为什么要做微信授权登录？对于目前大多与APP来说，即使做了微信授权登陆，当用户使用微信授权登陆后，依然需要用户绑定手机号，其实做微信授权登陆本质上并没有什么卵用，那为什么还要做呢？需要用户微信绑定手机号，目的是防止一个人出现多个账号，将微信和手机号绑定后，用户后续不管是用微信登陆还是手机号登陆，都对应的是同一个账号，如果不绑定很有可能相同用户会出现2个账号，这样造成数据问题；二、另外，有以下两个好处：用微信授权登陆绑定手机号后，下次再登陆时可以直接用微信授权登陆，这样用户操作方便，比手机号
2020-09-18 22:11:39
1315
原创 如何用js实现路由懒加载
概念什么是懒加载？懒加载顾名思义突出一个“懒”字，懒字就是拖延的意思，说白就是延迟加载。比如我们进入一个新的页面进行加载的时候，这个页面很长超过了屏幕可视区域的时候，那么懒加载就会优先加载我们可视区域可见的内容,剩余部分是当进入到可视区域之后再进行加载。为什么要懒加载？懒加载是一种优化网页性能的一种方式，它极大的提高了用户的体验。举个栗子：就拿图片来说，一个网站，单个网页的页面上“图片”是构成页面主体的一个极大部分，但是在现在一张图片的大小超过几兆是一件很正常的事，那么就需要注意到一个问题：
2020-09-18 00:48:21
583
原创 怎么用vue实现echarts图标
之前没怎么接触过echarts，但是写的后台管理项目中用到了echarts，所以去官网看看参考，根据官网给的指示，来简单写个小案例吧官网地址：https://echarts.apache.org/zh/index.html首先下载安装：npm install echarts --save在用到的页面中引入import echarts from "echarts";然后给这个图表一个挂载点 <div id="main" ref="main"></div>
2020-09-17 00:05:55
523
原创 如何在vue中使用Vue-Quill-Editor
官网地址：Vue-Quill-Editor下载安装vue-quill-editornpm install vue-quill-editor --save安装quillnpm install quill --save在页面中引入import { quillEditor } from 'vue-quill-editor' // 调用富文本编辑器import 'quill/dist/quill.snow.css' // 富文本编辑器外部引用样式import * as Quill f
2020-09-15 23:40:17
451
原创 如何在vue中配置全局过滤器filter
在项目中会经常用到过滤器，有全局过滤器、局部过滤器，局部过滤器跟data、methods、created等同级进行操作，全局过滤器需要在main.js中全局引入注册才能使用。下面就按照步骤来一步一步实现全局过滤器:新建filter文件夹，新建index.js在index.js中写要执行的操作：//权限列表 全选等级export function level(num) { switch (num) { case "0": return "一级";
2020-09-14 21:43:10
1035
原创 如何用lodash实现防抖节流
用lodash实现防抖节流首先下载安装lodashnpm i lodash --save在main.js中引入import _ from 'lodash'Vue.prototype._ = _在页面中引入import _ from "lodash";在页面中运用方法searchUsers: _.debounce(function() { userlist({ query:this.input3, pagenum: this.
2020-09-10 23:03:14
1128
原创 用Mock自行模拟数据
一个项目的开始在后端没有返回真实数据的接口文档时，我们需要自己先行模拟数据，进行页面渲染，达到简单的页面效果。就说一下如何使用mock模拟数据。一、具体使用方法安装mockjsnpm install mockjs创建一个mock目录生成mock数据，新建mock目录，生成course.js文件import Mock from "mockjs";//mock课程数据var result=Mock.mock({ code: 200, msg: "操作成功", data: {
2020-09-08 23:56:54
524
原创 在vue中如何把px转换为vw和rem
写的过程中遇到了有关元素单位的问题，如何把px转为vw和rem,在index.html中引入原生的插件也不行，后来在网上看到了一个特别好的方法，就记录下来吧！一、我们通过一款 PostCSS 插件来做到px转为vw和rem该插件主要结合了 postcss-pxtorem 和 postcss-px-to-viewport 的功能，精简了不常用的配置。默认将 vw 作为优先单位使用，以 rem 作为回退模式。考虑到 vw 在移动设备的支持度不如 rem，这款插件很好的解决了该问题。参考地址：https:/
2020-09-07 23:37:40
1329
原创 vue点击更换头像实现拍照功能和选择相册更换头像
上传文件表单：<input type="file" accept="image/*" capture="camera" >type="file" 上传文件表单 2. accept="image/*" 上传文件类型capture="camera" 使用手机摄像头拍摄请求参数为FormData 类型new FormData()let formData = new FormData() formData.append('file', e.target.fil..
2020-09-04 23:07:46
1109
1
原创 javaScript继承
简单说一下继承继承是面向对象开发思想的特性之一。面向对象的三大特点：封装、继承、多态继承主要分ES5和ES6的继承方式ES5的继承（主要通过函数实现类）原型链继承 主要实现代码//创建一个父类function Parent() { this.name='jack'}Parent.prototype.getName=function() { return this.name;}//创建一个子类function Child() { }//子类的原型
2020-09-03 23:57:21
443
原创 对闭包的简单介绍
今天复习js的时候又对闭包有些理解，趁现在热乎总结一下吧！一、简单说一下闭包吧按照我的理解，闭包分为两部分：函数+词法作用域。什么是词法作用域呢？即以变量声明定义的位置为参照，如果当前位置没有定义，就会访问父级定义的位置。闭包分为两种，广义上的闭包和狭义上的闭包，两者上的区别，在我看来就是广义上的闭包看着不像闭包，通常一般也不说它是闭包，但是实现上来说就是一个闭包；而狭义上的闭包，就是平常工作中会用到的闭包：函数嵌套函数，子函数引用了父函数的相关变量，会长期驻扎在内存中，缓存变量，但是就是因为长期驻扎在
2020-09-03 00:38:05
391
原创 百家云移动端h5点播SDK
一、 需要video_id和course_id来请求需要播放视频的token利用路由传参: govideodetails(videoid){ this.$router.push({ path:"/videodetails", query:{ video_id:videoid, course_id:this.allstudy.course_id
2020-09-01 22:56:10
561
原创 call,apply,bind的区别&&new的实现原理&&防抖和节流
一、call,apply,bindcall,apply,bind都是用来改变this指向的。区别：1.call用逗号分隔传递参数用法：函数名.call(目标对象obj,参数1,参数2,…)2.apply参数用数组的形式传递用法：函数名.apply(目标对象,[参数1,参数2,…])3.bind用逗号形式传参用法：getName.bind(obj,‘李四’,25,‘上海’)() 或getName.bind(obj)(‘王五’,25,‘北京’)函数是否被执行：cal和apply是直接
2020-09-01 00:40:01
220
原创 用vue实现分享二维码
用vue实现分享二维码这个功能实现流程：给分享添加点击事件： <span @click="onShare"> <icon name="share" scale="2" class="share"></icon> </span>页面布局部分// <!-- 二维码分享 利用vant布局 --> <van-overlay :show="show" @click="show = false"&g
2020-08-29 00:04:28
505
原创 ES6新增Set&Map两种数据结构
ES6中增加的两种数据结构Set&Map灵活运用可以带来很棒的开发体验Map数据结构Map数据结构可以用于存储数据，数据是以[键:值]的方式存入，并且提供了一些可以用于操作的方法1、const map = new Map()可以用来生成一个Map，它可以用来保存键值对2、map.set(键名，值)通过此方法可以向Map中添加一条数据3、map.get(键名)可以通过此方法传入键名，取出对应的value4、其他增删改查的方法：size：返回Map对象中包含的键值对个数has
2020-08-27 23:53:34
176
原创 通过 vue-svg-icon 插件实现svg图标高亮显示
用svg写的时候，发现图标不显示，只有文字显示。然后网上搜的方法，用插件实现。安装npm install vue-svg-icon --save-dev在项目的 main.js 入口引入 vue-svg-icon 以便全局调用：import Icon from 'vue-svg-icon/Icon.vue';Vue.component('icon', Icon); 在src文件夹下新建svg文件夹，把下载好的svg的图标放入，在 vue 组件按需加载：scale:可以调试图标大小
2020-08-27 00:00:18
805
原创 用vue实现倒计时
vue+js实现短信60秒倒计时今天写登录注册的时候，发送验证码不太会，然后去百度搜了一下，总结一下这个吧。代码实现部分：html代码 <div class="add_phone"> <input type="text" v-model="mobiles" placeholder="请输入手机号" /> <span @click="sendMessage">{{btntext}}</span> &l
2020-08-24 23:35:36
402
原创 如何使用过滤器和moment日期库
一、什么是过滤器？过滤器是对即将显示的数据做进一步的筛选处理，然后显示，过滤器并没有改变原来的数据，只是在原数据的基础上产生新的数据。过滤器分为全局过滤器和局部过滤器。二、如何使用过滤器？全局过滤器: (Vue.就是全局引入的意思，是小括号的形式)Vue.filter("过滤器名",funciton(val){ //逻辑代码}) Vue.filter('过滤器名称',function(a,b,c) { //逻辑代码 return })//如何使用：{{
2020-08-22 00:37:18
269
原创 开发环境和生产环境的切换
vue项目用vue.config.js来配置不同环境自动切换配置一、通过创建不同环境js文件，再通过cross-env来切换。新建开发环境dev.js文件。module.exports = { BASE_URL: "https://test.365msmk.com"};新建生产环境prod.js文件。module.exports = { BASE_URL: "https://www.365msmk.com"};二、安装cross-env并在package.json中配置要
2020-08-20 21:08:39
1132
原创 如何对axios数据请求进行封装
一、为什么要对axios进行封装？我们进行封装主要是看着清晰简洁、后期好维护。通常我们的项目都很大，页面就会越来越多，如果不封装，后期不好维护，比如要修改端口的时候，页面有很多，我们就要一个一个页面找，哪个接口需要更改，很不方便。所以对接口进行封装，有利于维护。二、如何axios进行封装？在src文件夹下创建一个http文件夹，在http中新建三个js文件。分别是env.js、api.js、request.js这三个js文件。env.js文件主要用来配置环境的（开发环境、测试环境、生产环境），比如
2020-08-20 01:02:45
1543
原创 如何用vue搭建项目
整理一下今天学的用vue搭建项目一、安装最新版本的vue脚手架vue-cli官网：https://cli.vuejs.org/zh/npm install -g @vue/cli 安装注意：如果不是最新版本，要先卸载旧的版本，然后再下载最新的版本。npm uninstall -g @vue/cli 卸载二、使用vue脚手架创建项目首先要写入的文件夹，打开创建项目vue create 项目名 手动搭建项目手动选择要搭建的环境是否使用mod
2020-08-18 20:37:39
127
原创 如何使用webpack搭建开发环境
webpack是什么？Webpack（主流框架）是一个现代JavaScript应用程序的静态模块打包器。最新版本已经是v5.0了，但是一般最新的都不是最稳定的，最稳定的是v4.44。Webpack 可以按需加载，跟其他构建工具本质上不同之处在于：Webpack 是从入口文件开始，经过模块依赖加载、分析和打包三个流程完成项目的构建。一、Webpack搭建ES6开发环境步骤安装node.js( v12.x)注意：如果npm安装一些包由于网速原因，安装慢切换一下镜像源改成淘宝镜像：npm conf
2020-08-17 23:51:56
347
原创 公司必备前端面试题（检测js基础）
今天接触了两个可以检测自己js基础的必备面试题，可以扩展自己的思路，巩固一下基础知识。一、经典Foo与getname(前几年是流行，几乎都问，现在去面试问的少了)function Foo() { getName = function () { alert(1); } return this; } Foo.getName = function () { alert(2); } Foo.prototy
2020-08-15 20:16:56
143
原创 微信小程序点击高亮显示并切换到对应的内容
点击高亮显示并切换到对应的内容具体实现方法：先把头部要切换的标题渲染出来把每个title点击后对应的内容渲染出来，这个时候是把所有的对应的内容渲染出来了，需要在data中定义一个selIndex当作当前点击的下标。 data: { typeList: [{ id: 1, typename: '推荐', content: '我是推荐内容' }, { id: 2, typename:
2020-08-13 00:41:16
4601
原创 实现微信小程序的登录授权
实现登陆注册的流程以我自己得理解说一下吧，登陆注册分为三部分：小程序、开发者服务器、微信接口服务。实现两两的交互，就是一个登陆注册的过程。那怎么交互呢？就是微信小程序想登录的话，首先就要检测公司服务器中是否有注册过的信息，而注册就是向微信接口服务中提交用户的信息，如果没有注册，就先获取用户信息进行注册，然后再返回，重新请求登录，如果查询到了已经注册过的信息，就根据返回的参数进行有关登录的一系列操作。一、登录授权要传递token,那token是什么呢？token服务端生成的一串字符串，是客户端频繁向服务
2020-08-12 00:49:08
864
原创 微信小程序的生命周期
什么是生命周期？一段代码从创建到销毁的过程，成为生命周期。一、微信小程序的生命周期分别有哪些？整体小程序的生命周期、小程序页面级别的生命周期二、整体小程序生命周期App({ //监听小程序初始化，只触发一次 onLaunch() {}, //小程序启动或切换到前台运行时触发 onShow(){}, //小程序切换到后台运行时触发 onHide(), })三、小程序页面级别的生命周期Page({ //页面创建完，只触发一次，通常获取后台数据或接收另一个页
2020-08-10 23:32:18
408
原创 如何封装微信小程序数据请求
封装数据请求一、为什么要对数据请求进行封装？不封装的话，不说代码写的多，看的人也不想看，代码多余复杂。对代码进行封装，只要把前面的公共地址拿出来配置一下，自己用起来方便，别人修改也只用改改后缀的路径，如果有专属域名，就把专属域名用模板字符串拼接在中间就可以了。封装后的代码简洁、方便，为了方便管理数据。二、对请求进行封装首先封装数据请求，环境地址的统一//env.jsmodule.exports={ //开发环境 dev:{ baseUrl:'http://127.0.0.1:
2020-08-08 23:14:23
954
原创 如何使用微信小程序第三方UI组件库
组件库主要是vant和微信小程序官方文档小程序引入第三方UI框架（基于npm模块） 1、初始化package.json文件。 2、安装需要的小程序ui框架。 3、配置小程序（支持npm，配置在下面有写） 4、在app.wxml中引入第三方UI样式。 5、然后就可以使用了。（怎么使用看以下操作）具体实现：npm init -y 初始化npm install weui-miniprogram 安装配置：打开开发者工具一步一步配置然后在工具栏中找到工具，右键找到构建 np
2020-08-07 20:23:37
1910
原创 怎么从远程仓库拉取到本地(一次功能的开发和提交)
在本地仓库中进行以下操作首先去gitee复制链接cmd打开命令窗口,将远程仓库链接克隆到本地git clone 仓库链接这个时候文件夹只有public\src文件夹等,需要安装模块依赖,但是要先cd进入exersize文件夹在安装。cnpm i\npm i 查看所有分支，并切换到develop分支上。git branch -a 查看所有分支git checkout develop 切换分支创建并切换到功能分支上。git checkout -b 分支名
2020-08-05 00:49:38
1474
原创 web前端小实训面试题01
小实训面试题1、 响应式布局如何实现响应式布局可以让网站同时适配不同分辨率和不同的手机端，让客户有更好的体验。方案一：百分比布局利用对属性设置百分比来适配不同屏幕，注意这里的百分比是相对于父元素； 能够设置的属性有 width、height、padding、margin，其他属性比如 border、font-size 不能用百分比设置的，注意：当屏幕大于图片的宽度时，会进行拉伸；解决拉伸方法就是改为max-width: 50%，但当屏幕大于图片的宽度时，两边会有空白。栏目是利用设置单栏目 wid
2020-07-13 11:54:50
8594
原创 初始化项目模板（没安装node_modules）链接gitee仓库
链接gitee仓库步骤：（用于自己总结）在gitee新建一个仓库初始化模板（无安装node_modules）cmd进入命令行窗口现在按照以下命令执行最后cnpm i 安装模块依赖
2020-07-06 14:09:27
366
原创 vue封装路由
vue封装路由的步骤1、 在router文件目录下，新建两个文件： homeMoudule.js和config.js2、在新建homeMoudule.js中， 封装路由代码//管理所有有关首页得路由import router from './config'const homeModule = [ router.home, router.about,]export default homeModule;3、在新建config.js中import Home from
2020-06-28 20:40:38
283
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人