说说你对盒子模型的理解
在CSS中,盒子模型可以分成:
W3C 标准盒子模型
IE 怪异盒子模型
标准盒子模型:
盒子总宽度 = width + padding + border + margin;
盒子总高度 = height + padding + border + margin
就是,width/height 只是内容高度,不包含 padding 和 border值
IE 怪异盒子模型
盒子总宽度 = width + margin;
盒子总高度 = height + margin;
也就是,width/height 包含了 padding和 border值
css选择器有哪些?优先级?哪些属性可以继承?
一、选择器
- 类选择器(.one),选择类名为one的所有元素
- 子选择器(.one>one_1),选择父元素为.one的所有.one_1的元素
- 相邻同胞选择器(.one+.two),选择紧接在.one之后的所有.two元素
- 群组选择器(div,p),选择div、p的所有元素
- 伪类选择器
:link :选择未被访问的链接
:visited:选取已被访问的链接
:active:选择活动链接
:hover :鼠标指针浮动在上面的元素
:focus :选择具有焦点的
:first-child:父元素的首个子元素
- 属性选择器
[attribute] 选择带有attribute属性的元素
[attribute=value] 选择所有使用attribute=value的元素
[attribute~=value] 选择attribute属性包含value的元素
[attribute|=value]:选择attribute属性以value开头的元素
- 伪元素选择器
:first-letter :用于选取指定选择器的首字母
:first-line :选取指定选择器的首行
二、优先级
!important >内联 > ID选择器 > 类选择器 > 标签选择器
三、继承属性
在css中,继承是指的是给父元素设置一些属性,后代元素会自动拥有这些属性
说说你对vue的理解
一、vue是什么
是一个用于创建用户界面的开源JavaScript框架,也是一个创建单页应用的Web应用框架。是一套构建用户界面的 渐进式框架。
- Vue核心特性
数据驱动(MVVM)
MVVM表示的是 Model-View-viewmodel
- Model:模型层,负责处理业务逻辑以及和服务器端进行交互
- View:视图层:负责将数据模型转化为UI展示出来,可以简单的理解为HTML页面
- viewmodel:视图模型层,用来连接Model和View,是Model和View之间的通信桥梁
为什么路由守卫的二次封装
当开发中路由越来越多的情况下;我们如果每个name和path都需要自己手动去写的话就会浪费不少时间;如果封装一个自动生成的name和path的方法;并且对components中共有的内容也进行提取这样会方便很多
跨域
什么是跨域:协议,域名,端口号不同请求,称之为跨域
一般配置代理:
devServer: {
proxy: {
"/myApi": {
// 请求要跨域到的地址
target: "http://47.93.101.203",
// 是否支持websocket
ws: true,
// 是否允许跨域
changeOrigin: true,
// 重写
pathRewrite: { "/myApi": "" },
},
},
},
};
.vuex持久化如何实现
安装vuex-persistedstate组件
如何防止xss 和csrf攻击
XSS 攻击:即跨站脚本攻击,它是 Web 程序中常见的漏洞。原理是攻击者往 Web 页面里插入恶意的脚本代码,当用户浏览该页面时,嵌入其中的脚本代码会被执行,从而达到恶意攻击用户的目的,如盗取用户 cookie、破坏页面结构、重定向到其他网站等。
预防xss:
预防 XSS 的核心是必须对输入的数据做过滤处理。对用户的输入进行过滤,如对标签等进行转义。
CSRF:跨站请求伪造,可以理解为攻击者盗用了你的身份,以你的名义发送恶意请求,比如:以你名义发送邮件、发消息、购买商品,虚拟货币转账等。
预防CSRF:
验证请求来源地址;
关键操作添加验证码;
在请求地址添加 token 并验证
Keepalive用法及优势
keep-alive 是 Vue 的内置组件,当它包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。和 transition 相似,keep-alive 是一个抽象组件:它自身不会渲染成一个 DOM 元素,也不会出现在父组件链中。
2、作用
在组件切换过程中将状态保留在内存中,防止重复渲染DOM,减少加载时间及性能消耗,提高用户体验性
3、原理
在 created 函数调用时将需要缓存的 VNode 节点保存在 this.cache 中/在 render(页面渲染) 时,如果 VNode 的 name 符合缓存条件(可以用 include 以及 exclude 控制),则会从 this.cache 中取出之前缓存的 VNode 实例进行渲染。
防抖节流
防抖:n秒内触发多次,只会执行一次,如果在n秒内再次被触发,则重新计算时间
节流:指连续触发事件但是在 n 秒中只执行一次函数
防抖和节流的原理都使用到了闭包的概念:闭包的好处是里面的变量只会在闭包中使用,也就是外部的函数是不能使用这个变量的,也就不会修改这个变量,就不会受到外部的污染;
为什么axios的二次封装
请求拦截器:可以在发请求之前可以处理一些业务
响应拦截器:当服务器数据返回以后,可以处理一些事情
1.安装axios