分类：Vue

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... 继续阅读 >

2021
10-12

Vue实现Google第三方登录的示例代码

目录一、开发者平台配置解决问题BUG一、开发者平台配置1、进入开发者平台，首先前往GoogleAPI控制台选择或者创建一个项目谷歌开发者平台一堆眼花缭乱的API让你无从选择，但是你只要记住这次进来的目的是：社交API2.使用这个API之前还需要做一件事，那就是申请一个OAuth2.0客户端ID3按照要求填写你项目的类型、名称以及来源url注：创建完成之后，页面也有一个弹窗将你申请的客户端ID已经密钥展示出来，没错这个就是一个生成的... 继续阅读 >

2021
10-12

vue3中provide和inject的使用

1.provide和inject的讲解provide和inject可以实现嵌套组件之间进行传递数据。这两个函数都是在setup函数中使用的。父级组件使用provide向下进行传递数据；子级组件使用inject来获取上级组件传递过来的数据；需要注意的是：1==>provide只能够向下进行传递数据2==>在使用provide和inject的时候需从vue中引入2.provide和inject的使用我们将创建2个组件儿子组件ErZi.vue孙子组件SunZI.vue我们将在父级组件中向其子代传递数据；那... 继续阅读 >

2021
10-12

vue中利用mqtt服务端实现即时通讯的步骤记录

MQTT协议MQTT(MessageQueuingTelemetryTransport，消息队列遥测传输)是IBM开发的一个即时通讯协议，有可能成为物联网的重要组成部分。该协议支持所有平台，几乎可以把所有联网物品和外部连接起来，被用来当做传感器和制动器(比如通过Twitter让房屋联网)的通信协议。MQTT是轻量级基于代理的发布/订阅的消息传输协议，它可以通过很少的代码和带宽和远程设备连接。例如通过卫星和代理连接，通过拨号和医疗保健提供者连接，以及在一... 继续阅读 >