2022/7/30周总结

一、vue项目中如何在原窗口与新窗口中打开外部链接

Vue项目中内部跳转可以用this.$router.repalce()实现，如果用同样的方法跳转外部链接，那么外部链接前面会追加http://localhost:8080/#/​​导致跳转出现问题，那么我们如何跳转到外部链接呢？跳转链接分为原窗口新窗口打开外部链接。

1、原窗口打开外部链接有两种实现方式

（1）location.href="https://https://www.baidu.com/"

（2）window.open(url ,‘_self’)

2、新窗口打开外部链接：window.open(url,'_blank')

总结：

window.open本质上可以看做标签的js版本，或者说是编码式地打开窗口，但它比标签更加灵活，可以通过js实现与打开的页面之间的通信。

二、Jquery如何实现菜单折叠及其点击链接实现对应菜单展开

1、菜单css默认隐藏，追加class为show时显示

2、实现菜单的折叠效果，使用toggleClass()方法

$('.sidebar h6').click(function () {

      $(this).parents('section').find("ul").toggleClass('show');

})

3、打开某一个菜单链接则对应菜单展开，此处需要获取浏览器中的path(此处需要使用使用decodeURIComponent（）方法对编码后的hash进行解码 )，通过path找到与href相同的a标签，进而找到a标签的父级ul切换class中show即可

$(`a[href='${decodeURIComponent(location.hash)}']`).parents("ul").toggleClass('show')

总结：

1、切换元素显示与隐藏方法：toggleClass('xx') 。

2、获取浏览器中的path：location.hash。

3、对指定元素进行解码：decodeURlComponent() ,反之编码为：encodeURIComponent()。

4、jquery选取元素的方法：id选择器 $('#myId')、.class $('.myClass')、属性选择器通过href选择a标签 $(`a[href=' ']`)、标签选择器 $('p') 。

三、前端开发之页面调试

1、接口有返回数据而页面没有渲染出来，一定是取值时候数据结构取错了，调试方法为：js中使用console.log()，它会清晰的打印出我们在执行中数据的值，在控制台中查看该变量数据结构或者查看netWork接口反馈。

2、查看network中接口请求状态，有无请求错误。

3、js代码中使用debugger。

4、查看js中Http请求方法 (GET或者POST)是否与服务端保持一致。

5、=与==混淆 ，=是赋值 ，==是判断，如下图判断的场景不能写成赋值。

6、el-select组件中el-option要写value和label，label展示给用户看，value传给服务端 。

7、操作数组的方法以及各自区别：

（1）forEach——循环遍历。

（2）filter（）——过滤数组，filter根据筛选条件return出来的是一条新的数据。

   (3) slice（）——截取元素，返回一个不包括该元素的新的数组，该方法不会修改原数组。

（4）splice（）——删除数组中的元素，返回的是除被删除的元素的数组，splice() 方法会直接对数组进行修改。

（5）map() ——使用map方法对原有数据生成新数组。

四、Vue+ts 组件创建与传值

当我们在前端开发时通常会遇到相同的功能会在不同的页面中使用，为了减少冗余代码这个时候我们就可以把这部分封装成组件

1、父与子之间传值使用props，定义的props对象内的key是可以在