weixin_57446003的博客

原创 预测量文本宽度

前端预测量文本宽度

原创 vue中为什么不建议在同一元素上使用v-for和v-if

在 Vue 中，v-for 和 v-if 是两个常用的指令，它们分别用于循环渲染和条件渲染。当 v-for 和 v-if 一起使用时，Vue 在渲染元素列表时需要进行额外的计算。具体来说，它首先会根据 v-for 的数据源生成一组虚拟 DOM 节点，然后再根据 v-if 的条件进行过滤。另外，v-for 具有更高的优先级，这意味着 v-if 的判断会在 v-for 循环之后进行。使用嵌套元素：将 v-for 和 v-if 分别放到两个嵌套元素上，而不是在同一个元素上使用。这样可以避免在渲染时进行条件判断。

原创 对象数组深层嵌套时 find 某一项

【代码】对象数组深层嵌套时 find 某一项。

原创 vue中动态添加样式

vue.js中动态添加样式

原创 vue中使用插槽

vue中的插槽

原创 浅谈vue中的自定义指令

vue.js中的自定义指令

原创 vue.js中的插件机制 - Vue.use() & install()

vue.js 中的插件机制

原创 详解vue中的v-model

vue.js 中 v-model 语法糖的使用及进阶用法

原创 vue中的.sync语法糖

vue中的.sync语法糖

原创 element-ui中的表格组件实现隔行换色

element-ui中的表格组件实现隔行换色

原创 pc系统项目适配移动端

之前公司做了一个pc端的系统需要适配移动端，之前老版本使用jq+bootstrap做的，新版本的话技术方案选用vue+elementui,以下是项目的响应式适配方案1、响应式原理 - 栅格系统众所周知，bootstrap响应式原理的基础就是12栅格系统，而elementui的layout布局也同样有自己的24栅格系统，同时 ，Element 额外提供了一系列类名，用于在某些条件下隐藏元素。这些类名可以添加在任何 DOM 元素或自定义组件上。二、项目的适配问题因为element

原创 localStorage和sessionStorage的区别

区别如下：1、localStorage和sessionStorage一样都是用来存储客户端临时信息的对象。2、localStorage生命周期是永久，这意味着除非用户显示在浏览器提供的UI上清除localStorage信息，否则这些信息将永远存在。4、sessionStorage生命周期为当前窗口或标签页，一旦窗口或标签页被永久关闭了，那么所有通过sessionStorage存储的数据也就被清空了。5、不同浏览器无法共享localStorage或sessionStorage中的信息。相同浏览

原创 字符串常用方法大全

1. 获取字符串长度 2. 获取字符串指定位置的值 （1）charAt() （2）charCodeAt() 3. 检索字符串是否包含特定序列 （1）indexOf() （2）lastIndexOf() （3）includes() （4）startsWith() （5）endsWith() 4. 连接多个字符串 5. 字符串分割成数组 6. 截取字符串 （1） slice() （2） substr() （3） substring() 7. 字符

原创 vue事件总线的使用

原创 vue自定义指令

<!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>document</title.

原创 nvm 管理 node 版本时的环境变量问题

1、切记不要将nvm和node.js安装在同一目录下 - 安装node时可以配置2、nvm安装完成后，打开nvm安装目录下的settings.txt文件:root: D:\nvm \\ nvm的安装路径path: D:\nodejs \\ node的安装路径node_mirror: http://npm.taobao.org/mirrors/node/ \\ 修改node的下载镜像npm_mirror: https://npm.taobao.org/mirrors/npm/

原创 数据结构 - 集合

集合（set）：指具有某种特定性质的事物的总体，里面的每一项内容称作元素我们常遇到集合的概念：有限集合：例如一个班级所有同学构成的集合无限集合：例如全体自然数的集合在计算机中集合的道理基本一致，具有三大特性：确定性、无序性、互异性确定性：给定一个集合，集合中的元素是确定的。即一个元素，或者属于该集合，或者不属于该集合，两者必居其一无序性：在一个集合中，不考虑元素之间的顺序，只要元素完全相同，就认为是同一个集合互异性：集合中任意两个元素都是不同的es6的set数据类交集

原创 跨域情况详解

详解跨域

原创 vuex详解

vuex 的核心：state | getters | mutations | actions | modulesstate1、直接在state中保存数据state: { username:'张三', age:22, },2、在项目的组件中获取state中的数据mounted() { //1、state的打印输出 //语法：this.$store.state.数据名 - 拿到对应的数据值 console.log(this.$store.st...

原创 vue中的状态（数据）管理

由于状态（数据）零散的分布在许多组件和组件之间的交互中，大型应用复杂度也经常逐渐增长。为了解决这个问题，vue提供了vuex；

原创 数组去重方法

方法一：var arr = [1,2,3,4,1,2,3,4]var brr = Array.from(new Set(arr)) //伪数组转数组console.log(brr)方法二：var arr = [1,2,3,4,1,2,3,4]var brr = [...new Set(arr)] //准备一个空数组，点点点展开console.log(brr)方法三：var arr = [1,2,3,4,1,2,3,4]var brr = []arr.fo...

原创 TCP和UDP的区别

如何理解 TCP 和 UDP?各自的应用场景有哪些？UDP（User Dategram Protocol），用户数据包协议，是一个简单的面向数据报的通信协议，即对应用层交下来的报文，不合并，不拆分，只是在其上面加上首部后就交给了下面的网络层也就是说无论应用层交给 UDP 多长的报文，他统统发送法，一次发送一个报文而对接收方，接到后直接去除首部，交给上面的应用层就完成任务UDP 包头包括4个字段，每个字段占用2个字节（即16个二进制位），标题短，开销小特点如下：，1、UDP 不提供复杂

原创 flex弹性盒作用在items上的flex属性

flex-grow:平分剩余空间的份数；比如有5个子项，假如fle为1，则每个子项分到五份之一；flex-shrink：每个子项收缩的程度；默认值为1；当子项过多父元素放不下时，就会出现每个子项都收缩的情况，收缩的大小等于超出父元素的部分决定除以子项的个数，每个子项平分一份儿，也可以设置flex-shrink=0,表示不收缩；...

原创 iconfont 矢量图标库的引入和使用

常用的引入方法有两种，分别用于引入黑白字体图标（font class）和彩色字体图标（symbol）font-class 引用使用步骤如下：第一步：引入项目下面生成的 fontclass 代码：<link rel="stylesheet" href="./iconfont.css">第二步：挑选相应图标并获取类名，应用于页面：<span class="iconfont icon-xxx"></span>" iconfont" 是你项目

原创 伪类选择器里的唯一（only）

一、 only-child:当元素是唯一的子元素，被选择二、only-of-type:当元素是唯一类型的子元素，被选择<body> <divclass="box"> <divclass="box1">我是第一个DIV</div><divclass="box2">我是第一个DIV</div> ...

原创 CSS溢出显示三个小圆点

溢出显示三个小圆点：必须用的属性1、给元素一个固定的宽度2、让文本不折行显示3、溢出隐藏4、溢出文本变成三个圆点//添加一个固定的宽度width:300px;//让文本不折行white-space: nowrap;//溢出的文本隐藏overflow: hidden;//溢出文本的显示效果clip====裁剪===默认效果ellipsis==溢出显示三个圆点text-overflow: ellipsis;...

原创 CSS外部样式表的引入两种方式区别

一种：正常link引入一种：@import url()导入注意事项：1、两种样式表都能实现样式；但是目前来看为了方便js操作DOM元素，一般使用link区别：1、本质区别：link===XHTML语法，@importURL是CSS提供的语法2、加载顺序：link是样式和结构一同加载，@import是先加载结构，后加载样式3、兼容：@import是CSS2.1提出的不兼容老版本的浏览器，但是link没有这个问题4、再js里面通过js可以直接操作link里面的样式，但是@impo..