vue 日常开发小细节 (element-ui 相关 2 )

1 循环块 (表头动态变化 / 多个规律label)

<el-table-column v-for="item in ['1','2','3']" :key="item" :label="item" prop="noticeType">  </el-table-column>

2 多个数组生成法

 Array.apply(null, { length: 20 }) 长度为 20 新数组

3 render 基本使用(组件使用 / 大项目直接查看某个组件)

import businessSwitch from '@/views/business/businessSwitch.vue'
render: function (createElements) {
// createElements 是一个 方法,调用它,能够把 指定的 组件模板,渲染为 html 结构
return createElements(businessSwitch)
// 注意:这里 return 的结果,会 替换页面中 el 指定的那个 容器
// 包含 template , 与 template 不同时使用
}

4  查看引用插件

package.json - package-lock.json - 淘宝镜像
- package.json 查看仓库实际地址

5  babel的转译

babel的转译过程也分为三个阶段:parsing、transforming、generating

ES6代码输入 ==》 babylon进行解析 ==》 得到AST
==》 plugin用babel-traverse对AST树进行遍历转译 ==》 得到新的AST树
==》 用babel-generator通过AST树生成ES5代码

6  toString()   String()  区别

toString()方法;数值、字符串、对象、布尔;都有toString方法;
这个方法唯一能做的就是返回相应的字符串;其中null和undefined没有toString()方法;
String()属于强制转换, null转换的结果为null;undefined转换的结果为undefined;
其余的如果有toString()方法,即调用该方法,返回相应的结果;

6.1  toString() 和 valueOf()

toString() 方法返回反映这个对象的字符串
valueOf()方法如果存在任意原始值,它就默认将对象转换为表示它的原始值;
对象是复合值,而大多数对象无法真正表示为一个原始值,
因此默认的valueOf()方法简单地返回对象本身,而不是返回一个原始值。
undefined和null没有toString()和valueOf()方法

7 地址解析

地址 - 回车 - dns 解析 ip - 连接(三次握手)
- http 请求 - 响应 - 解析 渲染 - 关闭 tcp 连接

8 去除eslint 校验

在.eslintrc.js文件中找到'@vue/standard'配置将其删除

9  获取 ref 组件下 dom

this.$refs['mesServer'].$el.getElementsByTagName('input')[0];

this.$refs['categoryForm'].resetFields();

10  Set Map 

Set 对象类似于数组,且成员的值都是唯一的。
Map 对象是键值对集合,和 JSON 对象类似,但是 key 不仅可以是字符串还可以是对象

11 postcss  sass less

SASS等工具:源代码 -> 生产环境 CSS  (组合成正常 css)
PostCSS:源代码 -> 标准 CSS -> 生产环境 CSS  (兼容性前缀)

12 css  ime-mode: disabled;  限制输入法切换 (k8s 框架 命令行竟然是监听键盘的按下 ... ,表单都没有的那种。。)

contenteditable="true"  可编辑文本域

13  tofixed方法  Math.round(x)

tofixed方法
银行家舍入:所谓银行家舍入法,其实质是一种四舍六入五取偶(又称四舍六入五留双)法
四舍六入五考虑,五后非零就进一,五后为零看奇偶,五前为偶应舍去,五前为奇要进一
Math.round(x) (向上取值)
3.5 将舍入为 4,而 -3.5 将舍入为 -3

14  pdf.js  加载 二进制流文件 (防止原始文本被下载 / 统一放置于阿里云  -  设置允许跨域访问)

https://mozilla.github.io/pdf.js/getting_started/

15  post请求中常见的content-type的值有四种

application/x-www-form-urlencoded    表单提交的数据类型,jquery的ajax默认也是这个

multipart/form-data    文件上传时要使用的数据类型

application/json    json 格式的数据类型,也是axios的默认类型

text/xml

16  一个类数组对象转换为一个真正的数组

有length属性、属性名必须为数值型或字符串型的数字

Array.from(str) 、  Array.from(set) \  Array.prototype.splice.call( )

17   复制到剪切板(谷歌兼容)

function copyStr(str){
let createInput = document.createElement("input");
createInput.value = str;
document.body.appendChild(createInput);
createInput.select(); // 选择对象
document.execCommand("Copy"); // 执行浏览器复制命令
createInput.style.display = "none";
}

18 除了变异方法,vm.set() 也可以实现 动态刷新数据

19  == 类型转换 规则顺序

布尔 - 数值, 字符串 - 数值 , 对象 - valueOf() - ...
Number(null) - 0 , Number(undefined) - NaN

20 

猜你喜欢

转载自www.cnblogs.com/justSmile2/p/12100779.html