分类：VUE

2020
09-24

VUE实现Studio管理后台之鼠标拖放改变窗口大小

VUE实现Studio管理后台之鼠标拖放改变窗口大小 近期改版RXEditor，把改版过程，用到的技术点，记录下来。昨天完成了静态页面的制作，制作过程并未详细记录，后期已经不愿再补了，有些遗憾。不过工作成果完整保留在github上，地址：https://github.com/vularsoft/studio-ui这个项目下面的html-demo.html，便是静态文件。话不多说，今天就把昨天的HTML转化成VUE。先看效果：布局原理页面采用纯弹性盒子flexbox布局，无floatpostion等，页面分成如下几个区域：细实线描述的是各个... 继续阅读 >
2020
09-24

Vue+Vuex实现自动登录的知识点详解

在之前实现的版本中，如果你进行测试，可以看到在浏览器的localStorage中，确实里面有了我们加入的Authorization,而且如果没有登录的话，直接访问主页会进入登录页面。但其实有好几个问题并没有解决：一、我们所加的Authorzation其实并不是从服务器传过来的，而是自己的测试：只要服务器传过来了200的响应状态码，我们就自己加上固定的Authorization二、我们重新进入的时候，判断条件是只要有Authorization就可以直接进入了，但其... 继续阅读 >
2020
09-24

vue 自定义组件的写法与用法详解

vue 自定义组件的写法与用法详解 三个技能，父组件—>子组件传值（props）、子组件—>父组件传值（emit用来使这个独立的组件通过一些逻辑来融入其他组件中。举个具体点的例子，假如你要做一辆车，车轮是要封装的一个独立组件，props指的就是根据整个车的外形你可以给轮子设置一些你想要的且符合车风格的花纹，图案等；而$emit的作用则是让这些轮子能够和整辆车完美契合的运作起来。（1）使用props可以实现父子组件之间的传值（2）使用this.$emit()可是实现子组... 继续阅读 >
2020
09-24

vue请求数据的三种方式

vue请求数据的三种方式 请求数据的方式：vue-resource官方提供的vue的一个插件axiosfetch-jsonp一，vue-resource请求数据介绍：vue-resource请求数据方式是官方提供的一个插件使用步骤：1、安装vue-resource模块cnpminstallvue-resource--save加--save是为了在package.json中引用，表示在生产环境中使用。因为我们在日常开发中，如果我们要打包代码给其他人或者上传到github，又或者要发布代码时，package.json就是安装所需要的包。如果只在开... 继续阅读 >
2020
09-24

vue.js this.$router.push获取不到params参数问题

主要通过两种方式传参1.query方式传参和接受参数this.$router.push({path:'/xxx'query:{idname:id}})接收的方式：this.$route.query.id2.params方式传递参数this.$router.push({name:'路径名称'query:{idname:id}})接收的方式：this.$route.params.id代码this.$router.push({path:'/container',params:{url:this.func.url,},});在跳转后的页面中console.log(this.route)发现params是空的问题原因:用法错误,以... 继续阅读 >
2020
09-24

Vue axios与Go Frame后端框架的Options请求跨域问题详解

跨域问题可从前后两端分开排查：前端：Vue+axiosaxios请求头使用'Content-Type':'application/json'，并且在Header中设置了Authorization字段用于传递Token，参数未经Qs转码，使用以下代码测试登录接口：//为方便操作，已将axios实例挂载到this.$axios上this.$axios.post('/signin',{account:'',password:''}).then(res=>{console.log('成功：',res)}).catch(err=>{console.log('失败:',err)})... 继续阅读 >
2020
09-24

vue中改变滚动条样式的方法

写在前面：我是扬帆向海，这个昵称来源于我的名字以及女朋友的名字。我热爱技术、热爱开源、热爱编程。技术是开源的、知识是共享的。这博客是对自己学习的一点点总结及记录，如果您对Java、算法感兴趣，可以关注我的动态，我们一起学习。 用知识改变命运，让我们的家人过上更好的生活。今天在自己开发的一个项目中，需求是让浏览器的滚动轴变细。想了好长时间才完成，在目前的测试中，滚动条在IE浏览器中不支持。scrollba... 继续阅读 >
2020
09-24

vue倒计时刷新页面不会从头开始的解决方法

开启倒计时，直接保存到vuex中，且存储到本地持久化//state.jsconstrunTime=localStorage.getItem('time');paymentRunTime:runTime//mutations.jsTimeReduction(state){this.timerId=setInterval(()=>{if(state.paymentRunTime===0){state.paymentRunTime=60;returnclearInterval(this.timerId)}state.paymentRunTime-=1;localStorage.setItem('time',state.paymentRunTime)},1000)... 继续阅读 >
2020
09-24

使用vue打包进行云服务器上传的问题

使用vue打包进行云服务器上传的问题 vue中目录最后的vue.config.js文件中第27行的pulicpath改成./src目录下的man.js中30到33行注释掉将目录中的.env.development和.env.production中的改成自己的域名和端口号！！！！!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!接下来就是打包环节了打开vue的命令提示符输入命令：npmrunbuild:prod进行打包打包完成后会出现build目录的同级下一个出来一个打包好的文件目录，鼠标右键后点击找到文件所在地，将文件压缩为zip包... 继续阅读 >
2020
09-24

Vue Router的手写实现方法实现

为什么需要前端路由在前后端分离的现在，大部分应用的展示方式都变成了SPA（单页面应用SinglePageApplication）的模式。为什么会选择SPA呢？原因在于：用户的所有操作都在同一个页面下进行，不进行页面的跳转。用户体验好。对比多页面，单页面不需要多次向服务器请求加载页面（只请求一次.html文件），只需要向服务器请求数据（多亏了ajax）。因此，浏览器不需要渲染整个页面。用户体验好。归根结底，还是因为SPA能够... 继续阅读 >
2020
09-24

Vue父组件向子组件传值以及data和props的区别详解

Vue父组件向子组件传值以及data和props的区别详解 1.在父组件中定义msg属性data:{msg:'123-我是父组件中的数据'},2.引用子组件父组件可以在引用子组件的时候，通过属性绑定的形式，把需要传递给子组件的数据，以属性绑定的形式，传递到子组件内部，供子组件使用。把父组件传递过来的msg属性，绑定到子组件的parentmsg属性上。<com1:parentmsg="msg"></com1>3.在子组件定义部分，需要把父组件传递过来的parentmsg属性，先在props数组中定义一下（代表这个属性是由父... 继续阅读 >
2020
09-24

详解Vue中的Props与Data细微差别

Vue提供了两种不同的存储变量：props和data。这些方法一开始可能会让人感到困惑，因为它们做的事情很相似，而且也不清楚什何时使用props，何时使用data。那么props和data有什么区别呢？data是每个组件的私有内存，可以在其中存储需要的任何变量。props是将数据从父组件传递到子组件的方式。在本文中，我们将学习到：什么是props，为什么这些数据只向下流动，而不是向上data选项的用途响应式是什么如何避免props和data... 继续阅读 >
2020
09-23

vue学习笔记之Vue中css动画原理简单示例

vue学习笔记之Vue中css动画原理简单示例 本文实例讲述了Vue中css动画原理。分享给大家供大家参考，具体如下：当transition包裹了一个元素之后，vue会自动分析元素的css样式，构建动画流程。so，我们需要定义style。vue中的css动画，其实就是某一个时间点，给元素再增加了一个css样式体现的。v-if、v-show、动态组件都可以实现过渡效果。如果没有给transition定义name，vue中默认是.v-enter、.v-leave-to。<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"... 继续阅读 >
2020
09-23

vue学习笔记之动态组件和v-once指令简单示例

本文实例讲述了vue动态组件和v-once指令。分享给大家供大家参考，具体如下：点击按钮时，自动切换两个组件<component:is="type"></component>，当点击按钮之后，会自动清除原来的组件，显示新的组件。每一次切换，都需要销毁+创建但是这样消耗有点大，所以我们在子组件中引用了v-once指令，这样可以将显示在页面中的组件存到内存中，不会完全销毁。<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>动态组... 继续阅读 >
2020
09-23

Vue组件化开发之通用型弹出框的实现

Vue组件化开发之通用型弹出框的实现 本文主要分享关于组件化开发的理解，让刚入门的小伙伴少走一些弯路，提高开发效率，作者本人也是新手，如有不当之处，请大佬指出，感谢。相信很多刚入门的小伙伴，经常会写很多重复的代码，而这些代码一般情况下也都是大同小异，在这种情况下，如何让开发和学习变得更加高效，组件化的思想就显得尤为重要。这里通过设计一个简单的弹出框，给小伙伴们分享组件化的应用。组件&组件化组件化是对某些可以进行复用的功能进行封装的标准... 继续阅读 >