银鞍照白马的博客

vue3.0于2020年9月18日晚11点半正式发布，时间已经过去半年多了。我们必须赶紧学习vue3.0赶上前端同学们的脚步。那么，vue3.0带来了哪些改变呢？它的优势是什么？vue3.0 的发布与 vue2.0 相比，优势主要体现在：更快、更小、更易维护、更易于原生、让开发者更轻松；更快：　　1、virtual DOM 完全重写，mounting & patching 提速 100%；　　2、更多编译时 （compile-time）提醒以减少 runtime 开销；　　3、基于 P

如图所示，vue利用echarts轻松实现3D地球效果。为了实现这个效果，查阅了很多文档，但是大部分都不全，总是少了点东西，导致代码报错。我这次把我实现的全过程分享给同学们。特别是要注意echarts-gl版本问题。...

同学们好，最近在开发的时候，碰到一个问题，需要父组件调用子组件的方法。本来是信手拈来的一件小事情，纠结了我好久，老是报错，提示not a function。网上查了一下，并没有能解决我问题的，甚至还有不少误导我的文章。有的文章中写道，子组件必须挂在父组件第一个子标签的中。于是我把我对父组件调用子组件方法的理解整理出来分享给大家。一、提示undefined这种情况下，一般都是父组件调用子组件方法的时候，子组件还未渲染成功。要搞清楚这个问题，我们要搞清楚父子组件的生命周期就行了。加载渲染过..

如图所示，最近在做大屏项目的时候，有个需求，需要有数据迁徙的动态效果图，还要有每个省份的数据热点分布。在网上找了很多资料，没有看到将两个需求都实现的文章。只能自己动手干，于是查了很多资料，终于将两者合二为一，现在分享给大家。安装echartsnpm install echarts --save在main.js中添加import echarts from 'echarts'Vue.prototype.$echarts = echarts在组件中使用<template> &l.

如图所示，想要实现清晰表达当前项目的进度，可以使用百度的免费插件echarts。官网地址：https://echarts.apache.org/zh/index.html里面文档和api都很齐全，如果还是不太懂，可以去看看echarts社区的开发者开源的各种实例，非常齐全。地址：点击进入百度echarts安装我这里就不赘述，有大量的资料可以查询。下面我们就开始开发我们的项目进度条。...

如图所示，这是一个大屏项目的3d轮播图效果，下面跟着我来详细实现这个轮播效果。官网地址：https://wlada.github.io/vue-carousel-3d/如图所示，这是轮子工厂里面的vue-carousel-3d插件中的一些参数，文档。可以参考。地址：轮子工厂安装npm install -S vue-carousel-3d调用1、全局注册，main.jsimport Vue from 'vue'import Carousel3d from 'vue-carousel-3d.

我们做vue项目，一般会封装一些常用的组件，今天我就把我自己封装的搜索框分享给大家，样式简洁漂亮，点击搜索，input输入框会自动获取焦点。如下图所示html部分<template> <div class="search_box"> <div class="search_btn" @click="onShow" v-if="!isShow"> <img @click="clickSearch" src="@/assets/images

最近做的一个项目，后端的接口由于某种的原因，一次性把所有的列表数据全部返回给前端了。所以需要前端做个滚动懒加载的功能，并把数据做个拦截处理。效果如下图所示：因为我的框架用得是：http://mint-ui.github.io/docs/#/zh-cn2/infinite-scrollhtml部分 <div class="progress_list" v-infinite-scroll="loadMore" infinite-scroll-disabled="loading"

最近接手了别人做的vue项目，项目跑起来后，有些页面很卡，首屏加载也慢，打包速度也慢。于是，研究了很久vue的项目性能优化，下面我将从两个部分来详解vue项目的性能优化：代码优化webpack打包优化一、代码优化1、v-if 和 v-showv-if 是懒加载，当状态为true时才会加载，并且为 false 时不会占用布局空间；v-show 是无论状态是 true 或者是 false，都会进行渲染，并且只是简单地基于 CSS 的 display 属性进行切换，并对布局占据空间对于在项目中，需

今天，我们从如何使用axios以及axios的概念，这两方面来仔细聊聊axios。1、安装使用axiosnpm安装 npm install axios --save通过cdn引入<script src="https://unpkg.com/axios/dist/axios.min.js"></script>新建http.js，封装好axios的get，pos...

上篇文章没说的vuex，现在就来全面讲讲vuex。其实我们搞懂下面这几个问题，就能真正理解vuex。1、什么是vuex？vuex是一个专为vue.js应用程序开发的状态管理模式（它采用集中式存贮管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化）。2、vuex的属性？state存储数据，存储状态；在根实例中注册了store 后，用 this.$store.stat...

看了很多关于vue组件传值的文章，于是想把文章总结一下，把关于vue组件传值好好聊聊，欢迎大家指正。组件之间传值主要分两种1、父子组件2、非父子组件1、父子组件传值1、props方法父组件嵌套的子组件中，使用v-bind:msg=‘xxxx’进行对象的绑定，子组件中通过定义props接收对应的msg对象父组件<template> <div> &...

因为业务需要，公司需要在web端网页生成二维码，通过手机扫码实现支付宝，微信支付的功能。实例如下：1、安装二维码生成插件，我这里用的是qrcodejs2插件，具体安装方法看我上一篇文章，生成二维码2、直接上代码，这里的支付宝支付是直接生成新的html页面，支付成功后自动跳转回我们的网站，微信支付是生成二维码，沦陷后获取是否支付成功信息 //前往支付 submitPay() {...

做项目的时候，有时候接口报错，或者服务器挂了，我们需要做一个错误页面，告诉用户此时服务器挂了。在网上找了一下，并没有清晰易懂的文档，我就把我的项目里面用到的分享出来。新建一个请求拦截js文件，代码如下：import axios from 'axios'import router from '../router.js'// 创建 axios 实例export const Axios = ...

最近的项目需要调用打印机，把网上的一些资料整理一些，分享给大家，需要注意的是lodop会有脚标，如果想去掉脚标，只能先预览再打印，或者购买版权。lodop官网vue案例地址：点击进入安装打印机驱动，设置打印尺寸这里就先不分享了。直接上代码1、下载LodopFuncs.js文件，把js放在常用的js文件夹中2 、修改LodopFuncs.js文件//在文件最底部添加一行代码，把该文件中的...

最近的项目上有个需求，生成带logo的二维码，网上大部分都是基于JQ插件jQuery.qrcode。对于vue项目并不适用，翻阅了大量资料后，我找到了qrcode-vue这款基于vue的生成二维码的插件，非常好用，分享给大家。官网地址点击进入：qrcode-vue安装组件npm install --save qrcode.vue # yarn add qrcode.vuehtml部分...

如同所示，实现上传视频的功能：html部分//element-ui提供的上传组件el-upload<el-upload class="avatar-uploader el-upload--text" action="#" :show-file-list="false" :before-upload="beforeUploadVideo"> <vide...

写项目的时候，多次点击同一路由地址的时候，router会报错，错误如下：网上查了一下，发现是因为router版本bug，需要升级router ，方法如下(亲测有效) ：第一种方法，升级vue-router：在项目目录下运行npm i vue-router@3.0 -S第二种方法，不升级vue-router，修改main.js// main.jsimport Router fro...

html部分<div class="imgBox" :style="{backgroundImage:'url('+imgUrl+')'}"></div>css部分.imgBox{ width: 250px; height: 150px; background-size: cover;}

首先，看看微信官方文档，了解一下具体实现步骤微信官方文档： 微信登陆开发指南基本了解了微信登陆的流程后，然后我们再来一起踩坑1、先去微信公众平台申请网站域名，appId2、调用微信地址生成二维码// 微信登陆usewxlogin() { let appId = 'wx515d8d1893f1e1f5' //公众号平台提供的appId let redirectURI = 'h...

很简单的vue返回顶部，但是网上查了很多方式，并不好用，我把我项目上面的方法分享出来。效果线上预览：返回顶部html<a @click="backTop"> <i class="el-icon-arrow-up"></i> </a>js//返回顶部backTop() { let top = document.documen...

由于element上传图片的时候调用的 before-upload 方法不能传参数，只能传文件，如下图所示：但是我们想要获得本次上传图片的索引值，没办法再这个方法里面传参数，如下图所示：我们想要获取当前索引值，就需要再包裹上传图片组件的div上面添加点击事件，点击获取当前索引值。代码如下://html部分<div class="relevanceGoods-box" v-if="...

配置sass安装对应依赖node模块npm install node-sass --save-devnpm install sass-loader --save-dev引入外部scss文件在main.js中引入需要的scss文件如果显示错误为如下图所示打开webpack.base.config.js，删除掉注释部分的代码。因为vue-cli 项目里面配置了编译scss的，只要你...

简单利用vue实现多层嵌套列表渲染效果图如下效果图如下html部分&lt;ul&gt; &lt;template v-for="(item, index) in wjList"&gt; &lt;li class="voteList-li" v-for="newItem in item" v-on:click="addClassFun(index)"&gt;

首先我们用vue-cli新建项目。全局安装vue-clinpm install -g vue-cli创建一个名字为demo的项目。vue init webpack demo结果报错了，错误如下：在网上找了很多，没发现同样的错误，试了网上很多方法也不管用，然后看到一篇文章说要更新一下node.js和npm。试了一下，果然管用，更新方法如下：更新npmnpm i...

Vue.js + Vue Router简单实例使用 Vue.js ，我们已经可以通过组合组件来组成应用程序，当你要把 Vue Router 添加进来，我们需要做的是，将组件 (components) 映射到路由 (routes)，然后告诉 Vue Router 在哪里渲染它们。1， html部分在vue-router中, 我们看到它定义了两个标签 和来对应点击和显示部分。 就是定义页面中点击...