![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
文章平均质量分 67
一羊迁徙
曾梦想仗剑走天涯,后来没钱就算了。
展开
-
Vue移动端适配方案
Vue移动端适配写在前面二级目录三级目录写在前面此文章需要使用到Vue CLI搭建项目,同时使用的是阿里的二级目录三级目录原创 2021-01-05 17:29:30 · 6808 阅读 · 3 评论 -
在Vue中封装Echarts并使用
在Vue中封装Echarts并使用为什么要封装效果图以及项目目录1、效果图2、项目目录具体封装过程1、Echarts的安装2、引入3、封装案例4、使用组件的页面5、使用mixins解决resize问题6、element-resize-detector写在最后为什么要封装如果不封装,每用一次图表,都要重新配置一边option,封装起来方便复用,也方便统一管理。解决元素以及窗口的resize等问题。自己动手封装,只需要看一份文档,并且可以使用更多的原生功能。看完这篇文章你或许觉得自己封装并不难。原创 2020-12-31 16:26:47 · 10946 阅读 · 12 评论 -
Vue动态组件 / Vue中is属性的作用
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题,有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能,丰富你的文章UML 图表FLowchart流程图导出与导入导出导入欢迎使用Markdown编辑器你好! 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Mar原创 2020-12-29 23:20:26 · 1521 阅读 · 1 评论 -
vue跳转页面打开新窗口,并且携带与接收参数
1、携带普通类型参数字符串、数字等。path:要跳转新页面的路由链接query:要携带的参数let pathInfo = this.$router.resolve({ path:'/product_detail', query:{ productId:'11' } }) window.open(pathInfo.href, '_blank');新页面的参数接收:this.productId = this.$route.query.product原创 2020-11-12 12:58:27 · 1748 阅读 · 0 评论 -
vue监听滚动事件,控制页面元素显示隐藏
methods中定义监听事件// 窗口滚动监听事件windowScrollListener(){ // 获取滚动条的高度 var scrollTop = document.body.scrollTop || document.documentElement.scrollTop; if(scrollTop >= 600){ // 利用布尔值控制元素的显隐 this.leftMenuVisible = true; } i原创 2020-10-27 09:52:33 · 1103 阅读 · 0 评论 -
vue路由跳转 router-link 清除历史记录的三种方式
1.在vue项目中说起路由跳转,我们最先想到的就是router-link标签以及this.$router.push函数。router-link和this.\$router.push的实现原理是一样的,在点击router-link时,内部调用的就是this.$router.push。2.this.\$router.push这个方法会向 history 栈添加一个新的记录,所以,当用户点击浏览器后退按钮时,则回到之前的 URL。那在我们使用路由跳转的时候如何去掉历史记录呢?官方文档提供了如下三种方式。.原创 2020-09-25 16:02:59 · 10154 阅读 · 0 评论 -
vue中vm.$set函数的详细使用方法
vue中vm.$set函数的详细使用方法一、为什么要使用二、不是响应性的例子三、vm.$set的使用四、数组下标操作会碰到的误区一、为什么要使用想必大家都遇到过这样一个问题,就是在数组数据变化了,但是页面不能实时的进行渲染。为什么会出现这个问题呢?首先看看Vue.js官网教程中的说法:既然这个问题频频出现,那么为什么vue不提供对数组属性的监听呢?来看看github上大佬的回答:我还记得当时看过的一篇文章,如果vue提供了对数组属性的监听会有什么后果,有一个老外的回答是:“Oh,it’s ver原创 2020-09-13 14:34:12 · 9529 阅读 · 0 评论 -
VUE 子组件向父组件传值(含传多值以及添加额外参数场景)
一、子组件向父组件传递一个值子组件:this.$emit('change', this.value);父组件:<!-- 在父组件中使用子组件 --><editable-cell :text="text" :inputType="inputType" @change="costPlannedAmountChange($event)" />// 事件处理函数async costPlannedAmountChange(value) { console.log(value原创 2020-08-31 17:13:09 · 11217 阅读 · 2 评论 -
vue项目在打包时,去掉所有的console.log输出
vue项目在打包时,去掉所有的console.log输出安装插件添加配置安装插件npm install babel-plugin-transform-remove-console --save-dev添加配置安装babel-plugin-transform-remove-console开发依赖,然后在项目的babel.config.js的plugin中添加节点。再build就不会有console警告了。如下配置无论在开发环境还是生产环境都会去掉所有的console输出语句。但是babel.c原创 2020-08-06 11:07:04 · 4895 阅读 · 3 评论 -
vue路由跳转报错Avoided redundant navigation to current location: “/xxxxxx“.
这里写目录标题一、问题出现及其出现原因二、问题解决三、原理解析四、this指向复习一、问题出现及其出现原因在使用this.$router.push进行路由的跳转时,出现如下报错:问题出现原因:重复路由跳转,比如说当前路由是商品详情页面/goodsDetail,但是点击按钮进行this.$router.push操作,要跳转的还是商品详情页面/goodsDetail。二、问题解决方式一:升级vue-router版本为3.0即可解决,项目目录下运行命令:npm i vue-router@3.原创 2020-07-26 17:39:48 · 38319 阅读 · 17 评论 -
vue父子组件传值,父组件值改变,值为空数组时子组件渲染失效
定义子组件,在使用子组件时,向子组件传递数组类型的参数,子组件接收到数组之后对数据进行渲染。而父组件的数值是不断变化的,点击按钮一次,获取一次值。当数组不为空时,正常渲染,但是数组为空时,会保留上一次渲染。问题刚遇到的时候,在网上看了很多文章,自己也做了很多尝试。一、尝试一1.在父组件添加v-if判断,当数组为空时,不进行子组件的渲染。虽然这个方式可以解决问题,但是在项目中大量使用了该组件,那就需要在使用子组件的时候大量的添加判断,这种做法直接pass。二、尝试二2.在子组件中添加监听原创 2020-07-20 18:26:12 · 3661 阅读 · 1 评论 -
vue动态生成新表单并且添加验证校验规则
vue动态生成表单绑定数据+添加校验规则一、需求场景以及注意事项一、需求场景一、注意事项二、代码结构一、template中二、data中三、methods中的按钮事件,也就是触发渲染之前的事件三、ant-design中的校验规则一、a-form-model二、a-form-model-item一、需求场景以及注意事项一、需求场景1.用户输入数值,点击按钮弹出对话框的同时,按照用户输入的数值进行表单的渲染。2.点击按钮之后,渲染效果如下:一、注意事项首先声明我这里使用的是ant-design,原创 2020-07-18 14:15:33 · 6086 阅读 · 0 评论 -
细说vue生命周期
vue生命周期当中的必知必会一、官网生命周期图二、vue生命周期里都会发生些什么一、八个钩子函数二、看看demo里都会发生什么一、官网生命周期图在写这篇文章之前,看了很多其他人的文章,所以在写之前还是按照惯例先去官网扒图:图片乍一看,里面包含的内容很多,但是不要慌,看完我后面的内容再回来细品这张图。二、vue生命周期里都会发生些什么一、八个钩子函数beforeCreate(创建前)created(创建后)beforeMount(载入前)mounted(载入后)beforeUpdate原创 2020-07-12 17:04:39 · 2942 阅读 · 1 评论 -
vue点击按钮让页面的某一个元素全屏展示
一、先上效果图项目情况:vue+screenfull插件其实文档上写的很清楚:screenfull文档点击页面的全屏图标,使包裹地图的div实现全屏。二、页面结构三、在页面加载时添加监听 mounted () { const element = document.getElementById('map_container'); document.getElementById('full_screen').addEventListener('click', ()原创 2020-07-08 17:23:50 · 1430 阅读 · 2 评论 -
vue路由传参的三种方式/含页面刷新参数丢失解决方案(详细)
vue路由传参的三种方式以及页面刷新参数丢失问题一、路由传参的三种方式1、传参方式一:params传参2、传参方式二:路由属性配置传参3、传参方式三:query传参二、三种传递方式的区别一、路由传参的三种方式1、传参方式一:params传参这种方式页面刷新参数丢失。(1)、参数传递页面:// 点击跳转详情页面 toDetail(){ this.$router.push({ name:"AntMemu",//值是在配置路由规则时原创 2020-06-16 22:41:34 · 14456 阅读 · 3 评论 -
npm i 依赖装不上?试试这一招
使用npm i 安装失败问题这一招适用于大部分情况(本人未出现不适用的情况),总是在git吧项目down下来之后,安装第三方依赖包出现问题,或者其他情况安装失败问题,都可以试一试这个方法。问题出现场景在下载第三方包时,出现npm ERR等情况如下:问题解决方法1.首先清理npm缓存,此命令在项目目录和全局环境一样适用npm cache clean --force2.删除项目中的node_modules文件(直接删除即可)3.将node_modules文件删除之后重新执行npm i 安装所原创 2020-06-07 12:03:14 · 5878 阅读 · 0 评论