148浏览

0评论

vue中封装axios并实现api接口的统一管理

在vue项目中，我们通常都是使用axios与后台进行数据交互，axios有很多好用的特性，这里不多做介绍，相关细节可以查阅axios中文网。在对axios进行封装之前，我们要使用vue脚手架工具创...

• 2021-05-30

71浏览

0评论

浅析vue中的nextTick

背景
vue是异步渲染的，当data改变之后，DOM不会立刻被渲染，页面渲染时会将data的修改做整合，多次data修改只会做整合最后一次性渲染出来，这也是异步渲染的原因。只有异步渲染才可...

• 2021-05-30

126浏览

0评论

vue实现简易的双向数据绑定

主要是通过数据劫持和发布订阅一起实现的 双向数据绑定 数据更新时,可以更新视图 视图的数据更新是,可以反向更新模型
组成说明
Observe监听器 劫持数据, 感知数据变化...

• 2021-05-30

129浏览

0评论

基于vue+echarts数据可视化大屏展示的实现

获取 ECharts 的路径有以下几种，请根据您的情况进行选择：1) 最直接的方法是在 ECharts 的官方网站中挑选适合您的版本进行下载，不同的打包下载应用于不同的开发者功能与体积的...

• 2021-05-30

77浏览

0评论

如何在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

78浏览

0评论

vue中父子组件的参数传递和应用示例

1.在父组件中调用子组件，父亲传值给子组件子组件如下，把要传给给父亲的值放在props中template> <!--底部导航--> <div class="index-bbar"> <ul class="flex" > <li...

• 2021-05-30

61浏览

0评论

vue3中轻松实现switch功能组件的全过程

what
编程语言里面，除了使用 if 语句来做条件判断，还有另外一个常用的就是 switch 了。而在 vue 中，官方已经帮助我们实现了 v-if 这个指令，但是还没有 switch ，那我们能不能自己...

• 2021-05-30

65浏览

0评论

手写Vue源码之数据劫持示例详解

源代码: 传送门Vue会对我们在data中传入的数据进行拦截： 对象：递归的为对象的每个属性都设置get/set方法 数组：修改数组的原型方法，对于会修改原数组的方法进行了重写
在用...

• 2021-05-30

86浏览

0评论

vue导入.md文件的步骤（markdown转HTML）

前言　　刚接到这个需求的时候，觉得很简单（的确很简单）但是这玩意的坑真的也让人无奈。　　网上找了很多的资料，都没有写出痛点（这就很难过了）。通过实践并且在我们项目中平稳运行...

• 2021-05-30

109浏览

0评论

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

107浏览

0评论

Vue中强制组件重新渲染的正确方法

有时候，依赖 vue 响应方式来更新数据是不够的，相反，我们需要手动重新渲染组件来更新数据。或者，我们可能只想抛开当前的DOM，重新开始。那么，如何让vue以正确的方式重新呈现组件呢？...

• 2021-05-30

63浏览

0评论

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

81浏览

0评论

vue3弹出层V3Popup实例详解

Vue3-Popup 基于vue3构建的手机端自定义弹层组件。一款集合了msg、alert、dialog、modal、actionSheet、toast等多种效果的Vue3自定义弹层组件。支持上下左右弹出、圆角、自...

• 2021-05-30

85浏览

0评论

el-table表头根据内容自适应完美解决表头错位和固定列错位

将代码复制到指令中即可使用。通过指令方式进行调用。（使用方式 <el-table v-tableFit></el-table>）
通过计算文字的宽度进行表头设置，其他内容无法计算。
5000个单元格以上根...

• 2021-05-30

100浏览

0评论

Vue实现简易购物车页面

VUE实现简易购物车效果，供大家参考，具体内容如下简易的购物车小demo引用了一下bootstrap3，的表格<section id="gouwuche"> <table class="table table-hover"> <thead> <tr>...

• 2021-05-30

94浏览

0评论

Vue中inheritAttrs的使用实例详解

今天举一个例子解释一下inheritAttrs的使用先看代码<body> <div id="app" class="vueclass"> <my-com title="标题" wx-attr1="未定义属性1" wx-attr2="未定义属性2"></m...

• 2021-05-30

70浏览

0评论

vue 动态创建组件的两种方法

Vue动态创建组件实例并挂载到body
方式一import Vue from 'vue'/** * @param Component 组件实例的选项对象 * @param props 组件实例中的prop */export function create(Co...

• 2021-05-30

69浏览

0评论

vue调用微信JSDK 扫一扫，相册等需要注意的事项

在VUE里面需要注意的第一个问题就是路由得设置成第二个就是 跳转路由的时候不要用this.$router.push 或者this.$router.replace 前者在ios 和安卓端都调不起来的后者只能在...

• 2021-05-30

104浏览

0评论

element-ui封装一个Table模板组件的示例

大家在做后台管理系统的时候，写的最多的可能就是表格页面了，一般分三部分：搜索功能区、表格内容区和分页器区。一般这些功能都是使用第三方组件库实现，比如说element-ui，或者vuet...

• 2021-05-30

140浏览

0评论

vue3自定义dialog、modal组件的方法

vue3-layer：基于Vue3.0开发的PC桌面端自定义对话框组件。基于vue3构建的PC网页端自定义弹出框组件。全面覆盖各种弹窗应用场景，拥有10+种弹窗类型、30+种自定义参数配置、7+种...

• 2021-05-30

114浏览

0评论

jenkins自动构建发布vue项目的方法步骤

简介Jenkins是一个开源的、提供友好操作界面的持续集成(CI)工具，起源于Hudson（Hudson是商用的），主要用于持续、自动的构建/测试软件项目、监控外部任务的运行（这个比较抽象，暂且写...

• 2021-05-30

101浏览

0评论

vue3.0中友好使用antdv示例详解

前言随着我们vue3.0的出现，我们的ui组件库也有了一些变化，像我们的旧版的element-ui已经不能在vue3.0中使用了，如果要使用element的话需要使用最新版的element-plus，由于发现它...

• 2021-05-30

89浏览

0评论

vue+elementui通用弹窗的实现(新增+编辑)

本文主要介绍了vue+elementui通用弹窗的实现(新增+编辑)，分享给大家，具体如下：
组件模板
<el-dialog :title="title" :visible.sync="dialogShow" :close-on-click-modal="fals...

• 2021-05-30

85浏览

0评论

梳理一下vue中的生命周期

什么是生命周期？
生命周期，以个人之浅见，即一个事物从诞生到消亡的一个过程！以人的一生来做类比，其实就可以简单粗暴的将生命周期看作人的一生，人这一出生就开始了一段美好（艰难）的...

• 2021-05-30

291浏览

0评论

element 动态合并表格的步骤

前言　　element 官方的例子太简单了，不满足实际的需求　　数据肯定是动态的，合并的行数，列数都是动态的，该如何知道每一行的合并数呢需求　　动态合并表格，数据来源于数据库正文...

• 2021-05-30

202浏览

0评论

vue 动态生成拓扑图的示例

横向拓扑
在 index.html 文件中引入文件。 <link href="https://magicbox.bk.tencent.com/static_api/v3/assets/bootstrap-3.3.4/css/bootstrap.min.css" rel="external no...

• 2021-05-30

72浏览

0评论

vue+vant 上传图片需要注意的地方

<van-uploader v-model="fileList" multiple :after-read="afterRead" :max-count="1" />1:上传文件流，提交的模式 肯定得 form-data模式2：上传的文件file 做出处理我这里做的...

• 2021-05-30

414浏览

0评论

vue项目如何监听localStorage或sessionStorage的变化

出现这个问题的起因：在一个VUE页面中，引入两个组件，A组件实现基础信息展示，B组件展示列表，我要通过A组件的一个按钮触发状态，然后B组件根据A组件触发的状态来做业务处理，首先想到的...

• 2021-05-30

47浏览

0评论

详解基于element的区间选择组件校验(交易金额)

需求：这里以项目的需求为例，基本的需求如下： 分为左右值，包含左右值，正整数 左侧必须大于等于1，右侧无限大，右侧值必须不小于左侧 左侧填写数据，右侧标为必填；右侧填写数据，左侧标...

• 2021-05-30

78浏览

0评论

利用Vue实现简易播放器的完整代码

看b站某马学习，实现一个属于自己的播放器HTML+CSS+JS<section id="xwyy"> <!--主体区域--> <section class="box" style="margin-top: 30px;"> <div class="nav"> <div cl...

• 2021-05-30

86浏览

0评论

vue中实现点击空白区域关闭弹窗的两种方法

1. 第一种做法
首页在外层容器里面取一个名字为main，即ref="main",当bankSwitch为true的时候，弹窗出现<div class="selectedBorder" ref="main"> <div class="bankItem" v-if=...

• 2021-05-30

67浏览

0评论

vue中activated的用法

keep-alive
<keep-alive>包裹动态组件的时候，会缓存不活动的组件实例，而不是摧毁他们。其是一个抽象的组件，自身不会渲染一个DOM元素，也不会出现在父组件链中。
说白了被<keep-a...

• 2021-05-30

67浏览

0评论

vue 递归组件的简单使用示例

前言递归 相信很多同学已经不陌生了，算法中我们经常用递归来解决问题。比如经典的：从一个全为数字的数组中找出其中相加能等于目标数的组合。思路也不难，循环数组取值，不断递归...

• 2021-05-30

69浏览

0评论

vue动态设置路由权限的主要思路

之前看到网上有些动态设置路由的，但是跟目前的项目不是很匹配，就自己动手实现了一种。主要思路就是：1.配置路由的时候绑定好id，可后端开发完成后，与后端同步id就行，这id唯一不变，根...

• 2021-05-30

81浏览

0评论

通过vue.extend实现消息提示弹框的方法记录

前提回顾在项目开发中我们经常使用的组件注册分为两种，一个是全局注册和另一个是局部注册，假设我们的业务场景是用户在浏览注册页面时，点击页面中的注册按钮后，前端根据用户的注...

• 2021-05-30

79浏览

0评论

Vue项目中使用mock.js的完整步骤

在Vue项目中使用mock.js 开发工具选择：Vscode1. 使用命令行创建vue项目（手动选择Babel，Router，Vuex）2. 导入element-ui（为了显示效果好一点），命令行输入npm i element-ui -S3.在mai...

• 2021-05-30

61浏览

0评论

vue编写简单的购物车功能

使用vue写出简单的购物车，供大家参考，具体内容如下
代码：// An highlighted block<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" cont...

• 2021-05-30

64浏览

0评论

基于VUE实现简单的学生信息管理系统

一、主要功能本次任务主要是使用VUE来实现一个简单的学生信息管理系统，主要功能为：1.显示所有学生的信息（默认为10个)
2. 点击按钮，显示出学号尾号为单数(或双数）的学生信息
3....

• 2021-05-30

77浏览

0评论

vue实现一个获取按键展示快捷键效果的Input组件

遇到一个需求，页面内要自定义快捷键，这就需要可以有地方设置和展示快捷键，找了一圈Element UI发现没有能稍微改改就能用的组件，所以自己动手写了一个。
这个只有快捷键展示功能，...

• 2021-05-30

78浏览

0评论

vue二选一tab栏切换新做法实现

问题描述
在我们做项目的过程中，有时候会要做一些tab栏切换效果。有两个tab的，有三个tab的，甚至有五六七八个tab的。平常我们直接拿饿了么的tab组件用就行了，但是偶尔自己闲着没...

• 2021-05-30

61浏览

0评论

如何在vue-cli中使用css-loader实现css module

【前言】
无论是vue还是react的css模块化解决方案都是依赖loader来实现的 在使用上，vue中用scoped属性实现样式的私有化，利用深度作用选择器/deep来实现样式的去私有化。例子：<...

• 2021-05-30

42浏览

0评论

vue watch监控对象的简单方法示例

watch的作用：监听vue实例上数据的变动示例：
queryData: {name: '',creator: '',selectedStatus: '',time: [],},1、普通的watchdata() { return { frontPoints: 0 }},watch:...

• 2021-05-30

69浏览

0评论

解决vue使用vant轮播组件swipe + flex时文字抖动问题

原抖动效果改后效果解决方法在外层容器的css里加上：transform: translateZ(0);部分页面代码<van-swipe-item v-for="(item,index) in meetingList" :key="index"> <div cla...

• 2021-05-30

66浏览

0评论

vue-quill-editor插入图片路径太长问题解决方法

最近做项目的时候有一个发布新闻的需求，新闻编辑的时候要求能发布带格式的文本内容和能展示支持图片。
由于项目是用 Vue 开发的，所以找编辑器的时候选了 vue-quill-editor 。...

• 2021-05-30

64浏览

0评论

vue自定义组件实现双向绑定

场景：
我们比较常用的父子组件之间的交互方式：
父组件通过props将数据流入到子组件；
子组件通过$emit将更新后的数组发送的父组件；今天，我们通过另一种方式实现交互，参考input框的...

• 2021-05-30

53浏览

0评论

vue组件是如何解析及渲染的？

前言
本文将对vue组件如何解析以及渲染做一个讲解。我们可以通过Vue.component注册全局组件，之后可以在模板中进行使用<div id="app"> <my-button></my-button></div><scrip...

• 2021-05-30

45浏览

0评论

vue+element table表格实现动态列筛选的示例代码

需求：在用列表展示数据时，出现了很多项信息需要展示导致表格横向特别长，展示就不够明晰，用户使用起来可能会觉得抓不住自己的重点。设想实现：用户手动选择表格的列隐藏还是展示，并...

• 2021-05-30

70浏览

0评论

vue element el-transfer增加拖拽功能

芯资管项目要求el-transfer增加拖拽排序，左右上下互相拖拽功能；
原来的组件不支持拖拽，这里要用个第三方脱宅组件sortablejs首先安装 sudo npm i sortablejs --save-devhtml代...

• 2021-05-30

63浏览

0评论

vue.js watch经常失效的场景与解决方案

使用过watch的，应该起码经历过一次失效。比如，我们监听对象的时候，在没有踩坑之前，很容易这样写：但是，&#10060;，这里的watch是无效的!!!因为 obj 是引用类型！！！引用类型的指针是固定的...

• 2021-05-30

53浏览

0评论

vue实现防抖的实例代码

防抖：防止重复点击触发事件
首先啥是抖？ 抖就是一哆嗦！原本点一下，现在点了3下！不知道老铁脑子是不是很有画面感！哈哈哈哈哈哈典型应用就是防止用户多次重复点击请求数据。vue实现...

• 2021-05-30