分类：Vue

2021
10-25

vue_drf实现短信验证码

目录一、需求1，需求二、sdk参数配置1，目录结构三、代码实现1，后端代码2,前端代码一、需求1，需求我们在做网站开发时，登录页面很多情况下是可以用手机号接收短信验证码，然后实现登录的，那我们今天就来做一做这一功能。伪代码：进入登录页面，点击短信登录输入手机号码，点击获取验证码，后端在redis里保存验证码用户把手机收到的验证码输入，点击登录，会把手机号和验证码发往后端，然后进行验证要想发送短信，让用户... 继续阅读 >

2021
10-21

尤大大新活petite-vue的实现

目录前言简介上活简单使用根作用域指定挂载元素生命周期组件全局状态管理自定义指令内置指令不支持总结前言打开尤大大的GitHub，发现多了个叫petite-vue的东西，好家伙，Vue3和Vite还没学完呢，又开始整新东西了？本着学不死就往死里学的态度，咱还是来瞅瞅这到底是个啥东西吧，谁让他是咱的祖师爷呢！简介从名字来看可以知道petite-vue是一个mini版的vue，大小只有5.8kb，可以说是非常小了。据尤大大介绍，petite-vue是... 继续阅读 >

2021
10-21

vue 集成腾讯地图实现api(附DEMO)

目录写作背景项目说明前期准备工作注意点写作背景.之前项目使用腾讯地图，感觉还是比较好用的，但是官方的demo大部分都是原生js，且比较基础，并且很多高级Api分布比较分散，不利于开发者查找，所以使用vue结合网上的开源框架vue-admin模仿官方，做一个开箱即用的Demo集合出来。down下项目来会有个登录界面，随便输入六个字符就可以了（笔者很懒，懒得移除了，已经没救了）项目预览各位看官可以从这个地址直接拉取代码然后复制粘... 继续阅读 >

2021
10-20

vue实现四级导航及验证码的方法实例

实现效果: 首先创建五个vue界面1.home.vue页面<template><divid="home-wrapper"><h1>{{name}}</h1><nav><!--二级路由的出口在一级路由的界面里面--><router-linkto="/one">one</router-link><router-link:to="{name:'Two'}">two</router-link><router-link:to="threeObj">three</router-link><!--编程式导航/路由--><button@click="fourBtn">four</button>... 继续阅读 >

2021
10-17

Vue 路由返回恢复页面状态的操作方法

路由参数、路由导航守卫：页面后退返回时，保留搜索结果需求场景：首页搜索内容，点击跳转至详情页，页面后退返回主页，保留搜索结果。方案：路由参数；路由守卫需求描述在使用Vue开发前端的时候遇到一个场景：在首页进行一些数据搜索，点击搜索结果进入详情页面，浏览详情页后返回主页。但这时候之前的搜索记录和翻页就消失了，用户体验不好。所以需要在返回后恢复跳转前的页面参数状态。当然如果条件允许，最简单的办法是点击... 继续阅读 >

2021
10-17

Vue 页面监听用户预览时间功能的实现代码

最近的业务中涉及到这样一个需求，在线培训的系统需要知道用户对某个在线预览的页面追踪用户的预览时长。初步我们首先想到借助Vue页面的生命周期函数mounted和destroyed，分别在其中加入开始计时和清除计时的逻辑，通过后台的接口上报对应的培训素材的时间数据，即可达到目的。有了思路，我们就可以开始筹划具体的代码。定义开始结束计时函数在data中定义我们通过变量定义计时器，这样可以通过this.timer随处可访问，便于... 继续阅读 >

2021
10-17

使用vue-cli创建项目并webpack打包的操作方法

1.准备环境（nodejs下载和设置环境变量）2.全局安装vue-cli，提供vue命令进行创建vue项目npminstall-g@vue/cli关于旧版本VueCLI的包名称由vue-cli改成了@vue/cli。如果你已经全局安装了旧版本的vue-cli(1.x或2.x)，你需要先通过npmuninstallvue-cli-g或yarnglobalremovevue-cli卸载它。3.创建一个基于webpack模板的新项目（先新建项目文件夹，打开所在位置命令行）vueinitwebpackmy-project4.进行默认... 继续阅读 >

2021
10-16

vue验证码组件使用方法详解

本文实例为大家分享了vue验证码组件使用的具体实现代码，供大家参考，具体内容如下代码如下：<template><divclass="join_formitem"><labelclass="enquiry">验证码<span>:</span></label><divclass="captcha"><inputtype="text"placeholder="请输入验证码"class="yanzhengma_input"v-model="picLyanzhengma"/><inputtype="button"@click="createdCode"class="verification"v-mode... 继续阅读 >

2021
10-16

Vue登录页面的动态粒子背景插件实现

目录动态粒子效果如下：安装插件动态粒子效果如下：安装插件npminstallvue-particles--save-dev在main.js文件中全局引入importVueParticlesfrom'vue-particles'Vue.use(VueParticles)在vue文件中使用<vue-particlescolor="#409EFF":particleOpacity="0.7":particlesNumber="60"shapeType="circle":particleSize="6"linesColor="#409EFF":linesWid... 继续阅读 >

2021
10-16

Vue实现Dialog封装

目录Vue2写法Vue3插件版写法Vue3动态组件写法一些比较hack的写法在写业务的时候很常见的一个场景就是需要在不同的页面调用同一个表单，常用的交互就是把表单以弹窗的形式展示，但是在每个页面又重复的引入表单组件有时候又很麻烦解决方案有两个：在根组件里面引入动态组件，在业务里面通过this.$root.openDialog(name,props)去控制动态组件的展示形式封装成插件的形式去调用，比如this.$dialog('EditDialog.vue',pr... 继续阅读 >

2021
10-15

vue轻松实现虚拟滚动的示例代码

目录前言滚动原理实现源代码参考前言移动端网页的日常开发中,偶尔会包含一些渲染长列表的场景.比如某旅游网站需要完全展示出全国的城市列表,再有将所有通讯录的姓名按照A,B,C...首字母依次排序展示.长列表的数量一般在几百条范围内不会出现意外的效果,浏览器本身足以支撑.可一旦数量级达到上千,页面渲染过程会出现明显的卡顿.数量突破上万甚至十几万时,网页可能直接崩溃了.为了解决长列表造成的渲染压力,业界出现了相应的应对技术,... 继续阅读 >

2021
10-15

关于Vue 消除Token过期时刷新页面的重复提示问题

token过期时，刷新页面，页面如果加载时向后端发起多个请求，会重复告警提示，经过处理，只提示一次告警。1、问题现象  页面长时间未操作，再刷新页面时，第一次弹出“token失效,请重新登录!”提示，然后跳转到登录页面，接下来又弹出了n个“Token已过期”的后端返回消息提示。2、原因分析  当前页面初始化，有多个向后端查询系统参数的调用，代码如下：created(){//=============================... 继续阅读 >

2021
10-13

vue项目中使用rem替换px的实现示例

目录工具安装插件在项目根目录下添加.postcssrc.js文件index.html关于移动端页面适配，rem和vw适配方案基础点：rem相对根节点字体的大小。所以不用px;根字体：字体的大小px;px：你就当成cm(厘米)这样的东西吧；基准：750设计稿（一般UI设计师给的都是750的设计稿）；工具vue-cli:使用脚手架来搭建vue前端项目postcss:就是postcss用js插件帮你转换css样式的一个工具。比如，这里的把你的文件里面16px替换成1rem(根大小默认16px的情... 继续阅读 >

2021
10-12

浅谈vue中所有的封装方式总结

目录1.封装API 2.注册全局工具组件 3.封装全局函数4. 为了减少页面代码量的封装如何确定我需要封装呢？1.复用，如果觉得以后还会用到2.你觉得方便，别的地方可能也需要用3.如果不封装，页面代码臃肿的时候1.封装API 使用场景：业务中最常见最普通的封装步骤一：步骤二： 步骤三： 2.注册全局工具组件使用场景：想让组件全局可用，尤其是第三方插件使用时步骤一：  步骤二： 3.封装全... 继续阅读 >

2021
10-12

vue异步更新dom的实现浅析

目录Vue异步更新DOM的原理1什么时候能获取到真正的DOM元素？2为什么Vue需要通过nextTick方法才能获取最新的DOM？3为什么this.$nextTick能够获取更新后的DOM？总结：vue异步更新的原理Data对象：vue中的data方法中返回的对象；Dep对象：每一个Data属性都会创建一个Dep，用来搜集所有使用到这个Data的Watcher对象；Watcher对象：主要用于渲染DOMVue异步更新DOM的原理Vue中的数据更新是异步的，意味着我们在修改完Data之后并不能... 继续阅读 >

2021
10-12

Vue批量更新dom的实现步骤

目录场景介绍深入响应式触发getter寻找Dep.targetgettersetter总结场景介绍在一个SFC（singlefilecomponent，单文件组件）中，我们经常会写这样的逻辑：<template><div><span>{{a}}</span><span>{{b}}</span></div></template><scripttype="javascript">exportdefault{data(){return{a:0,b:0}},created(){//somelogiccodethis.a=1this.b=2}}</script... 继续阅读 >