202009-30 详解Vue 数据更新了但页面没有更新的 7 种情况汇总及延伸总结 如果你发现你自己需要在Vue中做一次强制更新,99.9%的情况,是你在某个地方做错了事。1.Vue无法检测实例被创建时不存在于data中的property原因:由于Vue会在初始化实例时对property执行getter/setter转化,所以property必须在data对象上存在才能让Vue将它转换为响应式的。场景:varvm=newVue({data:{},//页面不会变化template:'<div>{{message}}</div>'})vm.message='Hello!'//`vm.message`不是... 继续阅读 >
202009-30 详解Vue 数据更新了但页面没有更新的 7 种情况汇总及延伸总结 如果你发现你自己需要在Vue中做一次强制更新,99.9%的情况,是你在某个地方做错了事。1.Vue无法检测实例被创建时不存在于data中的property原因:由于Vue会在初始化实例时对property执行getter/setter转化,所以property必须在data对象上存在才能让Vue将它转换为响应式的。场景:varvm=newVue({data:{},//页面不会变化template:'<div>{{message}}</div>'})vm.message='Hello!'//`vm.message`不是... 继续阅读 >
202009-30 Vue实现附件上传功能 本文实例为大家分享了Vue实现附件上传的具体代码,供大家参考,具体内容如下前言前端UI是用的是element-ui的上传功能本文主要记录下代码,方便下次复制粘贴前端部分HTMLlimit:限制文件个数1个on-remove:移除附件时的钩子函数,主要就console输出下on-error:用于处理上传异常后的处理,本人这主要用来关闭弹窗和全屏等待file-list:绑定附件auto-upload:禁止自动上传,true的话选了文件就自动上传htt... 继续阅读 >
202009-30 vue实现五子棋游戏 本文实例为大家分享了vue实现五子棋游戏的具体代码,供大家参考,具体内容如下思路1.vue实现五子棋空棋盘开局。画网格:网格有15行15列,共有225个交叉点黑先、白后,交替下子,每次只能下一子胜负判定按照简单的规则,从当前下子点位的方向判断()。如果有一个方向满足连续5个黑子或白子,游戏结束。2.支持dom和canvas切换判断浏览器是否支持canvas:false:不支持切换dom方式true: 支持使用canvas3.实现悔棋功能4.... 继续阅读 >
202009-30 用vue 实现手机触屏滑动功能 功能:iviewCarousel走马灯,我需要在phone上实现滑动切换功能。<divclass="phone"@touchstart="phone_mouseS"@touchend="phone_mouseE"><Carousel:autoplay-speed="5000"v-model="phone_mouseMIndex"autoplay:value="0"loopv-if="menuChoose=='/'"><CarouselItem><imgclass="img"src="../../static/common/phone_banner_index1.jpg"/></CarouselItem><CarouselItem><imgclass="img"src="../../static/comm... 继续阅读 >
202009-30 基于Vue CSR的微前端实现方案实践 在这里就不讲微前端的各种优缺点,直接假设你在负责一个中后台管理系统的开发,所有的业务模块全部都在一个项目中打包,随着业务量的不断增长,编译越来越慢,你期望可以从老的项目中将新的业务进行独立开发、独立部署,以微应用的形式嵌入到老项目中。本篇文章的受众是那些希望在新老的项目中,在不需要你对老项目进行改动老项目的前提下,嵌入微应用,如果本篇文章对你有帮助,请点个:+1:!核心要素构建生产环境代码,输出远程... 继续阅读 >
202009-29 vue输入框使用模糊搜索功能的实现代码 实现原理:利用js的indexOf方法可返回某个指定的字符串值在字符串中首次出现的位置。模板中的代码<divclass="search"><!--输入框使用的是vant的输入框组件--><van-search@input="autoSearch"v-model="value"placeholder="请输入搜索关键词"style="width:90%;display:inline-block;"/><span>搜索</span></div><!--展示数据--><ulv-for="(item)inallArea":key="item.communityId"><liv-if="allNewArea.length... 继续阅读 >
202009-29 vue实现图片上传功能 本文实例为大家分享了vue实现图片上传功能的具体代码,供大家参考,具体内容如下先看效果图片上传使用vant组件库中的van-uploader,使用方法参考官网vant组件库下面看代码UploadPicture.vue<template><divclass="content"><!--底部模块start--><divclass="bottom_bg"><pclass="flexstpt8">上传图片</p><divclass="upload_bg"><divv-for="(item,index)inthis.remUploadImgUrls"><imgclass="showimg":src="item... 继续阅读 >
202009-29 SpringBoot +Vue开发考试系统的教程 一、考试系统简介新鲜出炉的一款SpringBoot+Vue的考试系统,支持多种题型:选择题、多选题、判断题、填空题、综合题以及数学公式。支持在线考试,教师在线批改试卷。二、项目架构后端技术栈SpringBoot:SpringBoot是由Pivotal团队提供的全新框架,其设计目的是用来简化Spring应用的创建、运行、调试、部署等。Mybatis:一个持久层的框架,与数据库进行交互,将数据持久化到关系型数据库中Shiro:一个功能强大且易于使用的Java... 继续阅读 >
202009-29 vue实现简单跑马灯效果 本文实例为大家分享了vue实现简单跑马灯效果的具体代码,供大家参考,具体内容如下如下图片,会自行向 上“滚动”代码:<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>跑马灯</title><scriptsrc="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.min.js"></script><style>div,ul,li,img{margin:0;padding:0;box-sizing:border-box;display:flex;}.horseLamp{widt... 继续阅读 >
202009-29 Vue实现简单的跑马灯 Vue实现滚动字条/跑马灯,供大家参考,具体内容如下内容不多,直接看代码吧<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title><scriptsrc="../../资料/js/vue.js"></script><!--引入Vue--></head><style>*{text-align:center;}</style><body><divid="app"><h1>{{txt}}</h1><button@click="run">开始</button><button@click="stop">停止</button></div></body></html... 继续阅读 >
202009-29 Vue实现跑马灯效果 本文实例为大家分享了Vue实现跑马灯效果的具体代码,供大家参考,具体内容如下实现的业务逻辑1、给[嗨起来]按钮,绑定一个点击事件v-on(@)。2、在按钮的事件函数处理中,写相关的业务逻辑:拿到msg的字符串,后调用字符串中的substring来进行字符串的截取操作,放到最后一个位置。3、为了实现点击下按钮,自动截取功能,需要将步骤2中代码放到一个定时器中。实现代码如下:<!DOCTYPEhtml><htmllang="en"><head><metacharset... 继续阅读 >
202009-29 如何使用vue slot创建一个模态框的实例代码 【1】遮罩层:承载内容,管理样式布局。【2】内容层:控制遮罩层的显示与否。遮罩层和内容区之间应该解耦。遮罩层和内容区之间应该解耦。遮罩层和内容区之间应该解耦。遮罩层不依赖于内容区,内容是放置在遮罩层里的,至于内容区里的内容是什么,遮罩层完全不用在意。因此可以在遮罩层里采用插槽。遮罩层的实现<divclass="common-mask"v-if="visible"><slotname="head"></slot><slotname="body"></slot><slotname="foot">... 继续阅读 >
202009-29 vue+canvas实现移动端手写签名 本文实例为大家分享了vue+canvas实现移动端手写签名的具体代码,供大家参考,具体内容如下<template><divclass="sign"><divclass="header"><iclass="el-icon-arrow-leftbackImg"@click="goBack"></i><spanclass="title">个人签名</span></div><sectionclass="signature"><divclass="signatureBox"><divclass="canvasBox"ref="canvasHW"><canvasref="canvasF"class="canvasStyle"@to... 继续阅读 >
202009-29 基于canvas实现手写签名(vue) 最近一直在研究canvas的东西,正好之前对手写签名这块有点兴趣。就自己基于vue写了一个简易的手写签名demo。其中原理比较简单,先生成一个canvas画布,并对canvas进行touchstart和touchmove事件进行监听。当监听touchstart事件被触发时,我们开始触发canvas里的beginPath事件并且设置moveTo原始点。当监听touchmove事件则去不断去触发lineTo事件,最后stroke()。demo里还有清除签名和保存签名的功能,分别对应了clearRect()和toDat... 继续阅读 >
202009-29 vue+Element中table表格实现可编辑(select下拉框) 最近在工作中遇到一个问题,需要在表格中实现数据可编辑状态,具体情况是需要在单元格里加入下拉框;并且每个下拉框的数组数据是不一样的,具体是根据当前行前面数据的id查询而来,前面的是数据是动态生成的,后面的下拉框数据也是根据id动态生成的,内容不同;有点类似于树形二级状态,后面的下拉框数据来源并没有在前面内容里,而是另外一个接口查询,具体操作如下:HTML代码:1.在处理人列加入一个下拉框模板,其中v-model必须... 继续阅读 >