Vue.extend 登录注册模态框的实现
模态框是我们 UI 控件中一个很重要的组件，使用场景有很多种，我们在 Vue 组件中创建模态框组件而用到的一个知识点是利用 Vue.extend 来创建。文档中的解释是在最近在做一个常...
2021-05-30
详解Vue的异步更新实现原理
最近面试总是会被问到这么一个问题：在使用vue的时候，将for循环中声明的变量i从1增加到100，然后将i展示到页面上，页面上的i是从1跳到100，还是会怎样？答案当然是只会显示100，并不会有...
2021-05-30
全面解析Vue中的$nextTick
当在代码中更新了数据，并希望等到对应的Dom更新之后，再执行一些逻辑。这时，我们就会用到$nextTickfuncion callback(){ //等待Dom更新，然后搞点事。}$nextTick(callback)；官方文...
2021-05-30
vue项目中openlayers绘制行政区划
vue项目中openlayers画行政区划（区域范围），供大家参考，具体内容如下原理在地图上画需要的范围，实际上就是在地图上打上一圈点，然后依次将这些点用线连接，就形成了范围引用相应的ol...
2021-05-30
基于Vant UI框架实现时间段选择器
本文实例为大家分享了Vant UI框架实现时间段选择器的具体代码，供大家参考，具体内容如下组件代码如下：<template> <van-picker :title="title" :show-toolbar="showToolbar"...
2021-05-30
vue3使用vue-count-to组件的实现
项目场景：数据可视化大屏开发的过程中，需要实现一种滚动数字的效果，在使用vue2时，使用vue-count-to完全没有问题，功能也比较完善(滚动时长，开始值，结束值，前缀，后缀，千分隔符，小数分隔...
2021-05-30
Vue实现省市区三级联动
本文实例为大家分享了Vue实现省市区三级联动的具体代码，供大家参考，具体内容如下效果图：代码：<!DOCTYPE html><html> <head> <meta charset="GBK"> <title></title> <style>...
2021-05-30
elementui实现预览图片组件二次封装
起因
在elementui组件库中，el-image组件有个预览图片功能，比较简洁，但是和图片绑定在一起，我们只想要一个单纯的预览组件，传递一个图片，通过事件方式，显示大图分析
通过查看element...
2021-05-30
Vue实现随机验证码功能
本文实例为大家分享了Vue实现随机验证码功能的具体代码，供大家参考，具体内容如下步骤1：创建一个名为identify.vue的子组件<template> <div class="s-canvas"> <canvas id="s-ca...
2021-05-30
Vue组件简易模拟实现购物车
本文实例为大家分享了Vue组件模拟实现购物车的具体代码，供大家参考，具体内容如下代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport"...
2021-05-30
解决基于 keep-alive 的后台多级路由缓存问题
用过 vue-element-admin 的同学一定很清楚，路由的配置直接关系侧边栏导航菜单的展示，也得益于这种设计思路，几乎大部分后台框架都采用这个方案，当然也包括了我写的 Fantastic-ad...
2021-05-30
Vue使用鼠标在Canvas上绘制矩形
本文实例为大家分享了Vue使用鼠标在Canvas上绘制矩形的具体代码，供大家参考，具体内容如下1.代码<template> <div class="test" style="background-color: burlywood;"> <canva...
2021-05-30
vue+openlayers绘制省市边界线
本文实例为大家分享了vue+openlayers绘制省市边界线的具体代码，供大家参考，具体内容如下1、创建项目vue init webpack ol_vue2、安装ol依赖包npm install ol3、引入axiosnpm i...
2021-05-30
vant时间控件使用方法详解
本文实例为大家分享了vant时间控件的使用方法，供大家参考，具体内容如下代码：<template> <div class="shoukuan"> <!-- 头部公共搜索框 --> <tabbar title="添加团队活动"></t...
2021-05-30
vue使用require.context实现动态注册路由
需求场景：
在日常的功能练习和调试过程中，需要一个demo项目进行功能测试，由于频繁.vue页面的同时，又要再router.js文件里面注册路由，感觉有点无聊和枯燥。基于此出发点，考虑能否自...
2021-05-30
vue中watch的用法汇总
在vue中，使用watch来响应数据的变化。watch的用法大致有三种。1. 常用用法<input type="text" v-model="name"/>new Vue({ el: '#app', data: { name: '咸鱼' }, watch: {...
2021-05-30
vue实现图书管理系统
本文实例为大家分享了vue实现图书管理系统的具体代码，供大家参考，具体内容如下组件代码<template> <div id="app"> <div class="grid"> <div> <h1>图书管理</h1> <di...
2021-05-30
Vue3 实现双盒子定位Overlay的示例
在 Vue 3 中，使用 <Teleport> 可以很优雅的把某个组件渲染到根节点之外的节点，同时使其渲染的内容不丧失响应式和对应的生命周期函数调用。那么基于此，用 <Teleport> 实现相对...
2021-05-30
vue实现登录、注册、退出、跳转等功能
本文给大家介绍vue实现登录、注册、退出、跳转功能，具体代码如下所示:效果图1：效果图2：效果图3：效果图4：完整实例：<!DOCTYPE html><html> <head> <meta charset="GBK"> <ti...
2021-05-30
Vue+penlayers实现多边形绘制及展示
本文实例为大家分享了Vue+penlayers实现多边形绘制展示代码，供大家参考，具体内容如下<!-- * @Description: 绘制多边形 * @Author: Dragon * @Date: 2020-12-17 16:02:06 * @L...
2021-05-30
vue 实现基础组件的自动化全局注册
参考官网：https://cn.vuejs.org/v2/guide/components-registration.html在日常开发中，有一些组件是比较常用，但是为了避免在开发过程中不停地引入，或者在main.js中注册，，或者每添...
2021-05-30
Vue 简单实现前端权限控制的示例
简要说明
最近写了一下vue控制权限(菜单、路由)的项目，用了vuex、addRoutes动态添加路由方法等，总共100多行代码，跟大家分享一下~逻辑梳理
除登录接口、退出接口外，其余接口增...
2021-05-30
vue3.0自定义指令（drectives)知识点总结
在大多数情况下，你都可以操作数据来修改视图，或者反之。但是还是避免不了偶尔要操作原生 DOM，这时候，你就能用到自定义指令。举个例子，你想让页面的文本框自动聚焦，在没有学习自定...
2021-05-30
vue下拉刷新组件的开发及slot的使用详解
“下拉刷新”和“上滑加载更多”功能在前端、尤其是移动端项目中非常重要，这里笔者由曾经做过的vue项目中的“blink”功能和各位探讨下【下拉刷新】组件的开发：正式开篇在前端...
2021-05-30
vue绑定class的三种方法
一、对象语法1、给v-bind:class 设置一个对象，可以动态地切换class，例如：<div id="app"> <div :class="{'active':isActive}"></div></div><script>var app = new Vue({ el:'...
2021-05-30
vue 使用class创建和清除水印的示例代码
页面添加水印的方法有很多，以下举例使用class定义的方法进行水印内容渲染：1、新建文件：WatermarkClass.jsexport default class WatermarkClass { constructor({id="watermark...
2021-05-30
vue中封装axios并实现api接口的统一管理
在vue项目中，我们通常都是使用axios与后台进行数据交互，axios有很多好用的特性，这里不多做介绍，相关细节可以查阅axios中文网。在对axios进行封装之前，我们要使用vue脚手架工具创...
2021-05-30
浅析vue中的nextTick
背景
vue是异步渲染的，当data改变之后，DOM不会立刻被渲染，页面渲染时会将data的修改做整合，多次data修改只会做整合最后一次性渲染出来，这也是异步渲染的原因。只有异步渲染才可...
2021-05-30
vue实现简易的双向数据绑定
主要是通过数据劫持和发布订阅一起实现的 双向数据绑定 数据更新时,可以更新视图 视图的数据更新是,可以反向更新模型
组成说明
Observe监听器 劫持数据, 感知数据变化...
2021-05-30
基于vue+echarts数据可视化大屏展示的实现
获取 ECharts 的路径有以下几种，请根据您的情况进行选择：1) 最直接的方法是在 ECharts 的官方网站中挑选适合您的版本进行下载，不同的打包下载应用于不同的开发者功能与体积的...
2021-05-30
如何在VUE中使用vue-awesome-swiper
一：首先进入项目目录中安装install vue-awesome-swiper@2.6.7 --save二.使用
全局挂载：import Vue from 'vue'import VueAwesomeSwiper from 'vue-awesome-swiper'// require...
2021-05-30
vue中父子组件的参数传递和应用示例
1.在父组件中调用子组件，父亲传值给子组件子组件如下，把要传给给父亲的值放在props中template> <!--底部导航--> <div class="index-bbar"> <ul class="flex" > <li...
2021-05-30
vue3中轻松实现switch功能组件的全过程
what
编程语言里面，除了使用 if 语句来做条件判断，还有另外一个常用的就是 switch 了。而在 vue 中，官方已经帮助我们实现了 v-if 这个指令，但是还没有 switch ，那我们能不能自己...
2021-05-30
手写Vue源码之数据劫持示例详解
源代码: 传送门Vue会对我们在data中传入的数据进行拦截： 对象：递归的为对象的每个属性都设置get/set方法 数组：修改数组的原型方法，对于会修改原数组的方法进行了重写
在用...
2021-05-30
vue导入.md文件的步骤（markdown转HTML）
前言 刚接到这个需求的时候，觉得很简单（的确很简单）但是这玩意的坑真的也让人无奈。 网上找了很多的资料，都没有写出痛点（这就很难过了）。通过实践并且在我们项目中平稳运行...
2021-05-30
Vue 修改网站图标的方法
1、在stateic下新增favicon.ico文件2、修改index.html文件，如图<!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-widt...
2021-05-30
Vue中强制组件重新渲染的正确方法
有时候，依赖 vue 响应方式来更新数据是不够的，相反，我们需要手动重新渲染组件来更新数据。或者，我们可能只想抛开当前的DOM，重新开始。那么，如何让vue以正确的方式重新呈现组件呢？...
2021-05-30
vue中使用echarts的示例
1:首先要用到echarts2：在vue中安装这个依赖3：引入要用的页面import echarts from 'echarts';4：然后初始化<template> <a-col span="12" style="min-height:343px;width:100%;ba...
2021-05-30
vue3弹出层V3Popup实例详解
Vue3-Popup 基于vue3构建的手机端自定义弹层组件。一款集合了msg、alert、dialog、modal、actionSheet、toast等多种效果的Vue3自定义弹层组件。支持上下左右弹出、圆角、自...
2021-05-30
el-table表头根据内容自适应完美解决表头错位和固定列错位
将代码复制到指令中即可使用。通过指令方式进行调用。（使用方式 <el-table v-tableFit></el-table>）
通过计算文字的宽度进行表头设置，其他内容无法计算。
5000个单元格以上根...
2021-05-30
Vue实现简易购物车页面
VUE实现简易购物车效果，供大家参考，具体内容如下简易的购物车小demo引用了一下bootstrap3，的表格<section id="gouwuche"> <table class="table table-hover"> <thead> <tr>...
2021-05-30
Vue中inheritAttrs的使用实例详解
今天举一个例子解释一下inheritAttrs的使用先看代码<body> <div id="app" class="vueclass"> <my-com title="标题" wx-attr1="未定义属性1" wx-attr2="未定义属性2"></m...
2021-05-30
vue 动态创建组件的两种方法
Vue动态创建组件实例并挂载到body
方式一import Vue from 'vue'/** * @param Component 组件实例的选项对象 * @param props 组件实例中的prop */export function create(Co...
2021-05-30
vue调用微信JSDK 扫一扫，相册等需要注意的事项
在VUE里面需要注意的第一个问题就是路由得设置成第二个就是 跳转路由的时候不要用this.$router.push 或者this.$router.replace 前者在ios 和安卓端都调不起来的后者只能在...
2021-05-30
element-ui封装一个Table模板组件的示例
大家在做后台管理系统的时候，写的最多的可能就是表格页面了，一般分三部分：搜索功能区、表格内容区和分页器区。一般这些功能都是使用第三方组件库实现，比如说element-ui，或者vuet...
2021-05-30
vue3自定义dialog、modal组件的方法
vue3-layer：基于Vue3.0开发的PC桌面端自定义对话框组件。基于vue3构建的PC网页端自定义弹出框组件。全面覆盖各种弹窗应用场景，拥有10+种弹窗类型、30+种自定义参数配置、7+种...
2021-05-30
jenkins自动构建发布vue项目的方法步骤
简介Jenkins是一个开源的、提供友好操作界面的持续集成(CI)工具，起源于Hudson（Hudson是商用的），主要用于持续、自动的构建/测试软件项目、监控外部任务的运行（这个比较抽象，暂且写...
2021-05-30
vue3.0中友好使用antdv示例详解
前言随着我们vue3.0的出现，我们的ui组件库也有了一些变化，像我们的旧版的element-ui已经不能在vue3.0中使用了，如果要使用element的话需要使用最新版的element-plus，由于发现它...
2021-05-30
vue+elementui通用弹窗的实现(新增+编辑)
本文主要介绍了vue+elementui通用弹窗的实现(新增+编辑)，分享给大家，具体如下：
组件模板
<el-dialog :title="title" :visible.sync="dialogShow" :close-on-click-modal="fals...
2021-05-30
梳理一下vue中的生命周期
什么是生命周期？
生命周期，以个人之浅见，即一个事物从诞生到消亡的一个过程！以人的一生来做类比，其实就可以简单粗暴的将生命周期看作人的一生，人这一出生就开始了一段美好（艰难）的...
2021-05-30
