【初级前端】VUE工作问题小记

近期觉察到，每日梳理记录工作中的问题及知识点，便于更好的回顾知识，提高工作效率！

2022.02.19 周一        数组常用API

        1.过滤数组 Array.filter()        返回新数组（原数组中符合过滤条件的项）；

        2.操作数组 Array.map()        返回新数组（对原数组操作后的项）；

        3.遍历数组Array.forEach()        不返回任何数据；

2022.02.20 周日        vue使用高德地图JS API最新文档链接

        JS API结合Vue使用-JS API与前端框架结合-教程-地图 JS API v2.0|高德地图API (amap.com)https://lbs.amap.com/api/jsapi-v2/guide/webcli/map-vue1

2022.02.21 周一        iframe内联框架

        <iframe src="https://www.baidu.com/" frameborder="0"></iframe>        //内联框架

2022.02.22 周二         动态获取高度

        网页可见区域（body）宽： document.body.clientWidth 
        网页可见区域（body）高： document.body.clientHeight        //最常用、兼容性强的两个              网 页可见区域宽：document.documentElement.clientWidth                                                           网页可见区域高：document.documentElement.clientHeight
        网页可见区域宽： document.body.offsetWidth         (包括边线的宽) 
        网页可见区域高： document.body.offsetHeight        (包括边线的高) 
        网页正文全文宽： document.body.scrollWidth 
        网页正文全文高： document.body.scrollHeight 
        网页被卷去的高： document.body.scrollTop 
        网页被卷去的左： document.body.scrollLeft 
        网页正文部分上： window.screenTop 
        网页正文部分左： window.screenLeft 
        屏幕分辨率的高： window.screen.height 
        屏幕分辨率的宽： window.screen.width 
        屏幕可用工作区高度： window.screen.availHeight 
        屏幕可用工作区宽度： window.screen.availWidth 

//监听浏览器窗口变化
window.onresize = () => {
    document.getElementById("id").style.height = 100px;//设置标签高度    
}

//vue中动态设置路由子组件的高度，需在路由子组件监听事件中动态设置其路由父组件的高度（否则其路由父组件的高度不变化）;

2022.02.23 周三        vue动态绑定图片

        <img :src="变量名" alt="图片" />        //动态绑定图片的src属性

        变量名 = require("../assets/images/group.png")        //图片地址需要require()执行

2022.02.24 周四        临时储存（sessionStorage）数组/对象

        临时储存（sessionStorage）数组/对象需转化为JSON字符串；

        sessionStorage.setItem("自定义名称", JSON.stringify(数组名/对象名));        //存

        let 变量名 = JSON.parse(sessionStorage.getItem("自定义名称"));        //取

2022.02.25 周五        正则表达式（常用正则表达式）

一、正则表达式

1.被选字符：规定某字符上的被选字符集（例：[0-9]、[a-z]、[A-Z]）；

2.预定义字符集：常用备选字符的简化符号；

        2.1、[0-9]                        为        \d

        2.2、[0-9a-zA-Z_]           为        \w

        2.3、空字符                    为        \s

        2.4、所有字符（不包含换行和回车）        为        · 

3.量词：规定字符集出现的次数；

        3.1、{m,n}                表示        至少出现m次，最多出现n次；

        3.2、{m,}                  表示        m次以上

        3.3、{m}                   表示        必须出现m次

        3.4、*                       表示        可有可无，不限次数

        3.5、?                      表示        可有可无，最多出现一次

        3.6、+                      表示        出现一次以上

4.选择分组：多个字符集被一个量词修饰时使用；

        选择        为       | 

        分组        为      ()

5.匹配位置：开头 ^ ; 结尾 $ ;(当^出现在被选字符集 [ ] 中，表示 非 的意思)

6.匹配范围：g 表示 全局匹配；m 表示 多行匹配；（i 表示 忽略大小写）

7.引用符：        \        将元字符当作普通字符进行匹配

        例：\.用来匹配点字符，而非任何字符的通配符

二、常用正则表达式

        1.简单校验身份证号：        /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/

        2.邮箱：        /^([a-zA-Z0-9]+[-_\.]?)+@[a-zA-Z0-9]+\.[a-z]+$/

        3.手机号        /^[1][3-9][0-9]{9}$/

        4.数字（含小数）        /^\d+$|^\d+[.]?\d+$/

        5.给数字加千分号        (num+' ').replace( /\d{1,3}(?=(\d{3})+(\.\d*)?$)/g, "$&," )

2022.02.26 周六        axios的使用

        1.安装：        npm install axios -S

        2.默认配置：        axios.defaults

                例：axios.defaults.headers['Authorization']='Bearer'+' ' +token；

        3.创建一个新的axios：        axios.create()        例：

const service = axios.create({

    baseURL: 'http://www.baidu.com',

    timeout: 10000 

})

        4.请求拦截器：        axios.interce