前端vue
文章平均质量分 58
wangyinze123
汪 汪 程序汪
展开
-
vue router分别使用query和params传参的不同以及刷新页面出现的数据消失
query传参1、this.$router.push(path:’/diyName’,query:{ a:1, b:2,c:3})2、this.$router.push({path:’/discomfortBook’,query:{obj:{a:1,b:2,c:3}}})推荐第二种方式。因为当对象属性字段比较多的时候,第一种传参方式会把query里的所有字段属性都展示出来,导致浏览器上的url会比较长,所以用第一种方式传参可能导致url超出chorme规定url最长字节长度不超过2mparam原创 2020-12-22 21:48:31 · 1945 阅读 · 4 评论 -
vue中使用插槽slot和应用场景
步骤1、在element-ui组件中设置插槽位置。步骤2、在父组件中插入插槽内容。为啥有插槽:slot插槽这个东西开始于vue2.1,在没有slot插槽之前,vue中的子组件标签中是不弄包含任何标签的,但对开发者来说,有时候想在标签中间加一些标签的需求。插槽它是什么:插槽,相当于vue中的占位符。在组件中给开发者提供一个HTML模板位置,可以用来传入一些东西。插槽又分为 匿名插槽、具名插槽、作用域插槽(父子组件可以传递数据的插槽)。在vue2.6版本时,插槽有了新的指令v-slot。在这.原创 2020-12-15 21:28:41 · 1847 阅读 · 0 评论 -
vue2中父子组件通过props传递数据,父组件数据ajax异步更新,子组件数据不更新的问题解决
解决方案1在子组件中,watch监听props的动态值,设置deep的属性值为true(vue2官方文档中解释为:深度监听,每次属性值发生变化时,都会监听到)。在handler中执行子组件想处理数据的方法。解决方案2分析: 父子组件的生命周期顺序为:父beforeCreate - 父 created - 父beforeMounted-子beforeCreate - 子created - 子beforeMounte - 子mounted 父 mounted 。当父组件中mounted通过异步请求.原创 2020-12-03 21:20:42 · 2764 阅读 · 1 评论 -
vue框架在vue-cli3下使用proxy处理前端跨域解决方案
什么是跨域跨域问题的出现是因为浏览器的同源策略问题,所谓同源:就是两个页面具有相同的协议(protocol),主机(host)和端口号(port),它是浏览器最核心也是最基本的功能,如果没有同源策略我们的浏览器将会十分的不安全,随时都可能受到攻击。跨域的表现打开浏览器控制台(F12),当我们请求一个接口的时候,出现如:Access-Control-Allow-Origin 字眼的时候说明请求跨域了。具体报错信息为No ‘Access-Control-Allow-Origin’ header is .原创 2020-11-30 19:24:52 · 1401 阅读 · 1 评论 -
vue使用element-ui或者其他组件库时,清除上一次表单数据
问题描述在上一次填写完表单后,上一次的数据依然存在data中,所以下一次再打开表单的时候,还会出现上一次填的数据解决方法1将对象的值重新赋值为初始化缺点:可以处理问题,但麻烦方法2利用Object.assign(target,origin),这是es6中对象浅拷贝的方法,将第二个参数中可遍历的数据复制到第一个参数中。//所以代码为 Object.assign(this.$data,this.$options.data())this:当前单页面所在的组件实例对象$data:当前组件对原创 2020-11-26 20:30:55 · 1467 阅读 · 2 评论 -
vue中使用自定义指令(directive)解决h5在ios的微信浏览器问题以及长按进行dom操作
问题1: h5在ios的微信浏览器中,唤起键盘后,设置定位的元素会被顶起,并且在键盘消失后不会回到原来的位置第一步:创建vue自定义指令import Vue from 'vue'const windowHeight = window.innerHeight// 弹起输入框,固定页面定位(ios问题)Vue.directive('fixedInput', function (el, binding) { el.addEventListener('blur', function () { .原创 2020-11-23 22:30:12 · 1292 阅读 · 1 评论 -
VUE中的VUEX如何调用modules里面的mutations和state
项目场景:当vue中的store被分为modules时,如何获取到modules里的mutations或state使用方式:1.1moudles里的文件,配置namespaced属性1.2、在store的index.js中引入2.1 在vue单页面中引入<script>import { mapState, mapMutations } from "vuex";</script>2.2 在vue单页面中使用mutationsmethods: {原创 2020-11-18 18:01:23 · 5215 阅读 · 0 评论