前端
onpine
这个作者很懒,什么都没留下…
展开
-
1rem、1em、1vh、1px各自代表的含义
rem页面所有使用rem单位的长度都是相对于根元素<html>元素的font-size大小。即1rem等于根元素元素的font-size大小。em子元素字体大小的em是相对于父元素字体大小。元素的width/height/padding/margin用em的话是相对于该元素的font-size。vh、vw全称是 Viewport Width 和 Viewport Height,视口的宽度和高度,1vh相当于 视口高度的 1%。pxpx像素(Pixel),相对长度单位。像素px原创 2021-05-03 11:48:12 · 3004 阅读 · 0 评论 -
双飞翼布局
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>双飞翼布局</转载 2021-05-03 11:29:28 · 127 阅读 · 0 评论 -
圣杯布局
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>圣杯布局</t原创 2021-05-03 11:28:46 · 139 阅读 · 0 评论 -
apply()、call()、bind()的区别
Function.prototype.apply()MDN:apply() 方法调用一个具有给定this值的函数,以及以一个数组(或类数组对象)的形式提供的参数。调用有指定this值和参数的函数,返回的是结果,这点与call相同与call()相比接收的参数是参数数组func.apply(thisArg, [argsArray])Function.prototype.call()MDN:call() 方法使用一个指定的 this 值和单独给出的一个或多个参数来调用一个函数。调用有原创 2021-05-03 10:14:51 · 106 阅读 · 0 评论 -
JS 手写深拷贝
var oldObj = { name: '范德彪', age: '43', designation: ['水库浪子','彪记靓汤总经理','彪哥解梦馆'], relationship: { jiefu: '马大帅', girl: '桂英', }}function deepClone(obj) { if(typeof obj !== 'object' || obj == null){ return obj; } let result = unde原创 2021-05-02 20:26:30 · 267 阅读 · 0 评论 -
VueCLI使用VSCode开发结合ESLint与Vetur格式化代码
1、在使用VueCLI创建项目时选择ESLint校验2、VSCode安装Vetur和ESLint插件3、在setting.json中添加下面几行配置"editor.codeActionsOnSave": { "source.fixAll.eslint": true, },4、对Vetur进行配置,让其不对js代码格式化5、检查ESLint是否启用6、最后,我们可以在项目根目录下的.eslintrc.js中自定义eslint规则...原创 2020-11-06 13:57:04 · 379 阅读 · 0 评论 -
CSS 文字两行显示,超出隐藏
// 两行显示,超出隐藏display: -webkit-box;overflow: hidden;-webkit-box-orient: vertical;-webkit-line-clamp: (2);原创 2020-10-27 19:14:34 · 2223 阅读 · 0 评论 -
简单的根据浏览器窗口宽度的响应式布局
// 当浏览器窗口宽度大于1000px且小于1200px时的布局样式@media screen (min-width: 1000px) and (max-width: 1200px) { #content { position: relative; width: 20%; background-color: #eeeeee; margin: 0; padding: 0; box-shadow: 0 0 10px 0 #333333; }}..原创 2020-10-20 20:36:34 · 510 阅读 · 0 评论 -
(VUE)JS判断滚动条滑动到底部加载更多数据,并防止事件多次触发
首先在mounted中添加滚动条scroll监视事件 mounted() { //监视scroll滚动条 window.addEventListener("scroll", this.isRefresh, true); },在isRefresh函数中,当第一次到达底部时我们将isRefreshBool变量变为false(禁止refresh()加载数据函数多次触发),当我们的refresh()函数中请求完成后再将isRefreshBool设为true(允许到达底部执行refr.原创 2020-10-20 09:26:35 · 2587 阅读 · 1 评论 -
微信小程序开发npm安装第三方包
1、初始化项目,在小程序根目录下执行npm init2、npm安装第三方库,例如 antv/wx-f2npm install @antv/wx-f2 --save3、在开发详情的本地配置中勾选使用npm模块4、在工具栏中选择构建npm,完成构建后点击确定5、使用第三方包;打开json文件,引入组件{ "usingComponents": { "f2": "@antv/wx-f2" }}...原创 2020-10-19 14:58:06 · 734 阅读 · 0 评论 -
Nodejs笔记 path模块
var path = require('path')//动态的获取路径var dirPath = __dirname //当前文件所处目录的绝对路径var filePath = __filename //当前文件的绝对路径var textPath = path.join(__dirname,'text.js') //text.js的绝对路径原创 2020-10-10 16:45:02 · 64 阅读 · 0 评论 -
JavaScript异步编程 Promise 笔记
var fs = require('fs')var p1 = new Promise(function (resolve, object) { fs.readFile('./a.txt', 'utf8', function (err, data) { if (err) { object("error") } resolve(data.toString()) })})var p2 = new Promise(fun原创 2020-10-08 21:15:34 · 55 阅读 · 0 评论 -
Vue生命周期函数:实例生命周期钩子函数
生命周期 ?:从Vue实例的创建、运行、到销毁期间,伴随着各种各样的事件,这些事件统称为生命周期生命周期钩子?:是指生命周期事件主要的生命周期函数分类:创建期间的生命周期函数:beforeCreate :实例刚在内存中被创建出来,此时,还没有初始化data和methods属性created :实例已经在内存中创建完成 ,此时data和methods已经创建好,此时还没有开始编译模板,这里是最早可以操作data数据和调用methods函数的地方beforeMount :此时已经完成了原创 2020-05-28 10:26:06 · 303 阅读 · 0 评论 -
Vue.js自定义指令及其钩子函数
对普通 DOM 元素进行底层操作,会用到自定义指令,我们以输入框获取焦点为例:当页面加载时,输入框将获得焦// 注册一个全局自定义指令 `v-focus`// Vue.directive('指令名', {钩子函数} )Vue.directive('focus', { // 当被绑定的元素插入到 DOM 中时…… inserted: function (el) { // 聚焦元素 el.focus() }})// 这里是Vue实例中注册一个局部指令 `v-focu原创 2020-05-27 18:30:37 · 971 阅读 · 0 评论 -
ES6中新增的字符串补全方法 padStart 和 padEnd
padStart 和 padEnd作用类似,都是当字符串字符串的长度不够时,用特定的字符填充字符串,是字符串长度达到指定的长度;区别在于padStart再字符串前端进行填充,二padEnd再字符串尾部填充padStart 和 padEnd都有两个参数:参数1:指定字符串长度参数2:当长度不足时,指定进行填充的字符例如:var string1 = "1";console.log( string.padStart(2,'0') );// 输出结果为 "01"console.log( st原创 2020-05-26 16:17:57 · 544 阅读 · 0 评论 -
Vue绑定内联样式:Style 绑定
对象语法:v-bind:style 的对象语法和CSS语法很像,但他其实是一个 JavaScript 对象<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' ,line-height: '50px'}"></div>data: { activeColor: 'red', fontSize: 30}直接绑定到一个样式对象:<div v-bind:style="styleObj原创 2020-05-26 15:57:19 · 2890 阅读 · 0 评论 -
Vue.js关于绑定 HTML Class 类样式
给 v-bind:class 一个对象,以动态地切换 class:<div v-bind:class="{ active: isActive }"></div><!-- 在对象中传入更多字段来动态切换多个 class --><div v-bind:class="{ active: isActive, 'text-danger': hasError }"></div>这里类active是否生效取决于变量isActive值的真假当 is原创 2020-05-26 15:30:29 · 193 阅读 · 1 评论 -
Vue过滤器与Vue.Filter
当全局过滤器和局部过滤器重名时,会采用局部过滤器。原创 2020-05-26 14:57:25 · 134 阅读 · 0 评论 -
Vue 自定义按键修饰符与自定义按键修饰符别名
在监听键盘事件时,我们经常需要检查详细的按键。实现仅在按下相应按键时才触发鼠标或键盘事件的监听器。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符:<!-- 只有在 `key` 是 `Enter` 时调用 `vm.add()` --><input v-on:keyup.enter="add()">Vue提供了常用的按键码的别名:.enter.tab.delete (捕获“删除”和“退格”键).esc.space.up.down.left.righ原创 2020-05-26 11:27:17 · 578 阅读 · 0 评论 -
Vue-CLI 4.0 build打包配置
module.exports = { // 公共路径(必须有的) publicPath: "./", // 输出文件目录 outputDir: "dist", // 静态资源存放的文件夹(相对于ouputDir) assetsDir: "assets", // eslint-loader 是否在保存的时候检查(果断不用,这玩意儿我都没装) ...原创 2020-05-07 16:53:28 · 4762 阅读 · 0 评论 -
Vue-Cli 4.0创建项目过程
在Vue-CLI4中运行以下命令来创建一个新项目:vue create hello-world然后提示选取一个 preset。可以选默认的包含了基本的 Babel + ESLint 设置的 preset,这里我们选“手动选择特性”来选取需要的特性(键盘上下键即可切换)选择自定义的配置,我一般选择这几个插件按空格键选中取消选择是否使用路由 history routerY选择使...原创 2020-05-07 16:47:19 · 2381 阅读 · 0 评论 -
Vue项目关闭ESLint + Prettier代码规范
我们用Vue-Cli脚手架新建项目时会选择使用ESLint + Prettier来统一我们的前端代码风格,但这对新手使用有很大困难,严格的格式要求容易出现很多警告和错误,这时最好关闭ESLint + Prettier。在src下新建文件.eslintrc.js,并如下配置:module.exports = { root: true, env: { node:...原创 2020-05-01 16:00:10 · 5628 阅读 · 0 评论 -
出现警告:warning Replace `'xxx'` with `"xxx"` prettier/prettier,关闭Prettier代码格式化工具
我们用Vue-Cli脚手架新建项目时会选择使用ESLint + Prettier来统一我们的前端代码风格,但这对新手使用有很大困难,严格的格式要求容易出现很多警告和错误,这时最好关闭Prettier。在.eslintrc.js文件中配置关闭Prettier;在rules中增加一行:"prettier/prettier": "off"...原创 2020-05-01 15:52:01 · 21851 阅读 · 0 评论 -
Vue2使用a标签的@click事件函数进行Router编程式导航,跳转后路径错误消失但页面跳转渲染正常,双击后退才能返回前一页面
跳转前路径是:http://localhost:8080/#/HelloWorld/Rogin跳转后路径是:http://localhost:8080/#/页面从Rogin跳转到了Rogon,是正确的但应该的路径是:http://localhost:8080/#/HelloWorld/Rogon我的a标签原来是这样写的:<a @click="changego('/...原创 2020-04-29 10:07:46 · 761 阅读 · 0 评论 -
Vue-cli 4脚手架Router嵌套路由
1、router/index.js中需要在 VueRouter 的参数中使用 children 配置const router = new VueRouter({ routes: [ { path: '/user/:id', component: User, children: [ { // 当 /user/:id/info匹配成功, ...原创 2020-04-29 09:36:20 · 1668 阅读 · 0 评论 -
Vue-cli4脚手架开发有关Axios的跨域解决方案
我们常在Vue中用Axios来发送请求,但Axios本身并不能跨域,需要额外的配置1、安装Axios$ npm install axios2、在main.js中导入配置axiosimport Axios from 'axios'Vue.prototype.$axios = Axios3、需要在vue.config.js文件中配置devServer.proxy选项来解决跨域问题...原创 2020-04-19 10:36:32 · 2301 阅读 · 2 评论 -
Vue使用mavon-editor插件解析markdown编辑预览
1、安装mavon-editor插件npm install mavon-editor --save2、在main.js中引入mavon-editor//全局注册import mavonEditor from 'mavon-editor'import 'mavon-editor/dist/css/index.css' //解决编辑器的功能显示问题Vue.use(mavonEditor)...原创 2020-04-19 10:02:19 · 5569 阅读 · 12 评论 -
新版vue-cli 4.2如何引入新字体
1、首先下载tff格式的字体2、在src中新建文件夹common,把下载的tff字体文件放在common中,并在common中新建样式文件font.css进行如下编辑@font-face{ font-family: "newfont"; src: url(./AvantGarde\ Book.ttf); font-weight: normal; font-sty...原创 2020-04-13 17:26:06 · 1601 阅读 · 0 评论 -
calc()函数 invalid property value 无效的属性值
在前端网页中有时候使用了 calc()函数,出现了invalid property value;比如width:calc(100%-12px);**calc()**函数是一个进行四则运算的函数,在其中的运算符的两侧都要保留一个空格才会生效:width:calc(100% - 12px);...原创 2020-04-07 15:44:22 · 1768 阅读 · 0 评论 -
Windows平台安装PHP7.3+Apache2.4+MySQL8.0
1、准备安装包Apache2.4下载PHP7.3下载MySQL8下载2、安装PHP7.32.1、解压php7.3压缩包到安装目录2.2、修改D:\Program Files\php-7.3.11目录下配置文件php.ini-development文件名为php.ini并打开进行一下编辑:2.2.1、修改拓展目录extension_dir = "D:/Program Files/ph...原创 2020-03-08 10:11:47 · 1722 阅读 · 1 评论