编程开发 - 教程之家

编程开发

分类导航：HTML/html5 CSS JavaScript PHP Python Java IOS .NET R语言 Rust Android Go语言鸿蒙OS C类语言综合编程正则表达式

75浏览

0评论

全面解析Vue中的$nextTick

当在代码中更新了数据，并希望等到对应的Dom更新之后，再执行一些逻辑。这时，我们就会用到$nextTickfuncion callback(){ //等待Dom更新，然后搞点事。}$nextTick(callback)；官方文...

2021-05-30 22:55:13

84浏览

0评论

vue项目中openlayers绘制行政区划

vue项目中openlayers画行政区划（区域范围），供大家参考，具体内容如下原理在地图上画需要的范围，实际上就是在地图上打上一圈点，然后依次将这些点用线连接，就形成了范围引用相应的ol...

2021-05-30 22:55:12

108浏览

0评论

基于Vant UI框架实现时间段选择器

本文实例为大家分享了Vant UI框架实现时间段选择器的具体代码，供大家参考，具体内容如下组件代码如下：<template> <van-picker :title="title" :show-toolbar="showToolbar"...

2021-05-30 22:55:10

79浏览

0评论

vue3使用vue-count-to组件的实现

项目场景：数据可视化大屏开发的过程中，需要实现一种滚动数字的效果，在使用vue2时，使用vue-count-to完全没有问题，功能也比较完善(滚动时长，开始值，结束值，前缀，后缀，千分隔符，小数分隔...

2021-05-30 22:55:09

70浏览

0评论

Vue实现省市区三级联动

本文实例为大家分享了Vue实现省市区三级联动的具体代码，供大家参考，具体内容如下效果图：代码：<!DOCTYPE html><html> <head> <meta charset="GBK"> <title></title> <style>...

2021-05-30 22:55:08

93浏览

0评论

elementui实现预览图片组件二次封装

起因
在elementui组件库中，el-image组件有个预览图片功能，比较简洁，但是和图片绑定在一起，我们只想要一个单纯的预览组件，传递一个图片，通过事件方式，显示大图分析
通过查看element...

2021-05-30 22:55:06

85浏览

0评论

Vue实现随机验证码功能

本文实例为大家分享了Vue实现随机验证码功能的具体代码，供大家参考，具体内容如下步骤1：创建一个名为identify.vue的子组件<template> <div class="s-canvas"> <canvas id="s-ca...

2021-05-30 22:55:05

116浏览

0评论

Vue组件简易模拟实现购物车

本文实例为大家分享了Vue组件模拟实现购物车的具体代码，供大家参考，具体内容如下代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport"...

2021-05-30 22:55:03

94浏览

0评论

解决基于 keep-alive 的后台多级路由缓存问题

用过 vue-element-admin 的同学一定很清楚，路由的配置直接关系侧边栏导航菜单的展示，也得益于这种设计思路，几乎大部分后台框架都采用这个方案，当然也包括了我写的 Fantastic-ad...

2021-05-30 22:55:02

94浏览

0评论

Vue使用鼠标在Canvas上绘制矩形

本文实例为大家分享了Vue使用鼠标在Canvas上绘制矩形的具体代码，供大家参考，具体内容如下1.代码<template> <div class="test" style="background-color: burlywood;"> <canva...

2021-05-30 22:55:00

134浏览

0评论

vue+openlayers绘制省市边界线

本文实例为大家分享了vue+openlayers绘制省市边界线的具体代码，供大家参考，具体内容如下1、创建项目vue init webpack ol_vue2、安装ol依赖包npm install ol3、引入axiosnpm i...

2021-05-30 22:54:58

119浏览

0评论

vant时间控件使用方法详解

本文实例为大家分享了vant时间控件的使用方法，供大家参考，具体内容如下代码：<template> <div class="shoukuan">  <tabbar title="添加团队活动"></t...

2021-05-30 22:54:57

103浏览

0评论

vue使用require.context实现动态注册路由

需求场景：
在日常的功能练习和调试过程中，需要一个demo项目进行功能测试，由于频繁.vue页面的同时，又要再router.js文件里面注册路由，感觉有点无聊和枯燥。基于此出发点，考虑能否自...

2021-05-30 22:54:55

77浏览

0评论

vue中watch的用法汇总

在vue中，使用watch来响应数据的变化。watch的用法大致有三种。1. 常用用法<input type="text" v-model="name"/>new Vue({ el: '#app', data: { name: '咸鱼' }, watch: {...

2021-05-30 22:54:53

325浏览

0评论

vue实现图书管理系统

本文实例为大家分享了vue实现图书管理系统的具体代码，供大家参考，具体内容如下组件代码<template> <div id="app"> <div class="grid"> <div> <h1>图书管理</h1> <di...

2021-05-30 22:54:51

91浏览

0评论

Vue3 实现双盒子定位Overlay的示例

在 Vue 3 中，使用 <Teleport> 可以很优雅的把某个组件渲染到根节点之外的节点，同时使其渲染的内容不丧失响应式和对应的生命周期函数调用。那么基于此，用 <Teleport> 实现相对...

2021-05-30 22:54:50

210浏览

0评论

vue实现登录、注册、退出、跳转等功能

本文给大家介绍vue实现登录、注册、退出、跳转功能，具体代码如下所示:效果图1：效果图2：效果图3：效果图4：完整实例：<!DOCTYPE html><html> <head> <meta charset="GBK"> <ti...

2021-05-30 22:54:48

70浏览

0评论

Vue+penlayers实现多边形绘制及展示

本文实例为大家分享了Vue+penlayers实现多边形绘制展示代码，供大家参考，具体内容如下<!-- * @Description: 绘制多边形 * @Author: Dragon * @Date: 2020-12-17 16:02:06 * @L...

2021-05-30 22:54:47

83浏览

0评论

vue 实现基础组件的自动化全局注册

参考官网：https://cn.vuejs.org/v2/guide/components-registration.html在日常开发中，有一些组件是比较常用，但是为了避免在开发过程中不停地引入，或者在main.js中注册，，或者每添...

2021-05-30 22:54:45

77浏览

0评论

Vue 简单实现前端权限控制的示例

简要说明
最近写了一下vue控制权限(菜单、路由)的项目，用了vuex、addRoutes动态添加路由方法等，总共100多行代码，跟大家分享一下~逻辑梳理
除登录接口、退出接口外，其余接口增...

2021-05-30 22:54:44

80浏览

0评论

vue3.0自定义指令（drectives)知识点总结

在大多数情况下，你都可以操作数据来修改视图，或者反之。但是还是避免不了偶尔要操作原生 DOM，这时候，你就能用到自定义指令。举个例子，你想让页面的文本框自动聚焦，在没有学习自定...

2021-05-30 22:54:43

88浏览

0评论

vue下拉刷新组件的开发及slot的使用详解

“下拉刷新”和“上滑加载更多”功能在前端、尤其是移动端项目中非常重要，这里笔者由曾经做过的vue项目中的“blink”功能和各位探讨下【下拉刷新】组件的开发：正式开篇在前端...

2021-05-30 22:54:39

88浏览

0评论

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 22:54:37

85浏览

0评论

vue 使用class创建和清除水印的示例代码

页面添加水印的方法有很多，以下举例使用class定义的方法进行水印内容渲染：1、新建文件：WatermarkClass.jsexport default class WatermarkClass { constructor({id="watermark...

2021-05-30 22:54:36

141浏览

0评论

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

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

2021-05-30 22:54:35

69浏览

0评论

浅析vue中的nextTick

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

2021-05-30 22:54:34

117浏览

0评论

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

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

2021-05-30 22:54:33

124浏览

0评论

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

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

2021-05-30 22:54:32

71浏览

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 22:54:30

75浏览

0评论

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

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

2021-05-30 22:54:29

57浏览

0评论

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

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

2021-05-30 22:54:25

61浏览

0评论

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

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

2021-05-30 22:54:24

80浏览

0评论

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

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

2021-05-30 22:54:22

104浏览

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 22:54:20

101浏览

0评论

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

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

2021-05-30 22:54:19

60浏览

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 22:54:18

73浏览

0评论

vue3弹出层V3Popup实例详解

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

2021-05-30 22:54:17

79浏览

0评论

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

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

2021-05-30 22:53:56

93浏览

0评论

Vue实现简易购物车页面

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

2021-05-30 22:53:53

78浏览

0评论

Vue中inheritAttrs的使用实例详解

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

2021-05-30 22:53:42

64浏览

0评论

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

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

2021-05-30 22:53:40

63浏览

0评论

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

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

2021-05-30 22:53:38

95浏览

0评论

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

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

2021-05-30 22:53:36

136浏览

0评论

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

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

2021-05-30 22:53:35

108浏览

0评论

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

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

2021-05-30 22:53:19

90浏览

0评论

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

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

2021-05-30 22:53:17

84浏览

0评论

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

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

2021-05-30 22:53:15

80浏览

0评论

梳理一下vue中的生命周期

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

2021-05-30 22:53:13

284浏览

0评论

element 动态合并表格的步骤

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

2021-05-30 22:53:09

199浏览

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 22:53:06

首页 «806 807808809 810 »尾页

热门文章