- 博客(32)
- 收藏
- 关注
RSS订阅原创 在vue项目中使用v-show控制元素隐藏导致swiper的轮播图及分页无法正常显示
一、需求问题在之前的项目开发中，使用了swiper插件。由于是vue项目，对于swiper的轮播图我们使用了v-show命令，进行动态隐藏与显示。只有当点击进行一些操作以后，swiper的轮播图才会显示出来。但是，在使用v-show命令以后，swiper的轮播图显示和分页不正常，样式出现问题，无法正常显示。二、需求分析在swiper的配置中，我们一开始进行配置了pagination和pagi...
2019-12-31 17:41:31
2824
原创 Property or method "list" is not defined on the instance but referenced during render.解决
一、问题描述在之前的项目开发中，也遇到了这样的一个问题， Property or method "list" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-b...
2019-12-31 15:53:54
38543
6
原创 Strings must use singlequote的vue项目报警示的解决
一、问题描述在之前的项目开发中，也遇到了这样的一个问题，http://eslint.org/docs/rules/quotes Strings must use singlequote，如图所示：二、问题解决这个问题说明必须使用单引号，在vue的项目开发中，如果我们在通过vue-cli脚手架构建项目的时候使用了Eslint严格模式，那么对于字符串类型的数据String必须要使用单引号，不能...
2019-12-31 12:44:49
46818
原创 单行文本和多行文本框实现溢出省略的效果
一、需求问题在开发中，我们可能也会遇到这样的需求。当在单行或者多行的时候，文本的内容溢出了，需要隐藏，可以用省略号去表示。下面是我的实现方式。二、需求分析对于单行文本框溢出省略，我们可以使用overflow、white-space和text-overflow来进行单行文本省略截断，实现文本溢出省略的效果。对于多行文本框溢出省略，我们可以使用line-height、overflow、float...
2019-12-31 00:06:25
843
原创 vue中使用Echarts绘制K线图
一、需求问题在开发项目中，我们可能会遇到这样的需求。在vue中使用Echarts绘制K线图，进行数据分析。下面是一个简单的K线图绘制，数据是伪造的，虽然不多，但是能够实现大致的K线图效果。二、需求分析对于使用Echarts绘制K线图，首先我们需要下载Echarts，可以通过 npm install echarts --save命令下载。在这个文件中引入echarts，创建echarts的挂载...
2019-12-28 23:41:10
4605
2
原创 在vue中通过Echarts封装图表组件
一、需求问题在开发vue的项目中，我们可能会遇到这样的需求。我们需要去封装一个图表组件，然后这个图表组件在多个不同的页面中都是可以使用的。下面也就是我所封装的图表组件Chart，可以去实现复用。二、需求分析我们需要先引用echarts，初始化图表，设置配置项，进行渲染，监视传入的option参数，如果有变化则重新设置配置项，这样一个图表组件就已经封装好了。在其它页面当中，进行图表组件的引入。...
2019-12-28 15:25:55
1753
原创 在vue中使用Echarts图表工具
一、第一步，下载Echarts，通过npm install echarts --save 或者是 cnpm install echarts --save 命令进行下载。 npm install echarts --save二、第二步，引入Echarts，代码如下所示： var echarts = require('echarts');三、第三步，对于Echarts进行初始化...
2019-12-28 11:03:00
447
原创 移动端开发中android手机输入框获取焦点，软键盘弹出会遮挡表单如何解决
一、需求问题在移动端开发的表单页面当中，在android手机上，当点击表单页面的输入框以后，获取焦点，软键盘弹出，会覆盖住表单页面的输入框，会出现这样的问题。二、需求分析这种问题出现在android手机上，当输入框在可视区域底部或者偏下的位置，输入框获取焦点弹出软键盘，软键盘覆盖表单页面中的输入框。这个也是android手机经常遇到的问题。第一种方法：我们可以在页面渲染完成后，通过JS...
2019-12-28 01:03:50
1484
原创 移动端输入框调取iphone手机ios端键盘fixed定位失效如何解决
一、需求问题在开发移动端项目的时候，iphone手机的软键盘在弹出以后，会与 position:fixed 冲突发生问题。当ios系统的手机点击输入框的时候，软键盘就会弹出，底部的输入框就会被顶到上面来。当软键盘消失后，滚动区域没有正确的回正，会导致一些内容点击事件无效。fixed定位好的元素，会跟随页面一起滚动起来，fixed定位属性也就是会失效了。二、需求分析在ios软键盘被唤起后，页面...
2019-12-27 18:14:04
1573
原创 常见的User-Agent总结
一、User-AgentuserAgent是用户代理，使得服务器能够识别客户使用的操作系统及版本、CPU类型、浏览器及版本、浏览器渲染引擎、浏览器语言、浏览器插件等等。二、常见的User-Agent总结window.navigator.userAgent 1) ChromeWin7:Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/535...
2019-12-27 11:15:02
2688
原创 vue插槽slot的默认插槽、具名插槽与作用域插槽的用法
一、vue的插槽slot在vue的开发当中，我们可能也经常会使用插槽slot，父组件给子组件传递DOM元素。插槽的实质，实际上是对于子组件的扩展，通过slot插槽向组件内部指定位置传递内容，也是承载内容分发的出口。在这里，以默认插槽、具名插槽和作用域插槽进行总结说明。二、vue的默认插槽1. 默认插槽的说明：默认插槽相当于是在子组件中写明插槽的内容，当父组件在使用子组件的时候，同时父组件没...
2019-12-27 00:14:08
2106
原创 移动端开发如何判断当前环境是ios、安卓android还是微信浏览器
一、需求问题在移动端开发中，我们有的时候需要判断当前的环境，是苹果ios环境、还是安卓android环境，还是微信浏览器环境。二、需求分析判断当前环境是ios、android还是微信，我们可以从两个值进行判断。第一个参数值是userAgent，window.navigator.userAgent，用户代理，使得服务器能够识别客户使用的操作系统及版本、CPU类型、浏览器及版本、浏览器渲染引擎、...
2019-12-26 18:34:33
2275
原创 vue中组件传值方法的总结
一、vue中组件传值在vue中，组件传值有很多方法，父组件给子组件传值、子组件给父组件传值，非父子组件传值、Vuex等等。在这里，以父组件给子组件传值、子组件给父组件传值，非父子组件传值这三种传值方法进行总结说明。二、父组件给子组件传值1. 父组件给子组件传值的方法：父组件在调用子组件的地方，会添加一个自定义的属性，这个属性的值就是传递给子组件的数据，如果这个值是变量，那么就需要绑定属性。...
2019-12-26 16:44:53
635
原创 解决移动端项目中苹果ios和安卓android手机点击输入框网页页面自动放大缩小
一、需求问题在公司的项目开发中，我们经常需要开发移动端的项目。但是，在移动端中，点击输入框的时候，网页页面会自动放大或者缩小。这个也并不是我们所想要的，我们只需要向输入框中输入内容就可以了。二、需求分析针对移动端的这个问题，我们需要分两种情况进行考虑，安卓端和苹果端。如果是对于安卓手机端，我们可以设置名为viewport的meta标签，设置 minimum-scale、maximum-sca...
2019-12-25 23:44:33
2241
原创 vue中Element UI表格分页功能的实现
一、需求问题在vue的开发中，如果需要开发管理系统，那么Element UI就是一个不错的UI框架。在Element UI中的表格数据，如果数据量大的话，通过后端进行分页。如果数据量不大的话，我们可以直接通过前端进行分页。在Element UI中也提供了分页组件 el-pagination,下面就是通过 el-pagination 实现表格的分页功能。二、需求分析在使用Element UI的...
2019-12-24 00:56:49
1297
原创 node + express + mongodb 从0到1创建一个项目
第一步，安装express，可以通过 npm i express -S 或者是 cnpm i express -S命令进行安装第二步，安装express项目脚手架，可以通过 npm i express-generator -g或者是 cnpm i express-generator -g 命令进行安装第三步，通过express脚手架创建项目，可以通过 express...
2019-12-21 00:21:57
210
原创 vue项目中swiper组件的使用
一、需求问题在vue的移动端项目中，我们可能需要用到各种各样的触摸滑动场景。swiper是一个非常好用的触摸滑动组件，在vue的移动端项目应用的也是比较多的。二、需求分析如果想要使用swiper，需要先在官网中进行下载 swiper-4.1.0.min.css 和 swiper-4.1.0.min.js 这两个文件，然后在vue项目中public文件夹下的index.html文件中进行引入。...
2019-12-20 18:06:03
1423
原创 vue通过Vuex实现多页面的数据联动
一、需求问题在vue的开发中，可能会经常遇到这样的需求。在一个页面中有一些选择的信息，比如说城市列表信息，当选择不同的城市信息后，所有相关页面的数据都会发生变化，也就是多页面的数据联动。这种多页面的数据联动在外卖平台、生鲜平台、电影平台等等是非常常见的。二、需求分析针对多页面的数据联动，我们可以使用Vuex配合本地存储区解决。关于Vuex和localStorage的结合，可以看一下我之前写的...
2019-12-20 13:52:48
4336
原创 vue解决多页面组件使用keep-alive而mounted不能多次触发问题
一、需求问题在vue的开发中，我们可能会遇到这样的需求。当在多个页面组件进行切换的时候，并且页面组件使用了Keep-alive的情况下，如果使用mounted()钩子函数去做页面的数据请求，那么只会触发一次。如果下次一些相关的定位信息发生了改变，再次切换页面组件的时候，相关的页面不会再重新发起数据请求，跟随相关的定位信息发生改变。二、需求分析在vue中，keep-alive是能够缓存动态组件...
2019-12-20 01:01:07
5348
原创 vue自定义封装Loading组件
一、需求问题在vue的开发中，会经常遇到这样的需求。当在页面内容进行加载的时候，会进行请求数据，然后显示页面。在这个等待的过程中，会出现一段时间的白屏，我们可以通过加一个loading的效果，进行过渡，然后显示页面。二、需求分析在components文件夹中，建立Loading文件夹，里面建立index.vue文件，作为Loading组件。这个加载组件在页面的多个位置中都可能会用的到，可以...
2019-12-19 10:37:25
2272
原创 vue通过Vuex和localStorage实现本地存储和状态管理，页面刷新后状态保持不变
一、需求问题：在vue的项目开发中，我们可能会经常遇到这样的需求，实现多个复杂的页面之间通信，传统的父子、子父、非父子组件通信可能是满足不了，这个时候可以用到Vuex状态管理器。但是Vuex在页面刷新以后，状态会丢失，所以可以用到本地存储技术localStorage去解决。这里以点击选择城市列表的城市后，所有页面的城市都会跟着变换，在刷新页面后，城市信息保存，不会发生丢失。二、需求分析：在...
2019-12-18 23:31:31
3388
原创 vue通过better-scroll 封装自定义的下拉刷新组件
一、需求问题在vue的项目中，我们可能也经常会遇到这样的需求。当在页面当中，对页面进行下拉刷新，重新请求数据，加载新的内容。针对这个，我们可以使用better-scroll，在此基础上进行封装下拉刷新组件，实现多个页面都可以使用这个组件，下拉刷新，得到复用。二、需求分析在components文件夹中，建立Scroller文件夹，里面建立index.vue文件，作为Scroller组件。这个...
2019-12-18 18:19:42
525
原创 better-scroll的使用以及常见的api总结
一、 better-scroll的使用通过cnpm i -S better-scroll 或者是 npm i -S better-scroll 命令就可以进行下载better-scroll到项目中通过import BScroll from 'better-scroll';语句引入到页面当中，再通过 new BScroll创建BScroll对象，接受两个参数，第一个是DOM对象，第二个是opt...
2019-12-18 16:50:59
3597
2
原创 vue项目进行防抖实现请求频繁时取消上一次操作
一、 需求问题：在项目开发中，可能会连续发送多个请求，但是我们只想发送一次请求。比如在搜索框进行输入内容的时候，当在每输入一个字符的时候都会进行搜索查询，频繁发送请求，对服务端造成不必要的请求压力，这就需要在发送新请求的时候取消上一次的操作。只有当所有的内容都输入完毕以后，再进行内容的搜素查询请求。这个也是防抖的常用情景。二、 需求分析：针对在vue项目中，我们进行防抖，请求频繁时取消上一次的操...
2019-12-17 16:58:37
1401
原创 vue通过v-model和watch实现搜索输入框动态查询
一、需求问题：在开发当中，我们可能会遇到这样的需求，当在搜索输入框输入查询的关键字后，后面能够动态的进行查询，并且显示出来二、需求分析：既然需要使用输入框查询，那么需要通过v-model进行双向数据绑定，而在输入关键字后，能够动态的显示查询出来的数据，需要使用watch监听。当在数据发生变化后，能够立马进行监听到，然后进行相应的监听回调，动态查询数据并显示。三、需求实现：<templa...
2019-12-17 00:51:50
3158
原创 Git常用命令总结
1. git log 查看日志# 输出概要日志,这条命令等同于# git log --pretty=oneline --abbrev-commitgit log --oneline# 指定最近几个提交可以带上 - + 数字git log --oneline -5# 提供类似 GUI 工具的 log 展示git log --graph --date=relative --pret...
2019-12-12 19:27:15
212
原创 运用js实现页面内容一键复制的功能
1. 在开发当中，会经常遇到一键复制功能的需求，比如微信网页端，需要复制一些口令等，下面是我的实现方法，可以实现点击按钮后，将页面的内容实现一键复制2. 代码实现：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewpo...
2019-12-12 17:37:16
926
原创 解决ElementUI中默认样式的修改
一、问题描述：在ElementUI中，有的组件样式并不是我们所需要的，需要进行修改，对默认样式进行修改为目标样式，但是直接写样式是不成功的，修改不了的二、解决办法：通过创建一个css文件，然后在某一个组件中引用，css文件中使用和组件样式一样的命名，这样组件的默认样式就会被覆盖在需要更改的组件里新增一个style标签，不要加scoped，然后直接获取class设置样式使用 /deep...
2019-12-12 15:59:27
1218
原创 原生vue实现VantUI中IndexBar索引导航栏功能
一、思路说明：这里是以城市列表数据作为索引，通过对于城市拼音的首字母进行Index索引标识，通过右侧的字母索引列表，能够快速到定位到左侧的城市列表信息，找到指定的字母Index下的所有城市列表信息数据，并且进行显示，实现了VantUI中IndexBar索引导航栏功能。二、代码实现：<template> <div class="city_body"> ...
2019-12-05 19:41:13
4523
1
原创 MySQL中文乱码问题解决方案
mysql> show variables like 'character%'; （查看字符集,发现为latin1: character_set_server | latin1 ）2.[root@linux2018 ~]# cd /usr/share/mysql/ （进入mysql安装目录）3. [root@linux2018 mysql]# ll （列出mysq...
2019-12-05 19:13:10
151
原创 vue-router.esm.js?8c4f:2079 Error: Cannot find module '../../../vue-temp/vue-editor-bridge' 解决
问题描述：在之前的项目开发中，遇到了这个异常， vue-router.esm.js?8c4f:2079 Error: Cannot find module '../../../vue-temp/vue-editor-bridge'解决办法：找不到模块，说明缺少对应的模块， Cannot find module 可以明白1）第一种方式，加入 import func from '../...
2019-12-05 19:01:07
12718
原创 Linux下安装MySql过程
rpm -qa|grep mysql （检查mysql是否已安装）rpm -qa|grep mariadb （检查mariadb是否已安装）mariadb-libs-5.5.56-2.el7.x86_64 （检查到mariadb已安装）rpm -e --nodeps mariadb-libs （删除mariadb，去除依赖）...
2019-12-04 11:34:44
125
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人