个人总结

不写bug的柠宝
257 阅读2分钟

2021年12月15日

1.接口请求状态值

200：成功
400：参数错误、405：请求方式错误
500：服务器错误、502：无响应

2.css样式

隐藏滑动条：ul::-webkit-scrollbar { display: none;}
控制placeholder：:placeholder-shown
table设置tr标签无效：border-collapse: collapse;
隐藏input密码框的小眼睛：::-ms-reveal { display: none;}
input光标颜色：input{caret-color:red;}

3.js

打印本页：<el-button type="success" class @click="$print">
判断是否是元素节点：node.nodeType==1;(1：元素节点，2：属性节点；3：文本节点)
判断类型：Object.prototype.toString.call(参数)
获取自定义属性：element.dataset / element.getAttribute
单行文本超出隐藏：width: 500px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;
多行文本超出隐藏：overflow: hidden;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 4;
判断undefined：typeof(exp) == 'undefined'
img中src动态拼接：require(`../../assets/img/icon-${item.icon}.png`)
字符串转JSON对象：JSON。parse()
JSON对象转字符串：JSON。stringify()
label标签失效：for对应id不唯一
检查自身属性中是否具有指定的属性：Object.hasOwnProperty()

4.jq

事件委托：$("ul").on("click","li.box",function () {})
获取checkbox单选框是否被选中：`$("input name='reply']:checked").val()`

5.vue2

强制重新渲染数据：this.$forceUpdate()
设置高度无效：html,body,#app {height: 100%;}
在子组件中写点击事件：@click.native="click()"
vue父组件调用子组件的form的rule验证：this.$refs["SelectTime"].$refs.ruleForm.validate(async (valid) => {  })
props父传子：props:{ title:{ type:Object,default:()=>{ return '123' } } }
watch深度监听：firstName:{handler:function(newVal,oldVal){},deep:true}
获取元素高度：this.$refs.slideBox[0].offsetHeight
通过自定义属性实现节流：
    <button v-debounce>确定</button>
    import Vue from "vue";
    Vue.directive("debounce", {
      //节流实现
      inserted: function(el, binding) {
        el.addEventListener("click", () => {
          if (!el.disabled) {
            el.disabled = true;
            setTimeout(() => {
              el.disabled = false;
            }, binding.value || 3000);
          }
        });
      }
    });

6.vue3

获取ref：const MyHome = ref<HTMLElement|null>(null);
引用第三方组件库：declare global { interface Window {  vrv: any; }} 或者 declare var vrv: any;（在shims-vue.d.ts）[在.eslintrc.js中globals:{vrv:true}];
想ESLint规则中添加全局变量：.eslintrc.js中globals
父传子/props获取传值错误：list: {type: Array,default:null,},
使用ref获取demo元素时，记得加入到return中
子组件传值到父组件：context.emit("children",'123'); 还需要定义emits：emits: ["children"],
动态渲染url图片无效：url: require("../../assets/img/exam/img-1.png")

7.typescript

事件获取传参对象(item: { objType: string; id: string; })

8.正则表达式

获取富文本中的图片地址并进行替换../
    str = str.replace(/src="(\.\.\/)*(\w+\/)+\w+\.(bmp|jpg|png|tif|gif|pcx|tga|exif|fpx|svg|psd|cdr|pcd|dxf|ufo|eps|ai|raw|WMF|webp|jpeg)/gi,v=>{
            v = v.replace(/\.\.\//,'localhost:8080/')
            return v;
    })

9.vue2和vue3的相比较而言的相关的面试题

1.2020年9月正式发布
2.支持大多数的vue2的特性
3.vue3设计了一套强大的组合api代替了v2中的option API，复用性更强
4.更好的支持TS
5.v3使用Proxy配合Reflect代替v2的Object.defineProperty()方法实现响应式(数据代理)
6.重写了虚拟DOM，速度更快了
7.新的组件：Fragment(片段),Teleport(瞬移),Suspence(不确定)
8.设计了新的脚手架工具，vite

10.Vs code

Format On Save 保存后自动格式化

11.SourceTree

开启文件大小写识别：设置--编辑配置文件：ignorecase = true【false：开启大小写】

12.Element-ui

单选框：动态渲染时:label="String(indexChildren + 1)"==>转成字符串类型

13.英文

handle 操作 / toggled 切换 / reason 理由、原因 /
avatar
文章
阅读
粉丝