![](https://img-blog.csdnimg.cn/20210913202210845.jpg?x-oss-process=image/resize,m_fixed,h_224,w_224)
前端笔记
文章平均质量分 52
如题=w=
敲起来blingbling
挺秃然的
展开
-
Array.map()方法 获取数组中处理后的内容
Array.map()方法 获取数组中处理后的内容arr.map() 方法返回一个新数组,数组中的元素为原始数组arr中的元素调用函数处理后的值。map() 方法会按照原始数组元素顺序依次处理元素。注意:map() 不会对空数组进行检测map() 不会改变原始数组const list = [ { id: 1001, name: 'Alice', gender: 'female', score: 90 }, { id: 1002, name: 'Max', gender: 'f原创 2022-01-14 16:26:39 · 587 阅读 · 0 评论 -
vue指向src目录的别名@和~
默认会有‘@’别名,指向src目录。使用别名一般三种情况:在js中用,在css中用,在html文档内用:js中:import {getName} from '@/util/name'css中使用,需要加入“~”,并且不要写成字符串:{ background: url(~@/assets/img/04_2.jpg); background: url('~@/assets/img/04_2.jpg'); //错误写法,不能写成字符串!}html中使用,可以加入 ~ 可加可不加。 <原创 2021-11-10 16:51:13 · 1130 阅读 · 0 评论 -
attribute和property
attribute是元素标签的属性。<input id="input" value="testValue"><script> let input = document.getElementById('input'); console.log(input.getAttribute('value')); // testValue console.log(input.value); // testValue</script>input 的 value a原创 2021-11-10 16:43:25 · 649 阅读 · 0 评论 -
vue项目创建 注意点 项目结构
1 创建项目注意点[ ]可选命令,< >必须命令创建项目命令不使用中文和驼峰命名vue create test-projectnpm run serve 启动的是项目目录下 package.json 中的"script"属性下的"serve"命令: 开启服务器2 项目结构public 整个模块化项目服务器的根目录在地址栏 http://localhost:8080 后面直接加public下的文件名,可以直接访问此文件,http://localhost:8080 省略了原创 2021-11-10 16:39:20 · 673 阅读 · 0 评论 -
vue动态绑定class和style
动态添加style<div :style="s1">123</div><div :style="s2">123</div><div :style="s3">123</div><div :style="{ color: color1 , fontSize: fontsize1 + 'px'}">123</div><div :style="`color: ${color1}`">123</原创 2021-11-10 16:29:13 · 546 阅读 · 0 评论 -
pointer-event 和 cursor 属性 在div上实现button的disabled禁用效果
当按钮是用div写的时候,不能够像button一样直接使用disabled属性,此时可以通过事件禁用样式 pointer-events: none; 和 鼠标悬浮禁用手势样式 cursor: not-allowed; 来实现类似button按钮disabled属性效果;但是如果把这两个样式写在一个class里面,事件禁用样式会影响鼠标悬浮禁用手势样式,使得禁用状态无法显示。解决:将 cursor: not-allowed 写在外层div上<div class="A"> <d原创 2021-11-10 16:27:12 · 1818 阅读 · 0 评论 -
vue中transition实现过渡动画效果
vue中经常会有v-if条件渲染,v-show显示/隐藏,以及动态组件切换等范围区域的视觉变化,如果没有动画过渡效果,会显得有一些突兀。我们可以使用transition来实现过渡的动画效果。transition的几个css相关设置属性:v-enter:过渡1(从无到有)开始前v-enter-to:过渡1(从无到有)结束v-enter-active:包含v-enter、v-enter-to,在这里可以设置过渡时间、曲线等v-leave:过渡2(从有到无)开始前v-leave-to:过渡2(从有到无原创 2021-09-19 20:42:57 · 2390 阅读 · 0 评论 -
前端vue中使用Element UI表单校验 及密码复杂度校验组件
在使用表单提交数据时,表单校验可对输入数据进行验证,保证输入数据的格式正确。表单校验<template> <div class="container"> <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm" >原创 2021-09-19 17:17:49 · 3435 阅读 · 1 评论 -
时间格式处理 转换为“刚刚”、“n分钟/小时前”、“一天前”等
function filterTime(time) { const getTimeStamp = (time = "") => { let date = time ? new Date(time) : new Date(); return Number(date.getTime().toString().substr(0, 10)); }; let timeStamp = getTimeStamp() - getTimeStamp(time.replace(/-/g, "/原创 2021-09-15 21:18:17 · 248 阅读 · 0 评论 -
url格式正则—test同一个内容时结果出现true和false交替问题
test( ) : 检索字符串中指定的值。返回 true 或 falsefunction fn(url) { var objExp=new RegExp('\(https?:\/\/\\S+\)\(?=\\s|$\)','gi'); console.log(objExp.test(url),objExp.lastIndex); objExp.lastIndex = 0 // 归零 if(objExp.test(url)){ console.log("网址正确!");原创 2021-09-15 21:13:12 · 642 阅读 · 0 评论 -
Node以及基于node的Express框架 + MongoDB
目录1 Node2 为什么要用node3 使用npm有哪些好处4 如何判断当前脚本运行在浏览器还是node环境中5 同步和异步的区别6 几种常见模块化规范的简介7 node怎么跟MongoDB建立连接8 Express9 Express + MongoDB初始化Express项目接入 MongoDB 数据库10 MongoDB常用命令11 关系型数据库和非关系型数据库关系型数据库非关系型数据库12 使用node解决跨域1 NodeNode 为我们提供了一个无需依赖浏览器、能够直接与操作系统进行交互的 J原创 2021-09-13 20:54:08 · 2948 阅读 · 2 评论