JavaScript - 教程之家

31浏览

0评论

Vue 组件注册全解析

全局组件注册语法components中的两个参数组件名称和组件内容Vue.component(组件名称, { data: 组件数据, template:组件模板内容 })全局组件注册应用组件创建：Vue.compo...

2021-05-30

38浏览

0评论

vue 使用rules对表单字段进行校验的步骤

在实际开发过程中，发现以下的写法比较累赘，因为在后面的项目中，继续优化表单验证的方法，让代码更简洁。主要的修改是验证方法的修改和调用以前验证表单字段的最大长度，descriptio...

2021-05-30

71浏览

0评论

解决elementui表格操作列自适应列宽

业务需要前端根据用户权限动态显示对应按钮，直接把操作列的列宽写死的话，在按钮少的情况下不是那么好看，所以想到了一个骚操作...写死宽度时是这样的：开始给操作列绑定宽度属性:...

2021-05-30

94浏览

0评论

Vue通过阿里云oss的url连接直接下载文件并修改文件名的方法

我测试过很多遍,想要通过a标签的形式来直接点击url下载文件并重命名但是都失败了,最终只能下载却不能重命名所以换了java后台来修改名字.以下代码我做的网页是点击文件直...

2021-05-30

43浏览

0评论

vue 使用 sortable 实现 el-table 拖拽排序功能

本文给大家介绍vue 使用 sortable 实现 el-table 拖拽排序功能，具体内容如下所示：npm 下载：npm install sortablejs --save引入：import Sortable from "sortablejs";代码：<templa...

2021-05-30

38浏览

0评论

Vue仿百度搜索功能

简述学习vue的第二节，由于2.0版本并不向下兼容，视频中的不少内不能实现。下面列出一些主要知识点// v-on 可简写为@// 事件冒泡是指当点击div内部的button触发show1()时，必然会...

2021-05-30

41浏览

0评论

Vue.extend 登录注册模态框的实现

模态框是我们 UI 控件中一个很重要的组件，使用场景有很多种，我们在 Vue 组件中创建模态框组件而用到的一个知识点是利用 Vue.extend 来创建。文档中的解释是在最近在做一个常...

2021-05-30

56浏览

0评论

详解Vue的异步更新实现原理

最近面试总是会被问到这么一个问题：在使用vue的时候，将for循环中声明的变量i从1增加到100，然后将i展示到页面上，页面上的i是从1跳到100，还是会怎样？答案当然是只会显示100，并不会有...

2021-05-30

52浏览

0评论

全面解析Vue中的$nextTick

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

2021-05-30

66浏览

0评论

vue项目中openlayers绘制行政区划

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

2021-05-30

90浏览

0评论

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

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

2021-05-30

56浏览

0评论

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

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

2021-05-30

44浏览

0评论

Vue实现省市区三级联动

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

2021-05-30

68浏览

0评论

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

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

2021-05-30

61浏览

0评论

Vue实现随机验证码功能

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

2021-05-30

88浏览

0评论

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

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

2021-05-30

64浏览

0评论

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

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

2021-05-30

70浏览

0评论

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

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

2021-05-30

106浏览

0评论

vue+openlayers绘制省市边界线

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

2021-05-30

82浏览

0评论

vant时间控件使用方法详解

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

2021-05-30

82浏览

0评论

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

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

2021-05-30

50浏览

0评论

vue中watch的用法汇总

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

2021-05-30

285浏览

0评论

vue实现图书管理系统

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

2021-05-30

59浏览

0评论

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

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

2021-05-30

193浏览

0评论

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

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

2021-05-30

45浏览

0评论

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

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

2021-05-30

63浏览

0评论

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

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

2021-05-30

54浏览

0评论

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

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

2021-05-30

55浏览

0评论

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

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

2021-05-30

53浏览

0评论

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

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

2021-05-30

65浏览

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

56浏览

0评论

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

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

2021-05-30

115浏览

0评论

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

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

2021-05-30

45浏览

0评论

浅析vue中的nextTick

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

2021-05-30

94浏览

0评论

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

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

2021-05-30

101浏览

0评论

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

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

2021-05-30

49浏览

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

57浏览

0评论

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

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

2021-05-30

45浏览

0评论

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

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

2021-05-30

47浏览

0评论

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

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

2021-05-30

61浏览

0评论

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

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

2021-05-30

89浏览

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

80浏览

0评论

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

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

2021-05-30

41浏览

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

52浏览

0评论

vue3弹出层V3Popup实例详解

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

2021-05-30

58浏览

0评论

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

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

2021-05-30

81浏览

0评论

Vue实现简易购物车页面

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

2021-05-30

44浏览

0评论

Vue中inheritAttrs的使用实例详解

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

2021-05-30

48浏览

0评论

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

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

2021-05-30

50浏览

0评论

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

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

2021-05-30

热门文章