自定义博客皮肤VIP专享

*博客头图:

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

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

博客底图:

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

栏目图:

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

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

马优晨

撰写自己前端开发心得

原创 美团面试总结1

(1)简单理解Vue中的nextTick?https://www.jianshu.com/p/a7550c0e164f(2)keep-alive是如何实现的?https://www.jianshu.com/p/f3c52707656a(3)js遍历JSONhttps://www.cnblogs.com/qingqingzou-143/p/7079725.html(4)js遍历树https://www.cnblogs.com/cangqinglang/p/11307369.html(5)Vue

2020-08-06 09:58:54 30

原创 阿里面试总结1

(1) react组价设置react纯静态的组件:const Home = () => ( <> <Head> <title>Home</title> </Head> <div><Button>我是按钮</Button></div> </>)react动态的组件import React,{useState} from 'react

2020-07-30 22:15:39 63

原创 前端算法2

(1)日期格式化按所给的时间格式输出指定的时间格式说明对于 2014.09.05 13:14:20yyyy: 年份,2014yy: 年份,14MM: 月份,补满两位,09M: 月份, 9dd: 日期,补满两位,05d: 日期, 5HH: 24制小时,补满两位,13H: 24制小时,13hh: 12制小时,补满两位,01h: 12制小时,1mm: 分钟,补满两位,14m: 分钟,14ss: 秒,补满两位,20s: 秒,20w: 星期,为 [‘日’, ‘一’, ‘二’, ‘三

2020-07-26 23:37:08 60

原创 前端算法1

创建DOM第一种:for(let i=0;i<1000;i++){ var el = document.createElement('p'); el.innerHTML = i; document.body.appendChild(el);}第二种:let html =[];for(let i=0;i<100;i++){ html.push('<p>'+i+'</p>');}document.body.innerHTML = html.jo

2020-07-19 10:37:22 76

原创 PC端页面常见编辑

(1)PC端规则常用样式HTML<body> <div class=”rule”><div class=”rule-box”> <h2></h2 ></div></div></body>CSSbody{ min-width:1333px;}背景设置背景图:.rule{ height:630px; background:url(‘xxxxxx’) no-repea

2020-07-07 00:42:19 121

转载 vue常用分页器

vue-pagination-2使用,看代码:<template> <div class="news-content"> <ul class="news-item"> <!-- 数据便利 --> <li v-for="list in newsItem" :key="list.id"> <span>{{ list.title }}</span> </li&

2020-06-28 14:42:31 792

原创 使用require.context实现前端工程自动化

require.context介绍require.context是一个webpack的api,通过执行require.context函数获取一个特定的上下文,主要用来实现自动化导入模块,在前端工程中,如果遇到从一个文件夹引入很多模块的情况,可以使用这个api,它会遍历文件夹中的指定文件,然后自动导入,使得不需要每次显式的调用import导入模块require.context使用场景:在Vue写的项目中,我把路由通过不同的功能划分成不同的模块,在index.js中一个个导入(原谅ide的警告-.-),

2020-06-28 14:12:56 144

原创 vue-cli3 环境设置

vue-cli3默认设置:使用vue-cli3打包项目,通过配置不同的指令给项目设置不一样的配置。npm run serve时会把process.env.NODE_ENV设置为‘development’;npm run build 时会把process.env.NODE_ENV设置为‘production’此时只要根据process.env.NODE_ENV设置不同请求url就可以很简单的区分出本地和线上环境。头疼的是打包时线上环境可能分多种,比如测试环境和生产环境等等。配置多个环境:在vu

2020-06-28 13:53:48 129

原创 this.$router.go()和this.$router.push()的区别

this.router.go()和this.router.go()和this.$router.replace的差别this.$router.go(val) 介绍:在history记录中前进或者后退val步, - 当val为-1时回到上一页。 - 当val为0时刷新当前页面。 - 当val为1到下一页。this.$router.go(1) //类似history.forward() this.$router.go(-1) //类似history.back()this.$rout

2020-06-22 19:51:12 245

原创 clipboard使用总结

(1)介绍:clipboard.js是一款轻量级的实现复制文本到剪贴板功能的JavaScript插件。通过该插件可以将输入框,文本域,DIV元素中的文本等文本内容复制到剪贴板中clipboard.js支持主流的浏览器:chrome 42+; Firefox 41+; IE 9+; opera 29+; Safari 10+;(2)clipboard复印内容的方式有从target复印目标内容通过function 要复印的内容通过属性返回复印的内容target复印目标内容,这里不说,就说一

2020-06-22 19:32:18 250

转载 nodejs path.parse()

nodejs path.parse() 的使用方式为 path.parse(path)• path <string> 参数为`string`• 返回: <Object> 返回值为`Object`path.parse() 方法会返回一个对象,其属性表示 path 的有效元素。 尾部的目录分隔符会被忽略.在 POSIX 上(Liunx,unix,等可移植操作系统)在 Windows 上:参考地址: http://nodejs.cn/api/path/path_pa

2020-06-22 19:21:01 122

原创 js制作返回顶部

页面返回顶部有很多漂亮的形式,今天这里分享一个返回顶部的两个小动画。效果一:效果而:组件引入: <goTop></goTop> data() { return { test:”777 } }, components: {goTop}组件包含两个文件GoToTop.js 和goTop.vuegoTop.vue<template> <div class="goTopBT"> <d

2020-06-22 19:12:47 99

原创 ejs数据处理

ejs读取对象数据test.jsconst ejs=require('ejs');//ejs渲染的数据是在回调里面ejs.renderFile('./views/1.ejs', {name: '马优晨',age:18, pas:'888898'}, function (err, data){ console.log(data);});1.ejs<!DOCTYPE html><html> <head> <meta charset="

2020-06-20 15:00:19 83

原创 Jade数据处理

jade读取数据test.jsconst jade=require('jade');console.log(jade.renderFile('./views/7.jade', {pretty: true, a: 12, b: 5}));7.jadehtml head body div 我的名字:#{a+b}jade行内样式为对象,非行内是数组test.jsconst jade = require('jade')console.log( jade.renderF

2020-06-20 14:51:06 78

原创 express模板引擎jade与ejs

express模板引擎有很多种,常用的是jade和ejs。区别:jade-破坏式、侵入式、强依赖ejs-温和、非侵入式、弱依赖一、jade渲染数据到页面1.根据缩进划分层级2.属性用()表示,用逗号分隔 *style={} *class=[]3.内容 div xxx span xxx a(href="xxx") 链接4.渲染函数jade.render('字符串');jade.renderFile('模板文件名', 参数)二、ejs渲染数据到页

2020-06-19 09:26:58 61

原创 express中get和post的区别

express中get和post的区别1.GET请求无需中间件 req.query 即可2.POST请求需要中间件body-parser// 使用bodyParser,否则server中req.body无值server.use(bodyParser.urlencoded({ extended: false, //扩展模式是否启用 limit: 2*1024*1024 //限制-2M post数据大小}));3.模拟expre.

2020-06-19 09:15:21 92

原创 vue 路由跳转并打开新页面

let id ='123';const {href} = this.$router.resolve({ path: '/home/commodity_Inventory', query: {id: id}})window.open(href, '_blank')vue 路由跳转并打开新页面,主要使用了this.$router.resolve的方法。获取到href,再用原生JS的方式跳转。...

2020-06-18 16:49:46 170

原创 vscode显示中文乱码问题

用VS code,经常会遇到打开文件中文乱码的现象:选择菜单【文件file】 --> 【选项】–> 【设置Settings】 --> 【搜索Search settings】 “files.autoGuessEncoding” --> 勾选选即可。

2020-06-18 13:32:55 143

原创 express登录例子

本实例主要涉及红框圈出的文件:文件描述:www 里面存放静态文件a.html是我们的表单文件ajax.js是封装的一个ajaxserver2.js是建立的服务端文件代码简述:server2.jsconst express = require('express')const expressStatic = require('express-static') //用于改变静态资源路径var server = express()server.listen(8087) //监听到808.

2020-06-18 09:52:48 71

原创 node js的模块化的分类

一、node js的模块化的分类:(1)系统模块(2)自定义模块二、对外输出:对外输出东西——必须加给exports(1)单个输出:exports.xxx=??;exports.xxx=??;exports.xxx=??;(2)多个输出module.exports={ xxx: ??, xxx: ??, xxx: ??};(3)module.exports === exports 是等价的三、总结概括:require——引入其他模块exports——输出modu

2020-06-18 09:40:41 72

原创 npm发布包

npm发布包举例:(1)首先建立一个文件夹(2)登录npm账号(3)发布npm publish(4)出现问题问题1:403 Forbidden - PUT https://registry.npm.taobao.org/extract - no_perms 淘宝镜像可以输入一下命令查看当前的登录源: npm config get registry切回到npmjs源,输入以下命令:npm config set registry=http://registry.npmjs.org问题2

2020-06-18 09:34:22 69

原创 vue.config.js多页配置

vue.config.js多页配置,具体看代码:"use strict";const path = require("path");var webpack = require("webpack");function resolve(dir) { return path.join(__dirname, dir);}const port = process.env.port || process.env.npm_config_port || 8080; // dev portmodule.

2020-06-12 16:25:05 388 2

原创 js设置页面750适配

(function() { if (/Android (\d+\.\d+)/.test(navigator.userAgent)) { var version = parseFloat(RegExp.$1); if (version > 2.3) { var phoneScale = parseInt(window.screen.width) / 750; document.write( '<meta name="view.

2020-06-11 09:52:04 123

原创 css制作按钮按下去效果

CSS.login { cursor: pointer;}.login:active { position: relative; top: 8px; cursor: pointer;}效果

2020-06-05 14:07:45 299

原创 vue页面引入多个组件的方法

通常我们使用的是单个文件引入,但是这样就会有很多代码是重复的,怎样才能实现“按需“引入呢?如上图 no_started中引入no_bac1,no_bac2,no_bac3,no_bac4,怎么样才能代码看的美观呢?也就是按需引入。(1)这些被引入的文件放置在同一个文件下(2)配置文件夹下的index.js 文件内容index.jsexport { default as no1 } from './no_bac1.vue'export { default as no2 } from '.

2020-06-04 20:46:09 895

原创 vue使用@路径引入

vue使用@路径引入,这个在项目中很常见;项目中使用引入文件有时候路径比较深,需要使用"../../../xx.js"这种类似的路劲引入,这种方式比较笨,可以使用webpack的别名alias配置来解决。首先,先确定项目中是否有path模块:如果没有path模块需要先安装pathnpm install path --save(1)vue-cli1,vue-cli2搭建的项目以下为vue.config.js配置const path = require("path");function

2020-06-04 20:28:34 186

原创 Vue.config.productionTip = false

Vue.config.productionTip = false,阻止启动生产消息;没有Vue.config.productionTip = false这句代码,它会显示你生产模式的消息;开发环境下,Vue 会提供很多警告来帮你对付常见的错误与陷阱。而在生产环境下,这些警告语句却没有用,反而会增加应用的体积。此外,有些警告检查还有一些小的运行时开销,这在生产环境模式下是可以避免的。作用: 消息提示的环境配置,设置为开发环境或者生产环境...

2020-06-04 20:11:12 162

转载 Vue.use()是什么?

2.在 Loading.vue 中定义一个组件<template> <div class="loading-box"> Loading... </div></template>3.在 index.js 中 引入 Loading.vue ,并导出// 引入组件import LoadingComponent from './loading.vue'// 定义 Loading 对象const Loading={...

2020-06-04 20:06:49 132

原创 H5微信分享朋友、朋友圈、QQ

一、微信分享1.准备工作APPID公众号id、申请好友分享接口、ip白名单、js接口安全域名设置(必须是通过备案)。要先登录微信公众平台进入“公众号设置”的功能设置里填写“JS接口域名”2.引入js注意:支持使用AMD/CMD标准加载方法<script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script> 3.通过config接口注入权限验证配置所有需要使用JS-SDK的页面必须先注入配置信息,否则

2020-06-04 19:58:39 130

原创 IE10,IE9透明元素无法点击

场景说明先看下实际情况(谷歌,IE11,edge都是同样效果)(IE10,IE9,及以下都是同样效果)上面我们发现,如果在IE10 和一下,如果元素是透明的,则相当于没有该元素。处理方案为该元素加上一个透明背景加上透明背景后,IE10 就会识别该元素了。透明图片素材:看上面...

2020-06-02 15:51:59 82

原创 项目中的动画实例

代码实现:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, use.

2020-05-26 09:40:23 198

原创 使用vue-happy-scroll 自定义滚动条

这里演示一下使用vue-happy-scroll 自定义滚动条的方式;官方地址:https://github.com/tangdaohai/vue-happy-scroll兼容性:支持特性:安装npm i -D vue-happy-scroll使用引入import { HappyScroll } from 'vue-happy-scroll'// 引入css,推荐将css放入main入口中引入一次即可。import 'vue-happy-scroll/docs/happy.

2020-05-21 21:17:03 287 2

转载 video 属性和事件用法大全

(1) video属性<!-- video 不支持 IE8及以下版本浏览器,支持三种视频格式:MP4,WebM 和 Ogg --> <video src="test.mp4" controls width="400" height="300"></video> <!-- 禁止下载 --> <video src="test.mp4" controls controlslist="nodownload" width="400" height=

2020-05-21 09:48:07 76

转载 vue移动端弹框组件

这里说一下 vue-layer-mobile插件的使用一、npm 安装// 当前最新版本 1.2.0 npm install vue-layer-mobile// 如新版遇到问题可回退旧版本 npm install vue-layer-mobile@1.0.0二、调整配置:因为这个组件中有woff,ttf,eto,svg类型文件,所以要配置一些loader//在webpack.config.js中配置如下,首先安装url-loader和file-loader:{ test: /\.wo

2020-05-20 21:40:02 219

原创 swiper 在turn.js不能滚动

这个问题,使用turn.js的同学一定遇到过,那怎么解决呢?答案: 翻到对应包含swiper 的那页,重新初始化swiper假设这个是第3页 <div class="page-container flipbook" id="magazine"> <div v-for="(n, index) in 9" :key="`phone_${index}`" :class="`page${index}`" class

2020-05-20 21:28:48 82

转载 鼠标经过图片抖动效果

(1)全部图片抖动img:hover{ animation: tada 1s .2s ease both; -moz-animation: tada 1s .2s ease both;}@keyframes tada{0%{-webkit-transform:scale(1);}10%, 20%{-webkit-transform:scale(0.9) rotate(-3deg);}30%, 50%, 70%, 90%{-webkit-transform:scale(1.1) ro

2020-05-18 23:09:26 116

原创 hover时候缓慢切换两张图片

效果:hover的时候想让两张图片翻转的时候速度慢一点,而不是瞬间变成另一张图片,我们可以采用淡入淡出的效果。实例:<!DOCTYPE html><html><head> <style> #hover { position: relative; margin: 0 auto; } #hover img { positi

2020-05-13 13:52:55 227

原创 有效的字母异位词

给定两个字符串 s 和 t ,编写一个函数来判断 t 是否是 s 的字母异位词。实例1: 输入: s = "anagram", t = "nagaram" 输出: true实例2: 输入:s="rat",t="car" 2 输出: false方法一、 利用数组sort()方法思路首先,对字符串字母进行排序,然后,比较两字符串是否相等。详解首先,将字符串转为数组。利用数组 sort 方法进行排序。然后,转为字符串进行比较,如果相等返回 true,反之返回 fals

2020-05-12 23:41:04 72

转载 树与二叉树

2020-05-12 22:47:47 72

原创 翻转整数算法

给出一个 32 位的有符号整数,你需要将这个整数中每位上的数字进行反转。注意假设我们的环境只能存储得下 32 位的有符号整数,则其数值范围为 [−231, 231 − 1]。请根据这个假设,如果反转后整数溢出那么就返回 0。方法一、 翻转字符串方法如果将数字看成是有符号位的字符串,那么我们就能够通过使用 JS 提供的字符串方法来实现非符 号部分的翻转,又因为整数的翻转并不影响符号,所以我们最后补充符号,完成算法。首先设置边界极值;使用字符串的翻转函数进行主逻辑;补充符号然后拼接最终结

2020-05-11 23:43:43 63

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