前端知识点总结——Vue组件的通信方式 / CSS伪类和伪元素 / CSS3新特性 / 跨域资源共享 CORS / cookie / 盒模型

Vue组件的通信方式

1. 父子组件：props / $emit
2. 父子组件：$parent/$children 与 $ref
3. 父子、兄弟、隔代组件：$emit / $ on
   通过设置一个空的App.vue作为一个模版的事件中心，用来触发事件和监听事件
4. 父子、隔代组件：provide/inject
5. 父子、兄弟、隔代组件：Vuex

伪类和伪元素

伪类

作用于元素选择器上

• 单冒号:
• 常见伪类：:link、:visited、:hover、:active、:first-child和:nth-child

伪元素

作用于元素上

• 最好是双冒号：::
• 常见的伪元素：::after、::before和::first-letter

CSS3新特性

• 过渡属性：transition

transition： CSS属性，花费时间，效果曲线(默认ease)，延迟时间(默认0)
/*宽度从原始值到制定值的一个过渡，运动曲线ease,运动时间0.5秒，0.2秒后执行过渡*/
transition：width,.5s,ease,.2s

• 动画属性：定义关键帧

@keyframes logoText {
    0%{
        transform:translateX(30px);
        opacity: 0;
    }
    100%{
        transform:translateX(0);
        opacity: 1;
    }
} 

• 形状转换：transform： rotate旋转角度； translate位移； scale：缩放
• 阴影：box-shadow

跨域资源共享 CORS

整个CORS通信过程，都是浏览器自动完成，不需要用户参与。浏览器一旦发现AJAX请求跨源，就会自动添加一些附加的头信息，有时还会多出一次附加的请求，但用户不会有感觉。

简单请求

• 满足一下两种条件就属于简单请求：

  • 请求方法属于以下三种之一：
    • HEAD
    • GET
    • POST
  • HTTP头信息不超出以下几种字段：
    • Accept
    • Accept-Language
    • Content-Language
    • Last-Event-ID
    • Content-Type：只限于三个值：application/x-www-form-urlencoded、multipart/form-data、text/plain

• Http请求头中添加origin字段，包含协议+域名+端口

• 如果origin不在指定的源内，服务器返回一个正常的Http响应，不包含Access-Control-Allow-Origin字段，浏览器会抛出一个错误

• 如果origin在指定的源内，服务器会多返回几个信息字段，都以Access-Control开头

  Access-Control-Allow-Origin: http://api.bob.com
  Access-Control-Allow-Credentials: true
  Access-Control-Expose-Headers: FooBar
  

此时可以进行跨域请求

非简单请求

• 非简单请求是那种对服务器有特殊要求的请求，比如请求方法是PUT或DELETE，或者Content-Type字段的类型是application/json
• 非简单请求在正式通信前会增加一次Http查询，称为“预检”
• 浏览器询问服务器当前网页是否在服务器的许可名单内，以及Http动词和头部信息哪些可以使用，得到肯定答复后浏览器才会发出正式XMLHttpRequest，否则就报错
• "预检"请求用的请求方法是OPTIONS
• 服务器通过预检后会返回Access-Control-Allow-Origin字段
• 如果服务器不通过预检会返回正常Http，没有包含任何cors字段，浏览器打印台会抛出错
• 服务器通过预检会返回cors字段

  Access-Control-Allow-Methods: GET, POST, PUT
  Access-Control-Allow-Headers: X-Custom-Header
  Access-Control-Allow-Credentials: true
  Access-Control-Max-Age: 1728000
  

cookie

cookie 是后端可以存储在用户浏览器中的小块数据。 Cookie 最常见用例包括用户跟踪，个性化以及身份验证。

如何生成cookie

当name、domain、path 这3个字段都相同的时候，cookie会被覆盖

• 服务器生成
  通过set-cookie字段生成

• 客户端生成
  通过document.cookie字段生成

cookie的设置、读取、删除

cookie设置

• 服务端

  • expires：过期时间、domain：域名、path：路径、secure：安全模式、HttpOnly：设置是否允许js进行访问

• 客户端

  • 客户端没有专门操作cookie的方法
  • 只能通过document.cookie = "key=name"来设置cookie
  • 设置cookie

    function setCookie(name,value,iDay){
        var oDate = new Date(); //创建时间戳
        oDate.setDate(oDate.getDate() + iDay);
        document.cookie = name + "=" + value + ";expires=" + oDate;
    }
    

  • 读取cookie
    只有一个‘=’的情况，即key = value的情况

    function getCookie(name){
        //例如cookie是"username=abc; password=123"
        var arr = document.cookie.split('; ');//用“;”和空格来划分cookie
        for(var i = 0 ;i < arr.length ; i++){
            var arr2 = arr[i].split("=");
            if(arr2[0] == name){
                return arr2[1];
            }
        }
        return "";//整个遍历完没找到，就返回空值
    }
    

  • 删除cookie

    function removeCookie(name){
        setCookie(name, "1", -1)//第二个value值随便设个值，第三个值设为-1表示：昨天就过期了，赶紧删除
    }
    

如何让前端后端不能读取cookie

• 设置HttpOnly前端不能访问
• 设置withCredentials=false不携带cookie

盒模型

• 标准盒模型box-sizing:content-box;

• IE盒模型box-sizing:border-box;