![](https://img-blog.csdnimg.cn/20201014180756918.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
【Vue】
文章平均质量分 62
Anabel Chen
世上之事,只该难得,不该易得,易得之事易失去,难得之事难失去!
展开
-
【Vue】3.屏幕自适应加滚动条
【代码】【Vue】3.屏幕自适应加滚动条。原创 2023-02-27 17:05:10 · 1134 阅读 · 1 评论 -
【Vue】2.ElementUI中el-select多选情况下获取label和value
el-select选中只能获取到value的值,获取不到label的值,所以要循环匹配筛选获取label的值。原创 2023-02-27 16:19:39 · 2918 阅读 · 0 评论 -
【Vue】1.ElementUI中el-switch开关切换改变值遇到的问题
这样遇到的问题是:切换开关,el-switch会立即改变值,不会根据传入的值改变,因为v-model是双向绑定的。需求:在切换开关的时候给个提示,确定切换开关就改变值,取消就不改变开关值。解决办法:把v-model换成:value。原创 2023-02-27 15:41:41 · 3213 阅读 · 1 评论 -
【Vue】26.Vue中引入Echarts图表tab切换时遇到的坑
最近在做Echarts图表切换的时候遇到了一个坑,产品设计的需求是这样,两个tab,一个是疾病风险图表,一个是意外风险图表,tab切换时显示不同的图表,而且要根据不同角色的年龄动态的在图表上打个坐标点,页面里面用的是v-show,没有用v-if,当时是这样考虑的,页面初始化进来加载的数据就直接都渲染了,因为v-show不会隐藏dom结构,点击tab切换就行了,但实际证明是我的想法太天真,这样写就会...原创 2019-11-14 10:33:59 · 7606 阅读 · 3 评论 -
【Vue】16.vue项目里引入百度统计
参考官网:百度统计开放平台 百度统计最近往项目里面引入百度统计,也是在网上查了各种资料,把百度统计的官网api又好好的看了一下,顺着文档的步骤,一步一步走下来,其实还蛮简单的,首先先在百度统计注册一个账号,在管理页面填写好自己要监控的网站域名,网站的首页,填写完成以后,会自动生成一段代码,如下图所示,我这里已经填写过了,点击获取代码,就可以取到百度自动生成的代码。但是在vue单...原创 2019-01-27 19:00:04 · 4147 阅读 · 3 评论 -
【Vue】17.vue-router history模式下的微信分享遇到的坑
最近用vue-cli3做微信公众号,使用了hiatory模式,其中也是波折不断,自己也是郁闷了好几天才把问题解决掉。首先先安装微信js-sdknpm install weixin-js-sdk --save然后在哪个页面里面用到微信的js api就把包导入进去import wx from 'weixin-js-sdk'基本的配置都好了以后, 我们就来说说微信分享过程中遇到的...原创 2019-03-04 13:44:38 · 2144 阅读 · 0 评论 -
【Vue】18.vue中使用Base64和md5
1.在项目根目录下安装npm install js-base64 --savenpm install js-md5 --save2.在项目文件中引入 import {Base64} from 'js-base64'; import md5 from 'js-md5';3.在项目中文件中引入Base64:// 编码Base64.encode('');Bas...翻译 2019-03-04 14:01:10 · 435 阅读 · 0 评论 -
【Vue】19.vue中router-link的一些问题
一.router-link切换路由不存入history记录的方法在做tab切换子路由需求的时候,点击后退键,就会返回上一个子路由,不是很符合实际需求。可以在router-link后面加上关键词replace,就可以实现切换子路由,路径不存入history。点击后退按钮,会直接返回父路由的上一个页面。如果是编程式路由,可以吧$router.push()换成$router.replace()...翻译 2019-04-26 11:26:41 · 801 阅读 · 0 评论 -
【Vue】20.vue项目中引入echarts图表遇到的问题
最近做一个公众号有需求是要添加一个图表,自己调查了一下,决定使用ECharts,在vue项目中引入ECharts,由于第一次做图表,还要跟UI设计图保持一致,也是遇到了好多样式问题,在这里做一下总结。效果图如下:ECharts官方DocsECharts官方ExampleECharts附录一按需引入ECharts图表和组件一.安装插件npm install echart...原创 2019-04-26 15:10:25 · 4965 阅读 · 0 评论 -
【Vue】21.vue项目中ECharts图表双Y轴
安装ECharts图表插件npm install echarts --save实例效果:代码:<template> <div class="chart-swapper"> <div id="myChat"></div> </div></template><scri...翻译 2019-04-29 14:35:10 · 3326 阅读 · 2 评论 -
【Vue】22.vue组件级路由钩子函数(beforeRouteEnter/beforeRouteUpdate/beforeRouteLeave)
一.beforeRouteEnter(to, from, next)beforeRouteEnter函数内部this是undefined,这是因为在执行路由钩子函数beforeRouteEnter时候,组件还没有创建出来;先执行beforeRouteEnter,再执行组件周期钩子函数beforeCreate。我们可以通过next获取组件实例对象,如:next((vm) => {});参数...原创 2019-04-29 15:28:10 · 3957 阅读 · 0 评论 -
【Vue】23.vue项目中子组件接收不到父组件传值的问题
项目背景:使用vue-cli3搭建的项目框架问题描述:父组件里面有一个轮播图,这个轮播图我封装了一下,封装成了一个组件引到了这个页面里面,我们产品的需求是,根据页面获取到的婚姻状态做判断,第二张图片的链接点进去显示不同的文章,意思就是根据婚姻状态给第二张图片赋不同的链接值,所以我需要传给这个轮播图组件一个婚姻状态,这个婚姻状态呢,又是从接口里面动态获取到的,这个轮播图呢,又是在页面加载的时候就...原创 2019-06-14 19:06:29 · 13619 阅读 · 0 评论 -
【Vue】24.遮罩层阻止默认滚动事件
在写移动端页面的时候,弹出遮罩层后,我们仍然可以滚动页面。vue中提供@touchmove.prevent.stop,@mousewheel.prevent方法可以完美解决这个问题。<div class="dialog" @touchmove.prevent.stop @mousewheel.prevent></div>如果不使用vue的话,可以给body添加ov...原创 2019-07-15 10:58:10 · 1376 阅读 · 0 评论 -
【Vue】25.Vue 三元判断绑定class
v-bind:class="index==searchIndex ? 'classOne' : 'classTwo'"翻译 2019-07-16 10:51:33 · 10636 阅读 · 0 评论 -
【Vue】15.vue-cli3项目配置webpack自动删除生产环境的console.log调试信息
我们都知道,项目在编译打包上生产环境的时候是不能有console.log()信息打印输出的,但是我们在开发环境有时候调试代码又需要打印输出一些信息,我们也不可能在编译上线的时候把代码里面的console.log()一个一个的全部删除掉,这个时候就需要我们在配置文件里面配置一下,生产环境编译的时候自动去掉console.log()。vue-cli2的时候是在build文件下面的webpack.p...原创 2019-01-26 21:38:27 · 11571 阅读 · 4 评论 -
【Vue】7.解决路由传参刷新数据消失的问题及总结路由传参的三种基本模式
最近项目中有涉及到列表页跳转到详情页,就遇到了路由传参的问题,还有就是刷新页面的时候数据就获取不到了,于是就好好的看了看官方文档,做了如下的总结,都知道在这些js的框架中路由很重要,它是连接各个页面的桥梁,而参数在其中扮演着非常重要的角色,在一定意义上决定着两座桥梁是否能够连接成功,在vue中路由传参支持三种方式:场景:一个列表页到详情页,一个路由的li标签循环绑定一个数组,点击每一个li标签...原创 2019-01-21 20:23:30 · 3564 阅读 · 0 评论 -
【Vue】2.解决npm install安装依赖WebStrom卡顿的问题
很多项目导致WebStrom文件过于庞大,但是WebStrom里面有Excluded功能,用来将某个目录文件,设置为忽略状态,但是一般不轻易设置,一般是node_modules文件夹,解决方法如下:一、推荐解决方法把node_modules加入到.gitignore文件中(如果你的项目是git的托管项目,则WebStrom会自动把.gitignore里的文件设置为Excluded)二、翻译 2017-11-09 15:58:28 · 1980 阅读 · 0 评论 -
【Vue】5.vue mock数据(模拟后台)
vue实现ajax获取后台数据是通过vue-resource,首先通过npm安装vue-resourcenpm install vue-resource --save安装完成以后,把vue-resource引入到main.js文件中src/main.js// The Vue build version to load with the `import` command//原创 2017-11-17 17:02:41 · 23062 阅读 · 5 评论 -
【Vue】2.vue2.0路由及路由嵌套
一、创建项目这里用vue-cli创建项目,创建过程可以参考vue-cli快速构建项目,创建完成后生成如下工程目录:二、项目目录三、配置路由Router在项目创建的过程中,Install vue-router? 如果选择了Yes,项目目录的src下就会自动生成一个router的文件夹,index.js就是vue-cli自动构建的router的配置文件,路由设置就在这里面配置,原创 2017-11-16 15:40:05 · 528 阅读 · 0 评论 -
【Vue】3.vue2.0嵌套路由-params传递参数
在嵌套路由中,父路由向子路由传值,除了query外,还有params,params传值有两种情况,一种是值在url中显示,另一种是值不显示在url中。(1)显示在url中apple.vue {{msg}} {{$route.params.num}} getParam原创 2017-11-16 18:01:01 · 1737 阅读 · 0 评论 -
【Vue】6.解决父组件向子组件传值修改以后再传回父组件的问题
在vue2.0中父组件向子组件传入一个值,这个值在子组件里面被改变以后再传回父组件,这个时候vue组件会报错:[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data o...原创 2019-01-13 14:57:32 · 5880 阅读 · 0 评论 -
【Vue】8.vue中$router和$route的区别
最近在学习vue的单页面应用开发时,需要用到路由传值,这就涉及到了两个对象$router和$route,自己当时也是分不清,后来自己结合网上的博客和自己本地的vue项目了解了他们的区别:1.$router是VueRouter的一个对象,通过Vue.use(VueRouter)和Vu构造函数得到一个router的实例对象,这个对象中是一个全局的对象,他包含了所有的路由,包含了许多关键的对象和属性...原创 2019-01-26 15:40:38 · 24861 阅读 · 4 评论 -
【Vue】9.vue中子组件调用父组件的方法
vue中子组件调用父组件的方法,这里总结了三种:1.直接在子组件中通过this.$parent.event来调用父组件的方法Parent.vue<template> <div> <child></child> </div></template><script> i原创 2019-01-26 16:12:04 · 9119 阅读 · 6 评论 -
【Vue】10.vue中父组件通过props属性向子组件传值
在vue项目开发的过程中,经常会用到组件来管理不同的功能,有一些公共的组件会被提取出来,这时可能会产生一些疑问和需求?比如一个组件调用另外一个组件作为自己的组件,那么我们如何进行给子组件进行传值呢?基于这种情况,本篇就介绍一下vue开发中常用的三种传值方式,父传子,子传父,非父子组件传值。PS:这也是面试中比较常见的题目~一、父传子,子传父引用官网的一句话:父子组件的关系可以总结...原创 2019-01-26 17:57:54 · 2379 阅读 · 2 评论 -
【Vue】11.解决父组件通过props属性向子组件传入的值被修改以后报错的问题
我在做vue项目的时候遇到了这样的一个问题,在这里做一下总结,就是在提交表单的时候会有一个弹框提醒,这个Dialog我把它封装成了一个子组件,这样在父组件的data属性里面就会定义一个Dialog显示还是隐藏的变量,这个变量默认是false,点击按钮的时候这个变量要变成true显示Dialog,完了以后要关闭Dialog按钮,这个变量就要从父组件传入子组件,在子组件里面改变以后再传回父组件,这里我...原创 2019-01-26 18:38:33 · 16606 阅读 · 0 评论 -
【Vue】12.vue中实现点击复制及打开手机微信APP的功能
最近在做vue项目的时候遇到了这样的一个需求,点击复制微信昵称并打开手机微信的功能,在网上查了一下,vue有一个第三方的插件,考虑到各个浏览器剪切板的兼容性问题,就直接引用了这个插件,打开微信就通过url协议weixin://可参考vue-clipboard2<template> <div class="landing002-wrapper"> ...原创 2019-01-26 19:06:26 · 2367 阅读 · 0 评论 -
【Vue】13.解决安卓手机上调出软键盘,屏幕背景被压缩的问题
在移动项目开发中遇到了一个这样的问题,我这里用的flex布局,因为flex布局是根据页面宽高度进行变化的,因此,当底部弹出手机软键盘的时候,因页面高度变化导致页面因而变化。解决办法:我们只需要在app这个div初始化完成的时候,获取手机的屏幕高度,并将值赋给height就好了<template> <div id="app"> <transit...原创 2019-01-26 19:18:48 · 4400 阅读 · 12 评论 -
【Vue】14.解决微信浏览器input关闭键盘后导致页面底部空缺的问题
最近在做移动端vue项目的时候遇到了一个这样的一个问题,当我点击input框输调起手机软件盘输入内容以后,关闭软键盘,页面没有回到底部,导致底部出现了空白,手动往下滑动一下,页面才会恢复正常,当关闭软键盘的时候,页面不会自动回到底部。我是flex的布局,目前Android和Ios上都有这个问题网上查了一下,是微信webview打开我们h5页面的时候,就固定了页面的高度,如果这个input在...原创 2019-01-26 19:38:06 · 4931 阅读 · 14 评论 -
【Vue】1.基于vue-cli的快速构建
Vue是近两年来比较火的前端框架(官方解释是渐进式框架),什么叫渐进式框架呢,简单来说就是主张最少,这些概念只能自己去看,自己去理解,不过多的解释。Vue官方文档很全面的。Vue两大核心思想,组件化和数据驱动,组件化是将一个整体合理拆分为一个一个小块(组件),组件可重复使用,数据驱动是前端的未来发展方向,释放了对DOM的操作,让DOM随着数据的变化自然而然的变化(双向数据绑定),不必过多的关注原创 2017-11-09 12:09:49 · 992 阅读 · 0 评论