分类：Vue

2020
10-10

vue 虚拟DOM的原理

为什么需要虚拟DOM？如果对前端工作进行抽象的话，主要就是维护状态和更新视图，而更新视图和维护状态都需要DOM操作。其实近年来，前端的框架主要发展方向就是解放DOM操作的复杂性。运行js的速度是很快的，大量的操作DOM就会很慢，时常在更新数据后会重新渲染页面，这样造成在没有改变数据的地方也重新渲染了DOM节点，这样就造成了很大程度上的资源浪费。在jQuery出现以前，我们直接操作DOM结构，这种方法复杂度高，... 继续阅读 >
2020
10-10

vue使用video插件vue-video-player的示例

一、安装插件npminstallvue-video-player--save二、配置插件在main.js中全局配置插件importVideoPlayerfrom'vue-video-player'require('video.js/dist/video-js.css')require('vue-video-player/src/custom-theme.css')Vue.use(VideoPlayer)三、使用插件在vue组件中的程序如下：<template><!--在视频外面加一个容器--><divclass="input_video"><video-playerclass="video-playervjs-custom-skin"... 继续阅读 >
2020
10-10

Vue双向数据绑定(MVVM)的原理

MVVMMVVM是Model-View-ViewModel的缩写，它是一种基于前端开发的架构模式，其核心是提供对View和ViewModel的双向数据绑定，这使得ViewModel的状态改变可以自动传递给View，即所谓的数据双向绑定。Vue.js是一个提供了MVVM风格的双向数据绑定的Javascript库，专注于View层。它的核心是MVVM中的VM，也就是ViewModel。ViewModel负责连接View和Model，保证视图和数据的一致性，这种轻量级的架构让前端开... 继续阅读 >
2020
10-10

在Vue里如何把网页的数据导出到Excel的方法

在Vue里如何把网页的数据导出到Excel的方法 前言：在做后台管理的时候，我们往往有需要把网页上面的数据导出到excel这样的需求，真实的企业项目里对应一些导出财务报表、员工信息、交易记录、考勤打卡记录…等等需求，本文将对此做探讨。开始前补充：网上是有些牛人已经把这个功能封装成组件了，但每个人的封装逻辑五花八门，组件的功能也很有限，不一定真能完全符合自己的业务需求，找相应的API也很麻烦，存在不太敢用，不会用等问题，那么本文将教你如何自己封装，如何自... 继续阅读 >
2020
10-10

在Vue里如何把网页的数据导出到Excel的方法

在Vue里如何把网页的数据导出到Excel的方法 前言：在做后台管理的时候，我们往往有需要把网页上面的数据导出到excel这样的需求，真实的企业项目里对应一些导出财务报表、员工信息、交易记录、考勤打卡记录…等等需求，本文将对此做探讨。开始前补充：网上是有些牛人已经把这个功能封装成组件了，但每个人的封装逻辑五花八门，组件的功能也很有限，不一定真能完全符合自己的业务需求，找相应的API也很麻烦，存在不太敢用，不会用等问题，那么本文将教你如何自己封装，如何自... 继续阅读 >
2020
10-10

VUE Elemen-ui之穿梭框使用方法详解

VUE Elemen-ui之穿梭框使用方法详解 本文实例为大家分享了VUEElemen-ui之穿梭框使用方法，供大家参考，具体内容如下背景：现在需要使用穿梭框实现，角色的操作功能需要使用ElementTransfer穿梭框HTML代码：<template><el-cardclass="box-card"shadow="never"style="height:700px;"><divslot="header"class="clearfix"style="height:25px"><divstyle="float:left"><spanclass="titel_font">角色操作</span></div><divstyle="float:right"><el-bu... 继续阅读 >
2020
10-10

vue实现井字棋游戏

vue实现井字棋游戏 本文实例为大家分享了vue实现井字棋游戏的具体代码，供大家参考，具体内容如下之前看react的教程时看到的小游戏，试着用vue做一个。右边的winner提示胜者，还没有胜者时提示下一个棋子的种类。restart按钮点击可重新开始。gotostep可跳转到第n步。html：<divid="app"><ulid="board"class="whitenormal"><liclass="square"v-for="i,idxindatas"@click=set(idx)>{{i}}</li></ul><divid="console"><divid="hint"c... 继续阅读 >
2020
10-10

vue 验证两次输入的密码是否一致的方法示例

好记性不如烂笔头。总也记不住<el-form:model="ruleForm":rules="rules"ref="ruleForm"label-width="100px"class="demo-ruleForm"><el-form-itemlabel="新密码"prop="newPwd"><el-inputv-model="ruleForm.newPwd"clearablesize="small"type="password"></el-input></el-form-item><el-form-itemlabel="确认密码"prop="confirmPwd"><el-inputv-model="ruleForm.confirmPwd"cle... 继续阅读 >
2020
10-10

Vue中父子组件的值传递与方法传递

一.Vue中父组件向子组件传值利用v-bind向子组件传值，子组件中利用props接受<divid="app"><father></father></div><templateid="father"><div><!--注意点:组件是可以使用自己的数据的--><p>{{name}}</p><p>{{age}}</p><!--这里将父组件的name通过parentname传递给了子组件--><son:parentname="name":abc="age"></son></div></template><templateid="son"><div><!--这里通过parentname使用了... 继续阅读 >
2020
10-10

VUE 项目在IE11白屏报错 SCRIPT1002: 语法错误的解决

问题现象项目使用vue/cli3脚手架搭建的前端项目，vue版本为2.6.10。browserslist的配置如下：[">1%","last2versions"]但开发环境的IE11打开显示白屏，F12打开显示：分析过程5306行显示"./node_modules/_debug@4.1.1@debug/src/browser.js"这个路径报错，由于eval()包含的代码中有ES6的语法，IE不支持，查了网上很多资料都说使用babel-polyfill来解决。现象一：IE不支持ES6语法VuexrequiresaPromisepolyfillinthisbr... 继续阅读 >
2020
10-10

vue+elementUI 实现内容区域高度自适应的示例

步骤很简单：通过动态绑定属性给<el-main></el-main>绑定高度，而高度通过innerHeight获取，减去你的头部和底部高度，剩下的就是整个内容区域的高度了！话不多说，上代码//defaultHeight是绑定的属性<el-main:style="defaultHeight"><router-view/></el-main>//注意：这里的defaultHeight必须是对象，不懂的可以去官网看下apidata(){return{defaultHeight:{height:""}};},methods:{//定义方法... 继续阅读 >
2020
10-10

vue-openlayers实现地图坐标弹框效果

vue-openlayers实现地图坐标弹框效果 本文实例为大家分享了vue-openlayers实现地图坐标弹框的具体代码，供大家参考，具体内容如下openlayers这个效果是点击地图，弹出坐标信息。点击地图边缘时，底图会跟着移动，使弹窗能完整显示出来。<template><divclass="vm"><h2class="h-title">弹窗popup</h2><divid="map"class="map-x"></div><!--弹窗元素--><divclass="popup"ref="popup"v-show="currentCoordinate"><spanclass="icon-close"... 继续阅读 >
2020
10-10

vue集成openlayers加载geojson并实现点击弹窗教程

本文实例为大家分享了vue+openlayers加载geojson并实现点击弹窗教程，供大家参考，具体内容如下第一步：安装vue-clicnpminstall-g@vue/cli第二步：新建一个项目1.新建项目（vue-openlayers为项目名）,并选择default模版vuecreatevue-openlayers2.安装openlayerscnpmi-Sol第三步：写业务代码1.删除掉HelloWorld.vue新建olmap.vue组件components/olmap.vue代码：<template><divid="map"ref="rootmap"><divclass="vm... 继续阅读 >
2020
10-10

Vue+Openlayers自定义轨迹动画

Vue+Openlayers自定义轨迹动画 本文实例为大家分享了Vue+Openlayers实现轨迹动画的具体代码，供大家参考，具体内容如下<template><divclass="map-warp"><h3><ahref="https://openlayers.org/en/latest/examples/feature-move-animation.html?q=polyline"target="_bank">OpenlayersTrack</a></h3><divclass="progress-bar"><divclass="bar-box"><divclass="bar":style="{width:progress+'%'}"><span>{{progress}}%</span></div></div></d... 继续阅读 >
2020
10-10

jdk1.8+vue elementui实现多级菜单功能

jdk1.8+vue elementui实现多级菜单功能 前言：在学习谷粒商城的时候，在做分类维护树形菜单维护的功能中，项目中只讲了菜单三级树怎么实现，想拓展一下多级菜单，功能已实现，记录一下，有不对的地方欢迎指正。一、后端部分使用Jdk1.8的新特性Stream和lamada表达式,数据库的框架使用苞米豆的mybatisplus，话不多说，上代码1.新建ManyTree类，可封装成工具类importcom.atguigu.gulimall.product.entity.CategoryEntity;importcom.google.common.collect.Lists;import... 继续阅读 >