7.07x9.07 阶段总结

时间 2019-11-30

标签 7.07x9.07 阶段总结繁體版

原文原文链接

1. html

1. html语义化

用最恰当的代表意义的标签来标记内容

2. 块级元素

<a> <span> <i> <strong> <img> <input>
复制代码

3. ⾏级元素

<div>  <p>  <ul> <li> <ol> <h1~h6> <table>
复制代码

4. 行级元素和块级元素区别

行级元素
- 多个元素占⼀行不能设置宽高
- 不能够嵌套块级元素
- 浮动后能够设置宽高
块级元素
- 一个元素占一行垂直排列列能够设置宽高
- 块级元素能够嵌套行级元素、行级块元素、块级元素
- 特例： P 不能够嵌套块级元素

2. css

1. 常⻅css选择器

id选择器器
class选择器
伪类选择器
标签选择器
后代选择器
子代选择器
伪元素选择器

2. 权重值

id > class / 伪类 > 标签 / 伪元素

3. position、display区别

1. position

定位类型javascript
absolutecss

绝对定位，相对于最近的除static定位之外的元素定位，若没有，则相对于html定位；html

脱离了文档流，不占据文档空间；vue

若设置absolute，但没有设置top、left等值，其位置不变，会影响未定义宽度的块级元素，使其变为包裹元素内容的宽度。html5
fixedjava

固定定位相对于浏览器窗口定位，脱离文档流，不会随页面滚动而变化。ios
relativecss3

相对定位，相对自身位置定位，可经过设置left、top、right、bottom的值来设置位置；es6

而且它本来所占的空间不变，即不会影响其余元素布局；web

常常被用来做绝对元素的容器块。

2. display

盒子模型
none

表示该元素不会显示，而且该元素的空间也不存在，可理解为已删除

visibility：hidden只是将元素隐藏，但不会改变页面布局，但也不会触发该元素已经绑定的事件

opacity：0，将元素隐藏，不会改变页面布局，但会触发该元素绑定的事件
block

<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>
复制代码

inline-block

行内块元素，便是内联元素，又可设置宽高以及行高及顶和底边距；

<img>、<input>
复制代码

inline (默认)

内联元素，与其余元素在一行

不可设置宽高

margin-top与margin-bottom无效，但margin-left与margin-right有效

padding-left与padding-right一样有效，可是padding-top与padding-bottom不会影响元素高度，会影响背景高度

<a>、<span>、<br>、<i>、<em>、<strong>
复制代码

4. 清除浮动

元素浮动后会脱离⽂档流形成父元素塌陷

父元素设置高度
父元素设置溢出隐藏 overflow:hidden
在父元素内添加最后⼀个子元素，而且在子元素上设置清楚浮动clear：both
clearfix

.clearfix::after{
        content:'';
        display:block;
        clear:both;
    }
复制代码

5. 外边距合并

当两个垂直外边距相遇时，它们将造成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

解决办法：

嵌套关系

父元素overflow:hidden
父元素或子元素设置绝对定位 position:absolute
父元素或子元素浮动 float:left
给父元素设置边框

并列关系

外边距设置在一个元素上便可

3. js

1. js数据类型

number
string
boolean
null
Undefined
obj

2. 类

具备相同属性和方法的集合（构造方法/构造函数）首字母大写
属性写在构造函数方法写在原型（prototype）

String.prototype.functionname = function(){}
复制代码

原型中方法被实例化对象所共享
prototype 下有 construction （判断数组/对象）表构造函数

3. 原型（prototypeprotoconstructor）

4. 继承

5. this指向

函数中 this是 window
定时器(window对象下的方法) this是 window
对象 this是当前对象
构造函数 this 是实例化对象
事件绑定 this 绑定事件的那个dom对象
改变this

call( ) 方法改变指针第一个参数是一个要改变指针的对象，后面的参数是方法须要的参数
apply( ) 方法改变指针第一个参数是一个要改变指针的对象第二个参数时一个数组，数组里是方法的参数
bind( ) 方法改变指针第一个参数是一个要改变指针的对象，后面的参数是方法须要的参数

f1.call(oDiv,22,33);
    f1.apply(obj,[1,2]);
    f1.bind(oDiv,22,33)();
复制代码

6. call和apply、bind区别

call 和 apply 会自动调用方法 bind须要手动调用方法

7. 事件相关(冒泡捕获)

1. 事件冒泡

事件传播从里向外

1. 事件捕获

事件传播从外向里
addEventListener('事件',function(){},false) 监听事件
能够给元素绑定多个相同事件，最后参数false事件冒泡,true事件捕获

8. 事件委托

利用事件冒泡动态添加的元素，没法在已进入页面时绑定事件，把事件绑定在已存在的父元素上

9. 闭包

外部函数有内部函数
内部函数会使用外部函数里的局部变量
优势：

闭包内的变量不会被垃圾回收机制处理掉，一直存在内存中

能够拿到索引值

<script>
    var aLi = document.getElementsByTagName('li');
    for(var i = 0 ; i<aLi.length ;i++){
        (function(j){
            aLi[j].onclick = function (){
                console.log(j);
            }
        })(i)
    }
复制代码

缺点：会形成内存泄露

10. ajax原理（get post区别、状态码）

异步 JavaScript 和 XML。
AJAX 是一种用于建立快速动态网页的技术。

1. 建立XMLHttpRequest对象

为了应对全部的现代浏览器，请检查浏览器是否支持 XMLHttpRequest 对象。若是支持，则建立 XMLHttpRequest 对象。若是不支持，则建立 ActiveXObject

var xmlhttp;
    if (window.XMLHttpRequest){//code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();
    }
    else{//code for IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
复制代码

2. 请求

方法	描述
open(method,url,async)	规定请求的类型、URL 以及是否异步处理请求。 method：请求的类型GET 或 POST url：文件在服务器上的位置 async：true（异步）或 false（同步）
send(string)	将请求发送到服务器。 string：仅用于 POST 请求

xmlhttp.open("GET","test1.txt",true);
    xmlhttp.send();
复制代码

3. 响应

XMLHttpRequest 对象的三个重要的属性

属性	描述
onreadystatechange	存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。
readyState	存有 XMLHttpRequest 的状态。 0: 请求未初始化 1: 服务器链接已创建 2: 请求已接收 3: 请求处理中 4: 请求已完成，且响应已就绪
status	200: "OK" 400:请求出现语法错误 404: 未找到页面 500:服务器错误 505:HTTP版本不受支持”,当服务器不支持请求中所使用的HTTP协议版本 304:客户端有缓冲的文档并发出了一个条件性的请求（通常是提供If-Modified-Since头表示客户只想比指定日期更新的文档）。

xmlhttp.onreadystatechange=function(){
        if (xmlhttp.readyState==4 && xmlhttp.status==200){
        document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
        }
    }
复制代码

4. get、post

GET能够经过在请求URL上添加请求参数，而POST请求则是做为HTTP消息的实体内容发送给WEB服务器。
get方式请求数据会被浏览器缓存起来,而post方式不会
GET大小限制约4K，POST则没有限制
若是有数据值 get要拼接字符串 post不须要设置

11. 跨域

使用JsonBird

4. Jq

1. jq的源代码

jQuery 是一个高效、精简而且功能丰富的 JavaScript 工具库。

5. CSS3

1. 动画

animation-name
animation-duration 规定动画完成一个周期花费的秒或毫秒,默认是 0。
animation-timing-function 规定动画的速度曲线。默认是 "ease"。
animation-delay 规定动画什么时候开始。默认是 0。
animation-iteration-count 规定动画被播放的次数。默认是 1。
animation-direction 规定动画是否在下一周期逆向地播放。默认是 "normal"。
必须定义动画的名称和时长

div{
        width:100px;
        height:100px;
        background:red;
        animation:myfirst 5s;
        -moz-animation:myfirst 5s; /* Firefox */
        -webkit-animation:myfirst 5s; /* Safari and Chrome */
        -o-animation:myfirst 5s; /* Opera */
    }
    
    @keyframes myfirst{
        from {background:red;}
        to {background:yellow;}
    }
复制代码

2. 盒模型（标准、ie怪异盒模型）弹性盒模型

1. 标准盒模型 `width=content`

2. 怪异盒模型 `width=content+padding+border`这三个部分的宽度

box-sizing 控制元素是标准、怪异盒模型
以特定的方式定义匹配某个区域的特定元素
content-box（标准盒模型）border-box（怪异盒模型）
border-box 为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制
button自己是怪异盒模型

3. 元素布局问题(⽔平垂直都居中，左侧固定右侧⾃适应)

1. 水平垂直都居中

已知高度和宽度的元素

.item{
        position: absolute;
        margin:auto;
        left:0;
        top:0;
        right:0;
        bottom:0;
    }
复制代码

已知高度和宽度的元素

.item{
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -75px;  /* 设置margin-left / margin-top 为自身高度的一半 */
        margin-left: -75px;
    }
复制代码

未知高度和宽度元素解决方案

.item{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);  /* 使用css3的transform来实现 */
    }
复制代码

使用flex布局实现

.parent{
        display: flex;
        justify-content:center;
        align-items: center;
        /* 注意这里须要设置高度来查看垂直居中效果 */
        height: 300px;
        background: #AAA;
    }
复制代码

2. 左侧固定右侧⾃适应

定位

.left {
        position: absolute;
        height: 100px;
        width: 300px;
        background-color: blue;
    }
    .right {
        height: 200px;
        margin-left: 300px;
        background-color: red;
    }
复制代码

浮动

.left {
        float: left;
        height: 100px;
        width: 300px;
        background-color: blue;
    }
    .right {
        overflow: auto;
        height: 200px;
        background-color: red;
    }
复制代码

3.calc

.container{
        height:200px;
    }  
    .left{
        width:100px;
        height:50px;
        background-color:blue;
    }  
    .right{
        width: calc(100% - 100px);
        height:100px;
        background-color:yellow;
    }  
复制代码

6. Html5

1. h5新特性

语义化标签：header、footer、section、nav、aside、article
加强型表单：input 的多个 type
新增表单元素：datalist、keygen、output
新增表单属性：placehoder、required、min 和 max
音频视频：audio、video
canvas
本地存储：localStorage - 没有时间限制的数据存储；sessionStorage - 针对一个 session 的数据存储，当用户关闭浏览器窗口后，数据会被删除
新事件：onresize、ondrag、onscroll、onmousewheel、onerror、onplay、onpause WebSocket：单个 TCP 链接上进行全双工通信的协议

2. 常⻅的html5标签

<header> <footer> <nav> <section> <aside> <article> <video> <audio> <canvas>
复制代码

3. sessionStorage和localStorage、cookie区别

1. localStorage

可存数据大小为5M 会永久的存储在浏览器中除非手动删除

设置

localStorage.key = value

localStorage.setItem(key, value)
获取

localStorage.key

localStorage.getItem(key)

localStorage.name = 'zs';
    localStorage.setItem('age', 18)

    console.log(localStorage.name)
    console.log(localStorage.getItem('name'));
复制代码

2. sessionStorage

可存储的大小为5M 浏览器窗口关闭以后就没了，sessionStorage 返回一个对象

设置

sessionStorage.weight = '123kg';
    sessionStorage.setItem('height', '170cm');
复制代码

获取

console.log(sessionStorage);
    console.log(sessionStorage.weight);
    console.log(sessionStorage.getItem('height'))

复制代码

isNew 判断session是不是新建立的，与设备和浏览器及其缓存有关

if(getCookie(isNew)){

    } else {
      setCookie('isNew', 'true', '300');
    }
复制代码

3. cookie

cookie 存储大小为4K 能够设置过时时间，若是不设置关闭浏览器窗口就没了，cookie设置是一个字符

设置cookie

document.cookie = 'name=wxc';
    var date = new Date();
    date.setDate(date.getDate()+ 1);
    //toUTCString 日期对象转字符串
    //expires 过时时间
    document.cookie = 'text=111;expires=' + date.toUTCString();

复制代码

封装方法

// 设置cookie
    function setCookie(key, value, expires ) {
      var date = new Date();
      date.setDate(date.getDate() + expires*1);
      document.cookie = key + '=' + value + ';expires=' + date.toUTCString();
    }
复制代码

获取cookie

// 获取cookie 
    function getCookie(key) {
      var tmp = document.cookie; //'name=wxc; text=111'
      tmp = tmp.split(';'); // ["name=wxc", " text=111"]
      for(var i=0; i<tmp.length; i++) {
        var arr =  tmp[i].split('=')  // [' name','wxc']
        // trim() 删除字符串前面或后面的空格
        if (arr[0].trim() == key ) {
          return arr[1];
        }
      }
    }
复制代码

删除cookie

// 删除cookie
    function deleteCookie(key){
      var date =  new Date();
      //过时日期为前一天
      date.setDate(date.getDate() - 1);
      document.cookie = key + '=null;expires=' + date.toUTCString();
    }
    setCookie('text2', 'aaa', '3');
    deleteCookie('text2');
复制代码

4. 移动端兼容性问题

1. 设计稿2倍图实现绝对1px的边框（0.5px）安卓系统 ios7如下不⽀持0.5px

缩放、写1px的阴影

<!--css-->
    <style> *{ padding: 0; margin: 0; } div{ width: 2rem; height: 2rem; position: relative; } button{ width: .5rem; height: .3rem; position: absolute; z-index: 2; } div::before{ content: ''; display: block; width: 200%; height: 200%; top: 0; left: 0; border: 1px solid #eeeeee; -webkit-transform: scale(0.5); transform: scale(0.5); transform-origin: 0,0 position: absolute; z-index: 1; } </style>
    <!--html-->
    <body>
        <div>
            <button>点击</button>
        </div>
    </body>
    <!--js-->
    <script> var Obtn = document.getElementsByTagName("button")[0]; Obtn.onclick = function(){ alert("hello world"); } </script>
复制代码

2. 低版本安卓⼿机不⽀持背景⾊渐变，在单独写⼀个背景⾊

background-color:#ff7e33; 
    background-image:linear-gradient(45deg,#ff5303,#ff9143); 
复制代码

3. 低版本⼿机尤为是4.+系统的不支持es6写法

vconsole会报错script error ，但没法查出具体错误须要加垫片babel-polyfill

4.点击输⼊框拉起键盘输⼊完成后会发现⻚⾯⾼度⽆法被撑开

（安卓手机会出现）从新获取⻚⾯高度并赋值

5. 图⽚上传，不一样⼿机的input file展示形式不一样

ios系统⼀般会出现拍照和相册两个选项，安卓手机拍照、相册选择有时只出现⼀项，有时根据系统不一样会展现其余项，12306的webview不⽀持input file 会出现闪退的状况

6.ios 11系统input光标错位（系统自己缘由）

解决方法

7.页面滑动吸顶或吸底效果，手机qq的webview里没法拉动

须要阻止页面的默认动做

8.ios系统的input框会有⼀个隐形须要去掉

-webkit-appearance: none; 
复制代码

9.有的⼿机input placeholder⽆法垂直居中

能够设置input高度小⼀点而后上下加padding

网上的解决方式line-height：normal

10.ios系统⾳频⽆法⾃动播放，需监听⽤户有操做以后⼿动触发

5. px em rem区别，rem原理

px 像素
rem

相对于根元素

html{
        /* 1 rem */
        font-size: 16px;
    }
    div{
        /* 20*16px */
        width: 20rem;
        /* 20*16px */
        height: 20rem;
    }
复制代码

em

字体相对于根元素计算，其余元素相对于当前元素

html{
        /* 1 rem */
        font-size: 16px;
    }
    div{
        font-size: 18px;
        /* 20*18px */
        width: 20em;
        /* 20*18px */
        height: 20em;
    }
复制代码

6. ES6

1. let和var const区别

1. var

变量提高
从新定义会覆盖
变量提高只会提高变量名的声明，而不会提高变量的赋值初始化

//至关于声明提高
    //var a;
    console.log(a);
    var a = 1;
复制代码

2. let

无变量提高
不可从新定义
块做用域

做用于{ }内部

for(let i = 0 ;i < aLi.length ; i++){
        console.log(i);
        //输出0 1 2
    }
    console.log(i);
    //报错
复制代码

闭包

for(let i = 0 ;i <= aLi.length ;i++){
        //一级做用域
        aLi[i].onclick = function(){
            //二级做用域
            console.log(i);
        }
    }
复制代码

3. const

const 用于声明一个或多个常量，声明时必须进行初始化，不可从新赋值
块级做用域
不能和它所在做用域内的其余变量或函数拥有相同的名称
使用 const 定义的对象或者数组，实际上是可变的。下面的代码并不会报错

const obj = {
            name:'xiaoming';
            age:'2';
        }
        obj.age = '3';
        console.log(obj);//修改为功
        obj = {
            name:'xiaoming';
            age:'4';
        }
        console.log(obj);//报错
复制代码

const 关键字在不一样做用域，或不一样块级做用域中是能够从新声明赋值的

2. 箭头函数（箭头函数this指向）

this指向父做用域this
不可使用arguments获取参数，可使用rest获取参数
函数中只有一行代码 { } 能够省略

// 箭头函数中不可使用arguments获取参数,可使用rest获取参数
    var fun3 = (...rest) => {
        console.log(rest)；
        rest[0]；
    }
    fun3(1,2,3)
复制代码

3. 解构

解构：从数组和对象中提取值，对变量进行赋值

1. 数组的解构

按照顺序依次赋值

var [a,b,c] = [1,2,3];
复制代码

2. 对象的解构

按照key赋值

let {name,age} = {name:'xm',age:4};
    console.log(name,age);
    //取别名
    let {name:x,age} = {name:'xm',age:4};
    console.log(x,age);
复制代码

3. 字符串的解构

把字符串中每个字符提取出来分别进行赋值

const [a,b,c,d,e] = 'hello';
    console.log(a); //h
    console.log(b); //e
    console.log(c); //l
    console.log(d); //l
    console.log(e); //o
    
    let { length : len} = 'yahooa';
    console.log(len); //5
复制代码

4. 解构用途

深拷贝

let x = 2;
    let y = 3;
    [y,x]=[x,y];
    console.log(x);//3
    console.log(y);//2
复制代码

4. promise (异步编程)

Promise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大。
resolve 成功回调
reject 失败回调

1. `Promise.prototype.then()`

为 Promise 实例添加状态改变时的回调函数

2. `Promise.prototype.catch()`

用于指定发生错误时的回调函数

const promise = new Promise(function(resolve, reject) {
        if (/* 异步操做成功 */){
            resolve(value);
        } else {
            reject(error);
        }
    });
复制代码

//方法一
    const promise = new Promise(function(resolve, reject) {
        setTimeout(function(){
           reject(); 
        },2000)
 
    }).then(function(){//成功
        //code
    }).catch(function(){//失败
        //code
    });
    
    //方法二
    const promise = new Promise(function(resolve, reject) {
        setTimeout(function(){
           reject(); 
        },2000)
 
    }).then(function(){//成功
        //code
    }，function(){//失败
        //code
    });
复制代码

3. `Promise.prototype.finally()`

finally方法用于指定无论 Promise 对象最后状态如何，都会执行的操做。

4. `Promise.all`

用于将多个 Promise 实例，包装成一个新的 Promise 实例。
接受一个数组做为参数，p一、p二、p3都是 Promise实例，若是不是，就会先调用下面讲到的Promise.resolve方法，将参数转为 Promise 实例，再进一步处理。

// 生成一个Promise对象的数组
    const promises = [2, 3, 5, 7, 11, 13].map(function (id) {
      return getJSON('/post/' + id + ".json");
    });
    
    Promise.all(promises).then(function (posts) {
      // ...
    }).catch(function(reason){
      // ...
});
复制代码

5. `Promise.race`

一样是将多个 Promise 实例，包装成一个新的 Promise 实例。
只要p一、p二、p3之中有一个实例率先改变状态，p的状态就跟着改变。那个率先改变的 Promise 实例的返回值，就传递给p的回调函数。

const p = Promise.race([p1, p2, p3]);
复制代码

5. Generator(异步编程)

Generator函数是ES6提供的一种异步编程解决方案

function* fun() {
        console.log("start");
        yield request();//yield语句执行完成后中止
        console.log("end");
    }
    function request() {
        setTimeout(() => {
            console.log("success");
        }, 2000)
    }
    let _fun = fun();//指针对象
    console.log(_fun.next());//{value: yield返回值, done: false}
    _fun.next();
    console.log(_fun.next());//next可传值，是上一个表达式返回值
复制代码

6. async

async(异步编程)

async function fun() {
        console.log("start...");
        let data = await request();
        console.log(data);//14
        let data1 = await request1(data);//拿到上次的返回结果
        console.log(data1);//16
        console.log("end...");
    }
    function request(){
        return new Promise(function(resolve,reject){
        setTimeout(() => {
            let obj = {
                name: 'jj',
                age: 18
            }
            console.log("success");
            resolve(obj);
            }, 2000)
        })
    }
    function request1(_tmp){
        console.log(_tmp);//32
        return new Promise(function (resolve, reject) {
            setTimeout(() => {
                let obj = {
                    name: 'ccc',
                    age: 1
                }
                console.log("success1");
                resolve(obj);
            }, 2000)
        })
    }
    fun();
复制代码

//打印结果
    1.html:12 start...
    1.html:26 success
    1.html:14 {name: "jj", age: 18}
    1.html:32 {name: "jj", age: 18}age: 18name: "jj"__proto__: Object
    1.html:39 success1
    1.html:16 {name: "ccc", age: 1}
    1.html:17 end...
复制代码

7. vue

1. 常⽤指令

1. `v-for`

<div id="app">
        <ul>
            <li v-for="item in arr">{{item}}</li>
        </ul>
        <p v-for="(value,key) in list">{{key}}:{{value}}</p>
        <p v-for="item in obj">{{item.name}}:{{item,age}}</p>
    </div>
    
    <script> let vm = new Vue({ el:'#app', data:{ arr:[1,2,3], list:{ name:'ccc', age:18, height:'180cm' }, obj:[ { name: 'ccc', age: 18, height: '180cm' }, { name: 'ccc', age: 16, height: '160cm' } ] } }) vm.arr.push(4)//添加 </script>
复制代码

2. `v-test`

插入文本

3. `v-html`

插入html代码

4. `v-on`

绑定事件

<div id="app">
        <div>{{number}}</div>
        <button v-on:click="add">点我</button>
    </div>
    
    <script> var app = new Vue({ el: '#app', data: { number: 0 }, methods: {//方法 add() { this.number++; } } }) </script>
复制代码

简写

<a @click="doSomething">...</a>
复制代码

$event 绑定事件时传参

v-on:click="handle('ok', $event)"
    
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                number: 0
            },
            methods: {//方法
                add($event) {
                    console.log($event);
                    this.number++;
                }
            }
        })
    </script>
复制代码

5. `v-model`

表单输入绑定
<input> <textarea> <select> -单选框

<input type="radio" id="one" value="One" v-model="picked">
    <input type="radio" id="two" value="Two" v-model="picked">
    
    <script> new Vue({ el: '#example-4', data: { picked: '' } }) </script>
复制代码

复选框
绑定到同一个数组

<div id='example'>
      <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
      <label for="jack">Jack</label>
      <input type="checkbox" id="john" value="John" v-model="checkedNames">
      <label for="john">John</label>
      <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
      <label for="mike">Mike</label>
      <br>
      <span>Checked names: {{ checkedNames }}</span>
    </div>
    
    <script> new Vue({ el: '#example', data: { checkedNames: [] } }) </script>
复制代码

6. `v-bind`

绑定属性

<div v-bind:id="dynamicId"></div>
    <!--简写-->
    <div :id="dynamicId"></div>
复制代码

判断绑定
三种绑定方式

<div :class="A">
    <div :class="['A','B']">
    <div :class="['A',isA?'B':'']">
    <div :class="{ classB: isB, classC: isC }">
    <div :class="{ 'list': isA? 'active':''}">//isA==true 绑定active类名
    
    <script> new Vue({ el: '#example', data: { isA:true, isB:false, isC:true } }) </script>
复制代码

7. `v-if`

v-if v-else-if v-else必须紧接着写

<div v-if="Math.random() > 0.5">
        Now you see me
    </div>
    <div v-else>
        Now you don't
    </div>
复制代码

8. `v-show`

v-show 的元素始终会被渲染并保留在 DOM 中
v-if 不知足条件不生成html解构
v-show 改变元素的 CSS 属性 display。

<h1 v-show="ok">Hello!</h1>
复制代码

2. ⽣命周期

1. 生命周期

从Vue实例建立、运行、到销毁期间，老是伴随着各类各样的事件，这些事件，统称为生命周期

1. beforeCreat

实例刚在内存中被建立出来，此时，尚未初始化好 el data methods 属性(undefind)

2. created

实例已经在内存中建立，此时 data 和 methods 已经建立好，el(undefind),此时尚未开始编译模板

3. beforeMount

此时已经完成了模板的编译，元素已经挂载上，可是内容尚未填充进去

4. mounted

此时，已经将编译好的模板，挂载到了页面指定的容器中显示

3. 运行期间的生命周期函数

1. beforeUpdate

状态更新以前执行此函数，此时 data 中的状态值是最新的，可是界面上显示的数据仍是旧的，由于此时尚未开始从新渲染DOM节点，虚拟dom更新，真实dom不更新

2. updated

实例更新完毕以后调用此函数，此时 data 中的状态值和界面上显示的数据，都已经完成了更新，界面已经被从新渲染好了！

3. beforeDestroy

实例销毁以前调用。在这一步，实例仍然彻底可用

4. destroyed

Vue 实例销毁后调用。调用后，Vue实例指示的全部东西都会解绑定，全部的事件监听器会被移除，全部的子实例也会被销毁。
生命周期

3. ⽗⼦组件传值

子组件可使用 $emit 触发父组件的自定义事件。
方法一

<div id="app">
        <popcommon :title="logtitle" v-show="loginStatus" @hide="close"></popcommon>//父组件绑定close方法
    </div>
    
    <template id="common">
        <div id="content">
            <span @click="$emit('hide')">X</span>//触发父组件的自定义
        </div>
    </template>
    
    <script> new Vue({ el: '#app', components:{ 'popcommon':{ template:'#common', props:['title'] } }, methods:{ close(){ this.reinStatus = false, this.loginStatus = false } } }) </script>
复制代码

方法二

<div id="app">
        <popcommon :title="logtitle" v-show="loginStatus" :closefun="close"></popcommon>
        <!--父组件绑定属性-->
    </div>
    
    <template id="common">
        <div id="content">
            <button @click="closefun()">{{title}}</button>
            <!--子组件绑定事件-->
        </div>
    </template>

  <script> new Vue({ el: '#app', components:{ 'popcommon':{ template:'#common', props:['title','closefun']//父组件接收 } }, methods:{ close(){ this.reinStatus = false, this.loginStatus = false } } }) 复制代码

父组件可使用 props 把数据传给子组件。

//父级
    new Vue({
        el:"#app",
        data:{
            aaa:111,
            bbb:222
        },
        methods:{
            dosometing:function(msg){
                console.log(msg)
            }
        }
    })
    //组件：
    Vue.component('child',{
            props:['aaa'],
            template:'<input type='text'>',
             childfun:function(){
                    this.change1(1111)
        }
        });
    //调用子组件
    <child :change="dosometing" :aaa='111' :bbb='222'></child>
复制代码

4. vuex

参考文档

5. computed和⽅法watch区别

1. 计算属性(computed)

计算属性的结果会被缓存，再次调用不会执行，除非依赖的响应式属性变化才会从新计算。

var vm = new Vue({
      data: { a: 1 },
      computed: {
        // 仅读取
        aDouble: function () {
          return this.a * 2
        },
        // 读取和设置
        aPlus: {
          get: function () {
            return this.a + 1
          },
          set: function (v) {
            this.a = v - 1
          }
        }
      }
    })
复制代码

2. 方法(methods)

能够直接经过 VM 实例访问这些方法，或者在指令表达式中使用

var vm = new Vue({
      data: { a: 1 },
      methods: {
        plus: function () {
          this.a++
        }
      }
    })
    vm.plus()
    vm.a // 2
复制代码

3. 监听(watch)

var vm = new Vue({
      data: {
        a: 1,
      },
      watch: {
        a: function (newVal, oldVal) {
          console.log('new: %s, old: %s', newVal, oldVal)
        }
    })
    vm.a = 2 // => new: 2, old: 1
复制代码

6. 虚拟dom diff

虚拟DOM是放在JS和HTML中间的一个层。它能够经过新旧DOM的对比，来获取对比以后的差别对象，而后有针对性的把差别部分真正地渲染到页面上，从而减小实际DOM操做，最终达到性能优化的目的。