工作笔记-2

涂远扬
187 阅读3分钟

写参数默认值：

function person(name,age,gender='female') {
    console.log(name,age,gender);
}



VUE单独为组件设置body的css样式：

beforeCreate() {
    document.querySelector('body').setAttribute('style','background-color:#fff')
},
beforeDestroy() {
    document.body.removeAttribute('style');
}



CSS overflow禁止滚动页面：

$('body').css('overflow','hidden'); // 禁止滚动



JS   padLeft    padRight    自动补齐
string.padEnd()      string.padStart()

export function formatDate(ISOString, seperator = '.') {
  const date = new Date(ISOString);
  if (date.toString() === 'Invalid Date') return ISOString;

  const year = date.getFullYear();
  const month = (date.getMonth() + 1).toString().padStart(2, '0');
  const day = date.getDate().toString().padStart(2, '0');

  return [year, month, day].join(seperator);
}



父元素设置了flex布局：display:flex;
如何让子元素靠右呢？
方法一：
flex:1;
text-align: right;

方法二：
margin-left: auto;


CSS var()函数
www.runoob.com/cssref/func…

npm update    会把所有带有^符号的，升级到最新版本
NPM依赖包版本号~和^和*的区别：
~   会匹配最近的小版本依赖包，比如~1.2.3会匹配所有1.2.x版本，但是不包括1.3.0
^   会匹配最新的大版本依赖包，比如^1.2.3会匹配所有1.x.x的包，包括1.3.0，但是不包括2.0.0
*   这意味着安装最新版本的依赖包
package.json   package-lock.json


下拉加载更多：
const scrollHeight = document.querySelector('#handleList').scrollHeight;
const scrollTop = document.querySelector('#handleList').scrollTop;
const clientHeight = document.querySelector('#handleList').clientHeight;
关键点-判断是否滚动到了页面最底部：scrollHeight <= scrollTop + clientHeight


git删除指定文件夹
www.cnblogs.com/syq816/p/93…
例如删除apply文件夹：git rm -r 'src/foreignAffairs/pages/apply'


vuex-class

set    get用于响应式数据

get visible() {
    return this.value;
}
set visible(val) {
    this.$emit('input', val);
}



VUE中:style与:class三元运算符使用
style三元表达式

<p :style="{'color':(checkIndex3===m.txt ? 'red' : 'blue')}">
    {{m.txt}}
</p>

class三元表达式

<i class="iconfont" :class="[isShow ? 'icon-xy' : 'icon-ab']">
</i>

const { licenceFile = {}, licenceList = [], recordList = [] } = res;

css reset：

html,body{
    font-size: 62.5%;
}
// 1rem = 10px; 方便按设计稿编码

vue filters过滤器的使用
Vue学习--MVVM模型
string.startsWith(searchvalue, start)
运算符：
www.runoob.com/jsref/jsref…
juejin.cn/post/694599…

<!-- 工作交接人 -->
<handover-person v-show="showPerson" :showPerson.sync="showPerson" @closeMyself="closePerson"></handover-person>
// .sync
// vue中的.sync修饰符用法及原理详解
// vue修饰符sync作用：允许子组件修改父组件的数据，可以使用this.$emit('update:isShow', false)修改
// https://cn.vuejs.org/v2/guide/components-custom-events.html#sync-%E4%BF%AE%E9%A5%B0%E7%AC%A6

将多个数组里面的对象拼接进一个数组
Object.assign
concat
www.runoob.com/js/js-obj-a…
less的函数
定义使用公共的函数和数据
const { isPass } = data 等价于 const isPass = data.isPass;
代码规范之 lint-staged
Native APP ，Web APP，Hybrid APP三者对比：www.woshipm.com/pmd/159965.…
data和computed最核心的区别在于data中的属性并不会随赋值变量的改动而改动，而computed会。


监听本地存储的变化：

window.addEventListener('storage', (e) => {
      console.log('699***', e);
      //变化时触发事件
      const i = JSON.parse(window.localStorage.getItem('itemname'));
      console.log(i);
      if (i) {
        this.$refs.pickerRef.changdata(i.handoverJob);
        // this.itemum = i.handoverJob.um;
        const $this = this;
        this.$nextTick(() => {
          App.zzcbRefreshByBack($this.getParam);
        });
        // this.$refs.pickerRef.um = i.handoverJob.um;
      }
      console.log('703', i.handoverJob.um);
}, false);

beforedestory的时候删除监听值：

beforedestory() {
    window.localStorage.removeItem('itemname');
    window.removeEventListener('storage');
},

VS Code 插件
Chinese (Simplified)：简体中文
ESLint: ECMAScript/JavaScript 代码检查与报告
Auto Rename Tag：自动同步 HTML 标签名称
Vetur：Vue 开发工具，包含语法高亮、Emmet、错误检测、格式
Vue 2 Snippets: Vue2 代码片段
HTML Snippets： HTML 代码片段
markdownlint: Markdown 格式检查
Image preview：显示图像预览
Markdown Preview Enhanced： Markdown 预览
TSLint： TS 检查
TSLint Vue： Vue TS 检查
koroFileHeader： 头部注释和函数注释
Git History: 查看 Git 历史记录
GitLens： vscode 集成 Git
Auto Close Tag： 自动闭合 HTML 标签
Bracket Pair Colorizer 2： 成对的括号用相同颜色匹配
Color Highlight： CSS 颜色值高亮
Guides： 列指导线
Highlight Matching Tag： 高亮当前焦点匹配的 HTML 标签
Path Intellisense： 引用文件时，路径自动智能提示
TODO Highlight： todo 高亮

JS map和forEach：
相同点：都不会改变原数组
不同点：map有返回值，返回一个新数组;forEach没有返回值
forEach()允许callback更改原始数组的元素

vue-property-decorator用法

vue为什么要求组件模板只能有一个根元素？ template标签只能有一个根元素？

<template>
    <div></div>
</template>

TS interface和type的区别
void表示一个函数什么也不返回
npm install的实现原理？
nodejs
v-model双向绑定原理
proxy


父组件：

<component v-bind:is="curConfigComponent" 
v-model="componentData" ref="curRef" @modalSubmit="modalSubmit">
</component>

子组件：

@Prop({ type: Object, default: () => ({}) }) value!: any;




@Prop({ type:Array, default: ()=> [] }) value!:any[];
因为TS的语法很严格，所以以上相当于const定义了一个变量，当为空的时候为any



vue/cli，webpack脚手架
npm ci安装包之前，会删掉node_modules文件夹
配路由的时候加上webpackChunkName，webpack打包会打包到子js里面去，实现不同页面按需加载
手写JS实现ajax功能
JS实现继承的多种方式
JS之Object.create和new的区别：blog.csdn.net/sinat_27514…
Object.fromEntries

@Prop({ type: Boolean, default: false }) showIconAction?: boolean // 隐藏清除按钮
// ?代表这个属性可能存在也可能不存在

@Prop({ type: Boolean, default: false }) hideAdd!: boolean // 隐藏添加按钮
// !代表这个属性一定存在

css设置字体为缩放，必须先设置：display:inline-block;
npm run fix-memory-limit 扩大运行内存
git statsh   cherypick

<style lang="less" scoped>
@deep: ~">>>";
.wrapper-cert-type-config {
  @{deep} tr {
    &:hover>td:nth-child(2) button {
      color: #657dbc!important;
    }
  }
}
</style>

Promise.reject()
developer.mozilla.org/zh-CN/docs/…

MDN：
developer.mozilla.org/zh-CN/docs/…
proxy

export可以是多个，导出多个;但是export default 只能导出1个，只能有1个
import data from './mock-data/basic'; 这种写法，是data只有一个的导出
import { data } from './mock-data/basic'; 这种写法，不是export default，而是导出了多个，data只是其中一个

avatar
文章
阅读
粉丝