分类：vue

2022
04-20

浅谈Vue的组件间传值(包括Vuex)

浅谈Vue的组件间传值(包括Vuex) 目录父传子:子传父:在不使用Vuex的情况下，组件间传值的方式是通过父传子的方式或者兄弟组件传值。父传子:fatherComponent:<template><div><HELLOWORLD:needData="content"></HELLOWORLD></div></template><script>importHELLOWORLDfrom'../components/HelloWorld.vue'exportdefault{components:{HELLOWORLD},data(){return{content:"content"}}}</scr... 继续阅读 >
2022
04-16

vue自定义可选时间的日历组件

本文实例为大家分享了vue自定义可选时间日历组件的具体代码，供大家参考，具体内容如下日历功能：1、过去时间不可选择2、可自定义不可选时间3、本月默认展示当天，其他月展示第一天，若为不可选时间，往后顺延效果图：-------下面开始表演-----------**首先，画出日历页面布局，参照win10系统日历布局*6行7列，为何如此，请自行理解…*本人也是“偷窥”来的beginDay是当前月第一天的周几，prevMdays是上个月总天数，nowMdays是当月... 继续阅读 >
2022
04-16

Vue2.x响应式简单讲解及示例

一、回顾Vue响应式用法​vue响应式，我们都很熟悉了。当我们修改vue中data对象中的属性时，页面中引用该属性的地方就会发生相应的改变。避免了我们再去操作dom，进行数据绑定。二、Vue响应式实现分析对于vue的响应式原理，官网上给了出文字描述https://cn.vuejs.org/v2/guide/reactivity.html。vue内部主要是通过数据劫持和观察者模式实现的数据劫持：vue2.x内部使用Object.definePropertyhttps://developer.mozilla.org/... 继续阅读 >
2022
04-12

vue中调用百度地图获取经纬度的实现

vue中调用百度地图获取经纬度的实现 项目中，需要实现获取当前位置的经纬度，或者搜索某个位置并获取经纬度信息，我使用的的是vue，地图使用的是百度地图。默认自动获取当前位置经纬度拖动小红标获取经纬度关键词查询获取经纬度前期准备首先，我们需要取百度官方申请一个地图api秘钥，https://lbsyun.baidu.com/apiconsole/key 进入后在应用管理，我的应用去申请即可。申请好以后，我们打开vue项目中public文件下的index.html文件，拼接百度AK值并引入<script... 继续阅读 >
2022
04-06

vue 中使用 vxe-table 制作可编辑表格的使用过程

vue 中使用 vxe-table 制作可编辑表格的使用过程 项目上有一个表格需要实现在线编辑，开始用了element的el-table实现，单元格内基础情况就是监听了单击单元格切换一个span标签与input标签，复杂点的单元格使用了大量的条件判断来实现对应的编辑操作，比如下拉选，popover弹框编辑。整个表格几十列，十几条数据就已经出现了明显的卡顿，在做了诸多操作（比如el-input使用原生input替换、减少判断、减少频繁的数据切换等）之后，速度虽然有所提升，但是还是肉眼可见的卡顿，基本... 继续阅读 >
2022
04-06

springboot+vue实现验证码功能

本文实例为大家分享了springboot+vue实现验证码功能的具体代码，供大家参考，具体内容如下1.工具类直接用不用改packagecom.example.demo.Util;importorg.slf4j.Logger;importorg.slf4j.LoggerFactory;importjavax.imageio.ImageIO;importjavax.servlet.http.HttpServletRequest;importjavax.servlet.http.HttpServletResponse;importjavax.servlet.http.HttpSession;importjava.awt.*;importjava.awt.image.BufferedImag... 继续阅读 >
2022
04-06

如何使用Vue的思想封装一个Storage

目录背景功能目的想法来源实现setgetdeletePropertypreventExtensionshas总结背景localStorage、sessionStorage这两个API是我们前端日常开发中的存储的利器，我们经常会使用它们存储一些数据。我们日常在对他们进行操作的时候，对localStorage、sessionStorage的使用一般是直接：localStorage.setItem(xxx,xxx);sessionStorage.setItem(xxx,xxx);localStorage.getItem(xxx);sessionStorage.getItem(xxx);或者有的同学还会... 继续阅读 >
2022
03-17

vue+js实现视频淡入淡出效果

vue+js实现视频淡入淡出效果 vue+js实现视频的淡入淡出，供大家参考，具体内容如下一个简单的视频淡入淡出效果如图小编直接上代码了有兴趣可以拷贝运行一下，谢谢<template><divclass="video-css"><divclass="videocss"ref="videodom"style="background-color:black;"><videowidth="100%"ref="play"style="opacity:1":src="videoSrc2"></video></div><divclass="video-but"><el-buttontype="primary"@click="play()">播... 继续阅读 >
2022
03-17

vue+canvas绘制时间轴的方法

vue+canvas绘制时间轴的方法 本文实例为大家分享了vuecanvas绘制时间轴的具体代码，供大家参考，具体内容如下最近在研究canvas绘制时间轴，直接上代码，希望分享能给大家带来帮助，效果如下：代码如下，可以拷贝到vue项目中直接预览<template><div><canvasid="time_line"width="1200"height="27"></canvas></div></template><script>exportdefault{name:'pathwaytrack',data(){return{screenWidth:document.body.clientWidth... 继续阅读 >
2022
03-16

vue+swiper实现时间轴效果

vue+swiper实现时间轴效果 本文实例为大家分享了vue+swiper实现时间轴效果的具体代码，供大家参考，具体内容如下效果：首先引入，有淘宝镜像的用cnpminstallswiper--save没有的用npminstallswiper--save<template><divclass="hello"style="height:100%;width:100%;position:relative;"><divclass="swiperlist"><divclass="swipers"><divclass="swiper-container"><divclass="swiper-wrapper"><div... 继续阅读 >
2022
03-16

vue使用WebSocket模拟实现聊天功能

vue使用WebSocket模拟实现聊天功能 效果展示两个浏览器相互模拟1.创建模拟node服务在vue根目录下创建server.js文件模拟后端服务器**在server终端目录下载**npminstall--sws2.编写server.js文件代码如下varuserNum=0;//统计在线人数varchatList=[];//记录聊天记录varWebSocketServer=require('ws').Server;wss=newWebSocketServer({port:8181});//8181与前端相对应//调用broadcast广播，实现数据互通和实时更新wss.broadcast=function(... 继续阅读 >
2022
03-14

vue中使用TypeScript的方法

vue中使用TypeScript的方法 引言近几年前端对TypeScript的呼声越来越高，Typescript也成为了前端必备的技能。TypeScript是JS类型的超集，并支持了泛型、类型、命名空间、枚举等特性，弥补了JS在大型应用开发中的不足。在单独学习TypeScript时，你会感觉很多概念还是比较好理解的，但是和一些框架结合使用的话坑还是比较多的，例如使用React、Vue这些框架的时候与TypeScript的结合会成为一大障碍，需要去查看框架提供的.d.ts的声明文件中一些复杂类... 继续阅读 >