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 新数组        Array.apply(null, Array(20))     Array.from(Array(20))

扩展讲解

Array.apply(null, {length: 10})和Array(10)有什么区别?

var arr1 = Array.apply(null, {length: 10});
var arr2 = Array(10);

0 in arr1  //true
0 in arr2  //false

arr1.map(function(item, index){console.log(index)}) //0, 1, 2, 3...
arr2.map(function(item, index){console.log(index)}) //undefined...


首先Array(1,2,3,4)，生成一个数组[1,2,3,4]
然后是apply的问题,要求第二个参数是一个数组
那么Array.apply(null,[1,2,3,4])生成的和上述的一样的[1,2,3,4]数组
但apply有个奇怪的地方,当第二个参数是一个带有length属性的对象时,会当成一个数组使用
所以Array.apply(null,{length:4})生成[undefined,undefined,undefined,undefined]
相当于Array.apply(null,[undefined,undefined,undefined,undefined])

 

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];

9.1 清除校验结果

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

this.$refs['searchFrom2'].clearValidate(['businessChannel','merchantOrderNo']);

 

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( )   原型 slice \ [...arguments]

 

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  自定义表单校验规则  -  抛出 error 

{ required: true, trigger: 'blur', validator: this.validMoney }

 

21  浮层中使用 日期选择控件 bug（ 默认日期选不中、选中页面值不改变 ） 

- form 之外 定义新数据
- 数据一次性绑定 this.form={type：1} 替代 this.form={}、this.form.type=1
- this.$set(this.categoryForm,'plantCode','hello')

 

22   死循环问题

import { Message } from 'element-ui'
if(!store.getters.addRouters.length){
Message.warning('无权限，请配置')
return false
}
/ 计数 > 2 - return false

 

23  本机映射 （ 免DNS ） 

C:\windows\system32\drivers\etc\hosts 

 

24 vscode  源代码管理 - 看不到文件修改记录

-  右键 勾选项目

 

25 webpack  -  通用模板 title 配置

<title><%= htmlWebpackPlugin.options.title %></title>

 

26  父子组件传值，涉及到复杂对象 

-  使用计算属性（兼 new map() ）、JSON.stringify 化 （bug：map转成数组）

 

27 ['1','2'].map(parseInt)   -   [1, NaN]

-  return / Number 替换 parseInt 函数

 

28 Object.assign({},obj)  拷贝

Object.assign({},obj) 拷贝 - 第一层深拷贝、第二层往后浅拷贝（赋值引用地址）
替代方案 - JSON.parse(JSON.stringify(obj1)) / 递归循环

 

29 node app.js 开启服务，后台运行 ( 开启守护进程来执行 )

node app.js & 

 

30 监听对象

methods:{
watchDeep(){
this.$watch("obj",()=>{
console.log("事件监听");
},{
deep:true
})
}
}