返璞归真

【代码】【Vue】3.屏幕自适应加滚动条。

el-select选中只能获取到value的值，获取不到label的值，所以要循环匹配筛选获取label的值。

这样遇到的问题是：切换开关，el-switch会立即改变值，不会根据传入的值改变，因为v-model是双向绑定的。需求：在切换开关的时候给个提示，确定切换开关就改变值，取消就不改变开关值。解决办法：把v-model换成:value。

最近在做Echarts图表切换的时候遇到了一个坑，产品设计的需求是这样，两个tab，一个是疾病风险图表，一个是意外风险图表，tab切换时显示不同的图表，而且要根据不同角色的年龄动态的在图表上打个坐标点，页面里面用的是v-show，没有用v-if，当时是这样考虑的，页面初始化进来加载的数据就直接都渲染了，因为v-show不会隐藏dom结构，点击tab切换就行了，但实际证明是我的想法太天真，这样写就会...

参考官网：百度统计开放平台 百度统计最近往项目里面引入百度统计，也是在网上查了各种资料，把百度统计的官网api又好好的看了一下，顺着文档的步骤，一步一步走下来，其实还蛮简单的，首先先在百度统计注册一个账号，在管理页面填写好自己要监控的网站域名，网站的首页，填写完成以后，会自动生成一段代码，如下图所示，我这里已经填写过了，点击获取代码，就可以取到百度自动生成的代码。但是在vue单...

最近用vue-cli3做微信公众号，使用了hiatory模式，其中也是波折不断，自己也是郁闷了好几天才把问题解决掉。首先先安装微信js-sdknpm install weixin-js-sdk --save然后在哪个页面里面用到微信的js api就把包导入进去import wx from 'weixin-js-sdk'基本的配置都好了以后， 我们就来说说微信分享过程中遇到的...

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...

一.router-link切换路由不存入history记录的方法在做tab切换子路由需求的时候，点击后退键，就会返回上一个子路由，不是很符合实际需求。可以在router-link后面加上关键词replace，就可以实现切换子路由，路径不存入history。点击后退按钮，会直接返回父路由的上一个页面。如果是编程式路由，可以吧$router.push()换成$router.replace()...

最近做一个公众号有需求是要添加一个图表，自己调查了一下，决定使用ECharts，在vue项目中引入ECharts，由于第一次做图表，还要跟UI设计图保持一致，也是遇到了好多样式问题，在这里做一下总结。效果图如下：ECharts官方DocsECharts官方ExampleECharts附录一按需引入ECharts图表和组件一.安装插件npm install echart...

安装ECharts图表插件npm install echarts --save实例效果：代码：<template> <div class="chart-swapper"> <div id="myChat"></div> </div></template><scri...

一.beforeRouteEnter(to, from, next)beforeRouteEnter函数内部this是undefined，这是因为在执行路由钩子函数beforeRouteEnter时候，组件还没有创建出来；先执行beforeRouteEnter，再执行组件周期钩子函数beforeCreate。我们可以通过next获取组件实例对象，如：next((vm) => {});参数...

项目背景：使用vue-cli3搭建的项目框架问题描述：父组件里面有一个轮播图，这个轮播图我封装了一下，封装成了一个组件引到了这个页面里面，我们产品的需求是，根据页面获取到的婚姻状态做判断，第二张图片的链接点进去显示不同的文章，意思就是根据婚姻状态给第二张图片赋不同的链接值，所以我需要传给这个轮播图组件一个婚姻状态，这个婚姻状态呢，又是从接口里面动态获取到的，这个轮播图呢，又是在页面加载的时候就...

在写移动端页面的时候，弹出遮罩层后，我们仍然可以滚动页面。vue中提供@touchmove.prevent.stop，@mousewheel.prevent方法可以完美解决这个问题。<div class="dialog" @touchmove.prevent.stop @mousewheel.prevent></div>如果不使用vue的话，可以给body添加ov...

v-bind:class="index==searchIndex ? 'classOne' : 'classTwo'"

我们都知道，项目在编译打包上生产环境的时候是不能有console.log()信息打印输出的，但是我们在开发环境有时候调试代码又需要打印输出一些信息，我们也不可能在编译上线的时候把代码里面的console.log()一个一个的全部删除掉，这个时候就需要我们在配置文件里面配置一下，生产环境编译的时候自动去掉console.log()。vue-cli2的时候是在build文件下面的webpack.p...

最近项目中有涉及到列表页跳转到详情页，就遇到了路由传参的问题，还有就是刷新页面的时候数据就获取不到了，于是就好好的看了看官方文档，做了如下的总结，都知道在这些js的框架中路由很重要，它是连接各个页面的桥梁，而参数在其中扮演着非常重要的角色，在一定意义上决定着两座桥梁是否能够连接成功，在vue中路由传参支持三种方式：场景：一个列表页到详情页，一个路由的li标签循环绑定一个数组，点击每一个li标签...

很多项目导致WebStrom文件过于庞大，但是WebStrom里面有Excluded功能，用来将某个目录文件，设置为忽略状态，但是一般不轻易设置，一般是node_modules文件夹，解决方法如下：一、推荐解决方法把node_modules加入到.gitignore文件中（如果你的项目是git的托管项目，则WebStrom会自动把.gitignore里的文件设置为Excluded）二、

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//

一、创建项目这里用vue-cli创建项目，创建过程可以参考vue-cli快速构建项目，创建完成后生成如下工程目录：二、项目目录三、配置路由Router在项目创建的过程中，Install vue-router? 如果选择了Yes，项目目录的src下就会自动生成一个router的文件夹，index.js就是vue-cli自动构建的router的配置文件，路由设置就在这里面配置，

在嵌套路由中，父路由向子路由传值，除了query外，还有params，params传值有两种情况，一种是值在url中显示，另一种是值不显示在url中。（1）显示在url中apple.vue {{msg}} {{$route.params.num}} getParam

在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...

最近在学习vue的单页面应用开发时，需要用到路由传值，这就涉及到了两个对象$router和$route，自己当时也是分不清，后来自己结合网上的博客和自己本地的vue项目了解了他们的区别：1.$router是VueRouter的一个对象，通过Vue.use(VueRouter)和Vu构造函数得到一个router的实例对象，这个对象中是一个全局的对象，他包含了所有的路由，包含了许多关键的对象和属性...

vue中子组件调用父组件的方法，这里总结了三种：1.直接在子组件中通过this.$parent.event来调用父组件的方法Parent.vue&lt;template&gt; &lt;div&gt; &lt;child&gt;&lt;/child&gt; &lt;/div&gt;&lt;/template&gt;&lt;script&gt; i

在vue项目开发的过程中，经常会用到组件来管理不同的功能，有一些公共的组件会被提取出来，这时可能会产生一些疑问和需求？比如一个组件调用另外一个组件作为自己的组件，那么我们如何进行给子组件进行传值呢？基于这种情况，本篇就介绍一下vue开发中常用的三种传值方式，父传子，子传父，非父子组件传值。PS：这也是面试中比较常见的题目~一、父传子，子传父引用官网的一句话：父子组件的关系可以总结...

我在做vue项目的时候遇到了这样的一个问题，在这里做一下总结，就是在提交表单的时候会有一个弹框提醒，这个Dialog我把它封装成了一个子组件，这样在父组件的data属性里面就会定义一个Dialog显示还是隐藏的变量，这个变量默认是false，点击按钮的时候这个变量要变成true显示Dialog，完了以后要关闭Dialog按钮，这个变量就要从父组件传入子组件，在子组件里面改变以后再传回父组件，这里我...

最近在做vue项目的时候遇到了这样的一个需求，点击复制微信昵称并打开手机微信的功能，在网上查了一下，vue有一个第三方的插件，考虑到各个浏览器剪切板的兼容性问题，就直接引用了这个插件，打开微信就通过url协议weixin://可参考vue-clipboard2&lt;template&gt; &lt;div class="landing002-wrapper"&gt; ...

在移动项目开发中遇到了一个这样的问题，我这里用的flex布局，因为flex布局是根据页面宽高度进行变化的，因此，当底部弹出手机软键盘的时候，因页面高度变化导致页面因而变化。解决办法：我们只需要在app这个div初始化完成的时候，获取手机的屏幕高度，并将值赋给height就好了&lt;template&gt; &lt;div id="app"&gt; &lt;transit...

最近在做移动端vue项目的时候遇到了一个这样的一个问题，当我点击input框输调起手机软件盘输入内容以后，关闭软键盘，页面没有回到底部，导致底部出现了空白，手动往下滑动一下，页面才会恢复正常，当关闭软键盘的时候，页面不会自动回到底部。我是flex的布局，目前Android和Ios上都有这个问题网上查了一下，是微信webview打开我们h5页面的时候，就固定了页面的高度，如果这个input在...

Vue是近两年来比较火的前端框架（官方解释是渐进式框架），什么叫渐进式框架呢，简单来说就是主张最少，这些概念只能自己去看，自己去理解，不过多的解释。Vue官方文档很全面的。Vue两大核心思想，组件化和数据驱动，组件化是将一个整体合理拆分为一个一个小块（组件），组件可重复使用，数据驱动是前端的未来发展方向，释放了对DOM的操作，让DOM随着数据的变化自然而然的变化（双向数据绑定），不必过多的关注