草庐IT

vue-elementul

全部标签

javascript - 如何使用 Vue JS 遍历数组的值?

我正在使用Laravel5.3进行开发。我也在使用分形。我还将axios作为Http客户端来执行Ajax请求。如果我发送获取请求以显示所有椅子api。我返回时显示如下:我正在使用VueJS2将值解析为htmlView。ChairsController.phppublicfunctionindex(){$chairs=Chair::paginate(25);//Returnacollectionof$chairwithpaginationreturn$this->response->withPaginator($chairs,newChairTransformer());}app-vue

解决 vue 项目开发越久 node_modules包越大的问题

vue每次编译都会将编译后的文件缓存在node_modules/.cache里面,因此需要在vue.config.js配置取消缓存compression-webpack-plugin禁止缓存constCompressionPlugin=require("compression-webpack-plugin");module.exports={plugins:[newCompressionPlugin({cache:false,//取消缓存algorithm:"gzip",filename:"[path].gz[query]",test:/\.(js|css|woff|woff2|json|tx

Vue3 实现一个无缝滚动组件(支持鼠标手动滚动)

Vue3实现一个无缝滚动组件(支持鼠标手动滚动)前言在日常开发中,经常遇到需要支持列表循环滚动展示,特别是在数据化大屏开发中,无缝滚动使用频率更为频繁,在jquery时代,我们常用的无缝滚动组件为liMarquee,在vue中已经有vue-seamless-scroll组件(通过Vue2实现,不支持鼠标手动滚动),但是在使用过程中,发现滚动后会存在点击事件失效的问题,并且产品提了个需求,需要支持鼠标手动滚动,也要支持自动滚动,于是痛定思痛,决定通过Vue3来实现该功能,该组件已经实现上传npm,可以直接安装使用,链接在文尾。实现html部分首先写一个基础的list结构,通过插槽接收外部传入的l

vue+axios 向后端SpringBoot传递List 后端使用List接收

困扰了一天的问题第二天终于解决了!一开始是这样向后端传的:(主要看后面的seats)letlist=[];//筛选出选择的座位排和列info.forEach((item)=>{list.push({row:item.row,col:item.col});});this.$axios.post('seat/updateEmpty?cinemaId='+this.cinemaId+'&hallId='+this.hallId+'&seats='+list).then(resp=>{if(resp.data.code==200){this.seatList=resp.data.data}})结果报错

vue3鼠标拖拽滑动效果

第一步在utils下面新建一个directives.js文件,然后引入如下代码constdragscroll=(el)=>{el.onmousedown=ev=>{constdisX=ev.clientX;constdisY=ev.clientY;//需要上下移动可以加constoriginalScrollLeft=el.scrollLeft;constoriginalScrollTop=el.scrollTop;//需要上下移动可以加constoriginalScrollBehavior=el.style['scroll-behavior'];constoriginalPointerEven

vue项目上线后去除控制台所有console.log打印-配置说明

 方式一npmibabel-plugin-transform-remove-console--save-devbabel.config.js文件中添加//然后在babel.config.js中添加判断constprodPlugin=[]if(process.env.NODE_ENV==='production'){//如果是生产环境,则自动清理掉打印的日志,但保留error与warnprodPlugin.push(['transform-remove-console',{//保留console.error与console.warnexclude:['error','warn']}])}modu

vue-3

一、文章内容概括1.生命周期生命周期介绍生命周期的四个阶段生命周期钩子声明周期案例2.工程化开发入门工程化开发和脚手架项目运行流程组件化组件注册二、Vue生命周期思考:什么时候可以发送初始化渲染请求?(越早越好)什么时候可以开始操作dom?(至少dom得渲染出来)Vue生命周期:就是一个Vue实例从创建到销毁的整个过程。生命周期四个阶段:①创建②挂载③更新④销毁1.创建阶段:创建响应式数据2.挂载阶段:渲染模板3.更新阶段:修改数据,更新视图4.销毁阶段:销毁Vue实例三、Vue生命周期钩子Vue生命周期过程中,会自动运行一些函数,被称为【生命周期钩子】→让开发者可以在【特定阶段】运行自己的代

npm install -g @vue/cli报错

如果在安装@vue/cli时遇到错误,可以尝试以下步骤解决:确保你的npm版本是最新的,可以使用"npminstallnpm@latest-g"升级使用"sudonpminstall-g@vue/cli"安装,因为有时需要超级用户权限重启电脑后再尝试安装清理npmcache:"npmcacheclean--force"卸载已安装的@vue/cli:"npmuninstall-g@vue/cli",再重新安装如果仍然无法解决,可以尝试搜索错误代码,或在社区中寻求帮助。

vue鼠标移入显示弹窗,移出隐藏弹窗,记录一下

鼠标移入A弹出B,移出A隐藏B,A:B: 逻辑:letflg=trueexportdefault{name:'',components:{},data(){return{isShow:false,}},methods:{//鼠标移入1onMouseOverO(item){this.isShow=true},//鼠标移出1onMouseOutO(){setTimeout(()=>{if(flg){this.isShow=false}},1)},//鼠标移入2onMouseOverT(){flg=false},//鼠标移出2onMouseOutT(){flg=truethis.isShow=fal

vue项目使用lodash节流防抖函数问题与解决

背景在lodash函数工具库中,防抖_.debounce和节流_.throttle函数在一些频繁触发的事件中比较常用。防抖函数_.debounce(func,[wait=0],[options=])创建一个debounced(防抖动)函数,该函数会从上一次被调用后,延迟 wait 毫秒后调用 func 方法。参数func (Function):要防抖动的函数。[wait=0] (number):需要延迟的毫秒数。[options=] (Object):选项对象。[options.leading=false] (boolean):指定在延迟开始前调用。[options.maxWait] (num