经常用的代码 命令行解析 api 以及vue组件复用方法总结

命令行删除node_mode 简写形式

方法一: npm install rimraf -g rimraf node_modules  这是安装rimraf 方法二: rmdir /s/q your_app_dir
 方法三:  rm -rf node_modules/  主要是这句是删除的

div 中加入两个空格方法

 在div里只认一个空格
如果你想空这么多
很简单
打开智能abc输入法
全角/半角
应该懂吧。。。。
切换成全角
那就可以拼命的敲空格了。。。
绝对有效果
如果你不知道全角
那就。。。。

css如何设置背景图片位置

参考链接 http://aihongxin.com/7489.html
在css中，可以使用background-position属性来设置背景图片位置，进行背景图片的定位。

在CSS中，背景图片的定位方法有3种：

1）关键字：background-position: top left;

2）像素：background-position: 0px 0px;

3）百分比：background-position: 0% 0%;

css超出一行省略

// 超出1行省略

	display: -webkit-box;
	overflow: hidden;
	/*! autoprefixer: off; */
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 1;

日常添加下划线

border-bottom: 1px solid #e1e2e3;

最小的屏幕高度

min-height: 100vh;   //人员可见的一个整个屏幕高度

vant 插件 返回上一页

<van-nav-bar title="我的活动记录" left-arrow @click-left="$router.go(-1)" />
//  返回上一页  

图解

对position 定位的理解

参考这个 https://blog.csdn.net/weixin_46163658/article/details/121765058

前端对flex布局的理解
参考 https://blog.csdn.net/qq_60848699/article/details/122733053

前端触发BFC 的条件
1 什么事BFC
. bfc的理解（块级格式化上下文）
可以看作是隔离了的独立容器，内部元素的布局，不会影响外部元素。
可通过css属性触发。

浮动元素产生了浮动流，块级元素看不到；
文本类属性的元素（inline)，文本元素和产生了bfc的元素都能看到浮动元素。

2 条件
2. BFC的触发条件
一个HTML元素要创建BFC，则满足下列的任意一个或多个条件即可：

3. 根元素；

4. 浮动元素。元素的 float 不是 none；

5. 绝对定位元素。元素的 position 为 absolute 或 fixed；

6. 行内块元素。元素的 display 为 inline-block；

7. 表格单元格。元素的 display为 table-cell，HTML表格单元格默认为该值；

8. 表格标题。元素的 display 为 table-caption，HTML表格标题默认为该值；

9. 匿名表格单元格元素。元素的 display为 table、table-row、 table-row-group、table-header-group、table-footer-group（分别是HTML table、row、tbody、thead、tfoot的默认属性）或 inline-table；

10. overflow 值不为 visible 的块元素 ；

11. 弹性元素。display为 flex 或 inline-flex元素的直接子元素；

12. 网格元素。display为 grid 或 inline-grid 元素的直接子元素。

V

Scode安装easy less 插件并配置

参考链接为这个 url ：https://blog.csdn.net/qq_45742208/article/details/111319943
解析 在项目中 直接写一个 .less文件 保存后自动生成相同名字的 .css文件 直接在项目中引用就行 图解

在项目中引入图标和切图 直接用这种方式就行 图解

javaScript replace() 方法
String 对象参考手册 JavaScript String 对象

实例
在本例中，我们将执行一次替换，当第一个 “Microsoft” 被找到，它就被替换为 “Runoob”：

var str=“Visit Microsoft! Visit Microsoft!”;
var n=str.replace(“Microsoft”,“Runoob”);
n 输出结果:

Visit Runoob!Visit Microsoft!

尝试一下 »
定义和用法
replace() 方法用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。

如果想了解更多正则表达式教程请查看本站的：RegExp 教程 和 our RegExp 对象参考手册.
工作中例子

 let url = linkUrl
            .replace("@app_zyzid", app_zyzid)
            .replace("@title", title)
            .replace("@app_token", token)
            .replace("@orgid", this.orgId)
            .replace("@deptid", this.deptId)
            .replace("@streetid", this.streetId)
            .replace("@practiceid", this.practiceId);
          _this.$router.push({ path: url });

JSON.parse()
JSON 通常用于与服务端交换数据。

在接收服务器数据时一般是字符串。

我们可以使用 JSON.parse() 方法将数据转换为 JavaScript 对象。

语法
JSON.parse(text[, reviver])
参数说明：

text:必需， 一个有效的 JSON 字符串。
reviver: 可选，一个转换结果的函数， 将为对象的每个成员调用此函数。
例如 var obj = JSON.parse(‘{ “name”:“runoob”, “alexa”:10000, “site”:“www.runoob.com” }’); 其结果为

1、JSON.stringify是什么

JSON.stringify 方法将某个对象转换成 JSON 字符串形式

const userInfo= {
name: ‘zs’,
age: 20
}
console.log(JSON.stringify(userInfo));
// {“name”:“zs”,“age”:20}

JavaScript模板字符串

1. 什么是模板字符串 ？
模板字符串：是允许嵌入表达式的字符串（可以使用多行字符串和字符串插值功能）

它的写法，以反引号 开头，以反引号 结尾

let str = 这是一个模板字符串;
字符串插值的写法：
  一个美元符号，花括号 ${val}，val写想插入的值

let name = ‘XiXiHaHa’, age = 18;
let sayHello = Hello! My name is ${name}. My age is ${age}.
console.log(sayHello);

vue组件与复用详解

请看这个链接 https://www.nhooo.com/note/qagpm9.html
vue的组件化的理解之单独拆分的组件&组件的封装（以el-table表格组件的二次封装举例）
参考链接 https://zhuanlan.zhihu.com/p/365911722

组件化和模块化的区别
组件化-ui视图层面的拆分
以vue为例，一个页面有头部、内容区、底部。可以拆分开来，这里的拆分一般都会带着样式css，所以称之为UI视图层面的拆分（当然也会包含js的相关逻辑）
模块化-js层面的拆分
模块化的拆分主要是js逻辑层面的拆分，二者类似，但不同

1.v-text该怎么使用呢？？？

我们先在被vue实例挂载的标签div中，放入一个h3标签，在h3标签内部写入v-text指令，

，那么name的值哪里来呢？

这就需要在data中去定义了，这样h3标签的值就是name的值了，如下代码：

注意：这种使用的话有个缺点，就是不管你h3标签里面原来的值是什么，都会被替换成name的值，所以想要不被替换的话就用另一种方法：插值表达式 直接可以用插值运算符代替 {{value}}

CSS margin 属性

实例
设置一个p元素的所有四个边距：

p
{
margin:2cm 4cm 3cm 4cm;
}

尝试一下 »
属性定义及使用说明
margin简写属性在一个声明中设置所有外边距属性。该属性可以有1到4个值。

实例:

margin:10px 5px 15px 20px;
上边距是 10px
右边距是 5px
下边距是 15px
左边距是 20px

margin:10px 5px 15px;
上边距是 10px
右边距和左边距是 5px
下边距是 15px

margin:10px 5px;
上边距和下边距是 10px
右边距和左边距是 5px

margin:10px;
所有四个边距都是 10px

null 和 undefined 的区别

undefined 表示未定义，就是应该有值但是还没有赋值，连null的值都没有赋予

null 代表空值，空引用。

JavaScript encodeURIComponent() 函数

encodeURIComponent() 函数可把字符串作为 URI 组件进行编码。

该方法不会对 ASCII 字母和数字进行编码，也不会对这些 ASCII 标点符号进行编码： - _ . ! ~ * ’ ( ) 。

其他字符（比如 ：;/?😡&=+$,# 这些用于分隔 URI 组件的标点符号），都是由一个或多个十六进制的转义序列替换的。
使用 encodeURIComponent() 对 URI 进行编码：

var uri=“https://www.runoob.com/my test.php?name=ståle&car=saab”;
document.write(encodeURIComponent(uri));
以上实例输出结果:

https%3A%2F%2Fwww.runoob.com%2Fmy%20test.php%3Fname%3Dst%C3%A5le%26car%3Dsaab

JavaScript decodeURIComponent() 函数

decodeURIComponent() 函数可对 encodeURIComponent() 函数编码的 URI 进行解码。

提示：使用 encodeURIComponent() 方法可以对 URI 进行编码。
例子 https%3A%2F%2Fwww.runoob.com%2Fmy%20test.php%3Fname%3Dst%C3%A5le%26car%3Dsaab
https://www.runoob.com/my test.php?name=ståle&car=saab

HTML 前端设置浏览器页签图标设置

新时代H5中 实践地图 在苹果手机白边问题

Div标签里放img和span标签实现垂直水平居中–flex布局

我是span标签

效果图  实现 span标签的文字在图片旁边垂直居中 1.先给div设置开启弹性布局。display:flex;

2.再把span标签的行高设置成与图片img等高，例如我的图片height:80px;就给span设置行高line-height:80px;

代码实现：

我是span标签

效果图如下：

实现img和span整体在div垂直水平居中
1.实现整体水平居中：在div的样式中加上 justify-content: center;

2.实现整体垂直居中：在div的样式中加上 align-items: center;

代码实现：

我是span标签

效果图如下：

html怎么把背景色去掉 css如何去掉背景色 或者背景色为透明的

HTML 中让背景变无色
前三个参数是颜色，后一个是透明度，效果为白色背景透明。

background-color: rgba(255,255,255,0.2);

关于html怎么把背景色去掉的介绍到此就结束了，不知道本篇文章是否对您有帮助呢？如果你还想了解更多此类信息，记得收藏关注本站，我们会不定期更新哦。

css选择器总结

稀土掘金地址 https://juejin.cn/post/6844904002103050254#heading-12

前端通过封装js公共方法对电话和姓名身份证等私密信息进行数据脱敏显示，即部分隐藏处理

最近的项目有遇到要将身份证信息进行脱敏显示

// 参数分别为要脱敏显示的数据（字符串格式哦），头部不需要脱敏显示的数据长度，结尾不需要脱敏显示的数据长度
// let tel = 13278945678
// this.plusXing (tel,3,4)   // 返回的即是132****5678 
function plusXing (str,frontLen,endLen) { 
	var len = str.length-frontLen-endLen;
	var xing = '';
	for (var i=0;i<len;i++) {
		xing+='*';
	}
	return str.substring(0,frontLen)+xing+str.substring(str.length-endLen);
}

做一个 平行四边形按钮并且内容保持不变

里面加个p标签 然后在转换过来

<button style="transform: skewX(-30deg);" @click='console.log(11)'><p style="transform: skewX(30deg);">按钮1</p></button>

css选择器 选取 某个标签下的奇数孩子

.msglist tr:nth-child(2n + 1) {
	background: #0b2e53;
}

图解

取消 uniapp 原生的小程序顶部栏

当设置 “navigationStyle”:“custom” 取消原生导航栏后

！！！uniapp 项目传参 和 转码 解码

传递参数 encodeURI 不能写错
代码

<swiper-item>
							<navigator :url=" '/pages/webview/webview?url='+ encodeURI('http://baidu.com')">
							<view class="swiper-item ">A</view>
							</navigator>
						</swiper-item>

接收参数 要在 onload 周期中 用 options 接收参数 然后 用 decodeURI进行解码
代码

<view>
		<text>webview</text>
		<web-view :src="url"></web-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				url:''
			};
		},
		onLoad(options) {
			console.log('options',options)
			this.url =  decodeURI(options.url)  
		}
	}

新时代H5中 div中加入背景图片
小程序中的照片地址 要用 网络地址 或者是base64地址

	background: url('../../images/home/banner_bg@2x.png') no-repeat;
		background-size: 100%;

h5或者小程序中展示得列表如何让它 超出滚动展示

在所在的标签上 加上这句css语句就行

white-space: nowrap;
overflow: scroll;

css中相对定位 和绝对定位的理解

相对定位：position : relative
在相对定位中，定位元素是根据自己原本所在位置进行定位，相对定位不会脱离文档流，在文档流中不会影响其他元素，偏移量根据给定的值，值可以为负数；

top 数值越大越往下 顶部与原位置差
bottom 数值越大越往上 底部与原位置差
left 数值越大越往右 左边与原位置差
ight 数值越大越往左 右边与原位置差

绝对定位 ：position:absolute
绝对定位中，定位依据是定位元素的父级，直到找到body元素，绝对定位的元素会脱离文档流，行内可以设置宽高，块元素不独占一行，由内容撑开宽高；

top 数值越大越往下 顶部与定位父级的顶部之差
bottom 数值越大越往上 底部与定位父级的底部之差
left 数值越大越往右 左边与定位父级的左边之差
right 数值越大越往左 右边与定位父级的右边之差
特点 脱离文档流

Chrome：如何查看Chrome中保存的session信息，调试时需要清空session