马优晨_CSDN博客-前端开发,小技巧,vue领域博主

原创美团面试总结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 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