自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(47)
  • 收藏
  • 关注

原创 curl 复制后在postman请求(详细篇)

我使用postman的版本号是v9.14.0打开postman点击import打开后就是下面这个页面选择Raw text在下方的Paste raw text 粘贴上你需要请求的curl粘贴后点击高亮continue按钮点击后会有新弹窗 再点击import保存后可直接send发送...

2022-03-07 12:08:47 9048

原创 终端报:“nvm is not compatible with the npm config “prefix“ option: currently set to “/usr/local“ Run”

Mac系统每在打开vscode终端、items终端都会出现下面提示解决办法是删除并重新设置 nvm prefix运行 nvm use --delete-prefix v14.17.0 --silent 确保npm命令可以使用;运行 npm config delete prefix 删除 nvm prefix;运行 npm config set prefix $NVM_DIR/versions/node/v14.17.0 设置 nvm prefix 为v14.17.0关闭开启的终端 再打开就

2021-10-18 15:15:56 943

原创 Error: sudo required (or change ownership, or define N_PREFIX)

安装指定版本的nodejsnode有一个模块n,是专门用来管理node.js的版本的。全局安装n模块:npm install -g n升级node.js到最新稳定版n stable解决方法:您是否以root用户身份在ubuntu计算机上登录?如果不是,请尝试使用sudo运行命令.列: sudo n stable 进行填写登陆密码4. 安装指定版本n v10.17.0...

2021-08-18 12:16:42 8201 7

原创 css实现炫酷按钮

效果图:代码: .btn { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 230px; height: 90px; line-height: 90px; text-align: c

2021-06-09 16:59:46 963

原创 moment.js中时间处理的常用方法

moment.js中时间处理的常用方法一、moment.js的官方文档二、安装引入三、使用方法一、moment.js的官方文档Moment.js 中文官方文档Moment.js 英文官方文档、二、安装引入 1. 安装moment npm i moment --save cnpm i moment --save 2. 引入moment import moment from 'moment' const moment = require('moment'

2021-05-13 18:25:57 2376

原创 es6数组方法find() findIndex() filter()的总结

es6数组方法find()二级目录二级目录find()用法:find详细用法介绍find() 方法返回通过测试(函数内判断)的数组的第一个元素的值。find() 方法为数组中的每个元素都调用一次函数执行:当数组中的元素在测试条件时返回 true 时, find() 返回符合条件的元素,之后的值不会再调用执行函数。如果没有符合条件的元素返回 undefined注意: find() 对于空数组,函数是不会执行的。注意: find() 并没有改变数组的原始值。二级目录二级目录...

2021-03-30 20:26:26 590

原创 ipone移动端底部安全区域化适配

<template> <div class="c-fixed-bottom"> <!-- 空白占位 --> <div class="c-fixed-bottom__seat" /> <div class="c-fixed-bottom__positioner" :style="customStyle"> <slot></slot> </div> </div

2021-02-26 11:43:44 379

原创 【报错】npm ERR! code EEXIST npm ERR! syscall symlink npm ERR! path ../lib/node_modules/@vue/cli/bin

vue-cli 安装:npm install -g @vue/cli问题描述:原因分析:主要原因是安装vue-cli的版本过低 不能进行执行 产生冲突解决方案:npm install -g @vue/cli --force 可以强制覆盖以前旧版本的vue-cli脚手架查看版本在执行创建项目vue create project-name(自己起的项目名)...

2021-02-25 16:16:59 3812

原创 前端面试常见面试题总结(持续更新)

前端面试常见面试题总结JS的数据类型有哪些 值是如何存储JS中数据类型的判断null 和 undefined 的区别toString()与valueOf()的区别javascript 创建对象的几种方式谈谈你对this、call、apply和bind的理解JS的数据类型有哪些 值是如何存储JavaScript一共有8种数据类型,其中有7种基本数据类型:undefined、Null、Boolean、Number、String、Symbol(es6新增,表示独一无二的值)和BigInt(es10新增)1种

2021-02-19 17:22:37 244

原创 animation漂浮、呼吸、渐变、滚动(带效果图)

1、使用@keyframes规则定义动画 如:@keyframes float-vertical { 0% { transform: translate3d(0, 0%, 0); } 25% { transform: translate3d(0, 5%, 0); } 75% { transform: translate3d(0, -5%, 0); } 100% { transform: translate3d(0, 0%, 0); }

2021-01-22 15:31:57 2457

原创 背景音乐播放实现(轻松学会)

html结构部分 <!-- 上传音频不要过大 --> <audio id="audio" src="https://image1.guazistatic.com/qn210114171938ed9dcb199aaacb61474b26ad643ac2de.mp3"> </audio> <!-- isOff默认是true --> <div @click="changeOn" :class="isOff ? 'isOff

2021-01-19 11:11:43 383

原创 字符串转化时分秒

实现效果如下:后端返回6052715 要将这个转为时分秒格式<div class="content-moneybox-two">距结束还剩{{ newtime }}</div>data() { return { newtime: '0时00分00秒', } },// 时间处理 formatDuring() { // eslint-disable-next-line n

2021-01-09 11:33:31 1728

原创 根据后端所给数据在页面相应展示星星数量

实现展示的效果图:我这边写成组件可以参考一下:用法 :<star :value="60"></star><template> <div class="star_box"> <div class="star_item" v-for="index in 5" :key="index + 'star'"> <!-- 执行starIndex方法 --> <img :src="imagePat

2020-12-30 18:14:39 714

原创 iPhoneX样式适配兼容问题

问题出处: 在我们进行定位时要距离底部tab 100px 在安卓手机距离底部达到了我们的预期效果 但苹果手机没有 这时候我们就要写一下样式的适配1、网页在可视窗口的布局方式viweport-fit 属性: iOS11 新增特性,苹果公司为了适配 iPhoneX 对现有 viewport meta 标签的一个扩展,用于设置网页在可视窗口的布局方式,可设置三个值:contain: 可视窗口完全包含网页内容cover:网页内容完全覆盖可视窗口auto:默认值,跟 contain 表现一致更详细说

2020-12-30 17:09:32 824 1

原创 说一下devDependencies和dependencies的区别

生产环境 用户发布环境(dependencies) 项目的核心依赖 离开了项目没法正常运行 必须存在在终端下载时候:npm install 插件名 --save 或 npm install 插件名会在package.json中的dependencies展示 如下图:**用于本地开发环境(devDependencies)辅助开发 没有项目照样运行 有了会更好**在终端下载时候:npm install 插件名 --save-dev会在package.json中的devDependen

2020-11-16 12:09:50 168

原创 Mac iTerm2最常用快捷键

先说一下打开

2020-11-15 01:11:24 403

原创 运行js脚本的方法

1、基于node.js环境如没有node要先安装下载node环境在安装node环境中要运行js脚本时候用:node+空格+要执行的js文件名称2、使用IDE在vscode辨析器中有个下载插件的地方 下载Code Runner插件再点击右键、会弹出的菜单中显示有一个Run Code 点击就可运行在这就可以看到运行结果输出:...

2020-11-05 16:02:52 2122

原创 实现全屏退出全屏的功能

直接上实现效果:一、先进行安装npm install --save screenfull二、template写入<div @click="clickFullscreen"> <img src="../../assets/big.png" alt width="15px" height="15px"/>全屏 </div>三、在script引入并写入![import screenfull from "screenfull";](https

2020-09-18 08:03:47 450

原创 使用vue-i18n实现切换中英文

一、在使用之前先安装:npm install --save vue-i18n二、进行引入import Vue from 'vue'import App from './App.vue'import router from './router'import store from './store'import VueI18n from 'vue-i18n';//引入写好的语言包 看不懂往下看import { messages } from './components/common/i1

2020-09-17 19:55:58 659

原创 vue 实现随机背景图

话不多说上效果:简单来实现一下下面是要设置背景变化的地方:<div class="login-container" :style="backgourndStyle"></div>computed:{ backgourndStyle:function(){ // 计算body可用高度 let cHeight = window.outerHeight - (window.outerHeight - window.

2020-09-15 19:49:26 1879 2

原创 vue路由点击跳转页面title随之变化

先看实现的效果视频:一、要在router文件下的index.js文件下写(每一个路由对象下配置meta)下面那我写的这个项目举例const router = new Router({ routes: [ { path: '/Login', name: 'Login', component: Login, meta: { title: "登录系统" } }, { path: '/ErrorRouter',

2020-08-28 11:15:57 1061 1

原创 npm install报错“Unexpected end of JSON input while parsing near

报错如下:解决方法:先清除缓存 再重新下载项目 安装清除缓存:运行npm cache clean --force然后重新下载项目重新安装:npm install

2020-08-27 16:03:41 262

原创 小程序中跳转页面的方发(以及使用)

一、wx.navigateTo用于保留当前页面、跳转到应用内的某个页面,使用 wx.navigateBack可以返回到原页面。对于页面不是特别多的小程序,通常推荐使用 wx.navigateTo进行跳转, 以便返回原页面,以提高加载速度。当页面特别多时,则不推荐使用。写法1标签 <navigator class="item" wx:for="{{categories}}" wx:key="{{id}}" url="/pages/list/list?cat={{item.id}}">

2020-08-19 20:43:17 216

原创 小程序实现轮播图(附效果图和代码)

那个先上效果:step1:页面index.wxml代码<!-- 轮播 --><swiper class='u-wrp-bnr' indicator-dots='true' autoplay='true' interval='5000' duration='1000' circular='true'> <block wx:for="{{bnrUrl}}" wx:for-index="index" wx:key="index"> <swiper-item&

2020-08-15 19:42:12 4013 1

原创 小程序中怎么设置单独页面下拉刷新?

要使用小程序中的下拉刷新上拉加载就要在app.js中配置: "window": { "backgroundTextStyle": "light", "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "本地生活项目", "navigationBarTextStyle": "black", "enablePullDownRefresh":true, "onReachBotto

2020-08-14 16:38:08 1407 1

原创 微信小程序实现todolist(适合初学者)

微信小程序 第一个学习示例(TodoList)特别适合新学小程序的新手首先先看一下效果视频:先说一下要包含以下功能点击进行对数据的添加 还有回车事件数据分为未完成和已完成两部分可以对数据进行删除在未完成的复选框下点击 到已完成 同理点击已完成的复选框内容到未完成中在本地进行对数据存储 刷新数据还存在一、页面设计index.wxml<!--index.wxml--><!-- 搜索框 --><view class="search_box"> &

2020-08-13 23:36:44 4077 1

原创 实现小程序底部导航tabBar

一般在app和电商网站中底部的切换高亮显示是非常的常见的现在来实现一下:一、首先先找到文件目录下的二、在这个app.josn文件中写入{ "pages": [ "pages/index/index", "pages/message/message", "pages/profile/profile", "pages/contact/contact" ], "window": { "backgroundTextStyle": "light",

2020-08-12 16:35:24 471

原创 使用element-ui表格实现分页功能

实现效果:一、将获取到的数据进行计算<!-- 表格区域 -->// uaerlist是获取数据的数组后面写入 // .slice((currentPage-1)*pagesize,currentPage*pagesize) <el-table :data="uaerlist.slice((currentPage-1)*pagesize,currentPage*pagesize)" stripe style="width: 100%"

2020-08-11 10:29:58 641

原创 Vue实现滚动页面头部背景渐变实现

一、在页面加载完成后,在开始滚动之前:这个是显示的返回上一次到路由的地方<div class="iconfont back_up" @click="gotoup" v-show="isSHow">&#xe60d;</div>先在data中定义属性:data(){ return { showhash:true, isSHow: true, }}将"Header"栏所在的div 设置固定定位,用标志位showhash设置v-show...

2020-08-09 23:10:53 2381

原创 Vue提示“[vue-router] Named Route ‘Home‘ has a default child route. When navigating to this named rout“

这个是提示不是错误 这个会出现的原因就是因为如下:const router = new Router({ routes: [ { path: '/', name: 'HelloWorld', component: HelloWorld, children:[ { path:'/', name: 'home', component: home, }

2020-08-08 20:09:22 1427

原创 Vue中滚动页面回到指定位置

方法1:// 可以用来获取top值// 可以不用加单位,这样写的话就是让滚动到什么位置 document.documentElement.scrollTop = 300方法2://先获取目标位置距离mounted() { this.$nextTick(() => { setTimeout(() => { let targetbox= document.getElementById('box'); //在data中定义 t

2020-08-05 19:45:34 1494

原创 运行报错:‘webpack-dev-server‘ 不是内部或外部命令也不是可运行的程序

‘webpack-dev-server’ 不是内部或外部命令 也不是可运行的程序 或批处理文件 如何解决处理就有的时候在我们启动项目npm run dev 报错如下:首先遇到这个情况不要慌不要删文件乱改文件觉得自己写错什么才这样解决方法:把项目中的根目录删除node_modules文件夹,然后在项目根目录路径下的终端运行打入"npm install" 在这里说一下npm install 项目文件中并没有 node_modules文件夹,项目的依赖文件,npm会根据package.json配置

2020-08-03 23:03:50 1172 1

原创 css3标准盒模型和怪异(IE)盒模型

前端和盒模型包括两种 分别是W3c盒模型和IE盒模型W3C盒模型包括content、padding、border、margin 其中width = contentIE盒模型包括content、padding、border、margin 其中width = content+padding+border在之后后来W3C在CSS3中新增了box-sizing的样式 属性包含content-box和border-box也就是box-sizing:content-box就是默认(在设置时候)的样式(W3C盒模

2020-08-02 00:18:33 423

原创 Vue中插件实现轮播图 轻松学会

Vue Slide Show 基于Vue的轮播图组件vue的轮播图是通过vue-awesome-swiper来实现的,及时vue版的swiper可以在github.com 上搜索 vue-awesome-swiper来参考一下1.安装 vue-awesome-swiper指定版本npm i vue-awesome-swiper@2.6.7 --savenpm install vue-awesome-swiper@3.1.1 --save-dev注意!先开始安装我是使用 vue-awesom

2020-07-31 23:25:41 1056

原创 element-ui表格中的数据转换为时间戳

vue element-ui表格里时间戳转换成时间显示//这是表格下绑定渲染的数据 <el-table-column prop="create_time" label="注册时间" :formatter="dateFormat"> </el-table-column>//加入 :formatter="dateFormat"//使用element table组件中的formatter属性 传入一个函数//ui中自带的方法 methods:{ dateFormat

2020-07-27 14:23:06 1983 2

原创 Vue中的data要用return返回函数

关于vue中data里为什么有return返回函数问题首先先看一下下面的代码var vm = new Vue({ el: '#example', data: { message: 'Hello' }});这种写法data对象是引用类型//在vue组件中这样写data() { return { message: 'Hello' }}函数写法,每次返回新对象有人要问到为什么要把data变成函数return返回1)在简单的Vue实例中,因为你app对象不存在

2020-07-21 10:20:23 2045

原创 Vue中实现高低排序

下面是例子 <button @click="up">从高到低</button> <button @click="down">从低到高</button>js代码export default { data() { return { itemList: [1, 2, 3, 4, 5, 6] }; }, methods: { // 从高到低 up() { this.itemList.sor

2020-07-20 19:44:58 725

原创 javaScript中去除重

怎么把字符串中字母相同的个数找出来// 统计字母出现的个数var str = "dewjiedufccxed";var object={}for(let index = 0;index<str.length;index++){ // 把str中的每一个拿出来 var a = str[index] // 看新对象下有没有那个值 if(object[a]){ // 有一次加一次 object[a]++; }else{

2020-07-17 19:37:28 227

原创 React的安装创建项目【详细步骤】

1.首先一定要安装node环境和npm 不安装是无法使用可以去node官网下载https://nodejs.org/64位可以直接点这个下载https://nodejs.org/dist/v10.16.0/node-v10.16.0-x64.msi2.在下载过后打开运行命令窗口(ctrl+r)在这上打入 node -v (这个是查看呢安装的版本号)有这个就是安装node成功和上面呢一步差不多执行 npm -v 返回版本号即可3.设置NPM国内npm有点慢,可以设置成淘宝的镜像来代替原有的。

2020-07-04 15:23:43 465

原创 vue 实现横向滑动

<template> <div class="sliding_box"> <div class="sliding_item" v-for="(item,index) in content" :key="index"> <div class="sliding_item_img"> </div> </div> </div></template><script>e

2020-07-02 08:11:43 3730

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除