7.07x9.07 阶段总结1. html 1. html语义化 2. 块级元素 3. ⾏级元素 4. 行级元素和块级元

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

定位类型
absolute

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

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

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

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

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

并且它原本所占的空间不变，即不会影响其他元素布局；

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

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 实例。
接受一个数组作为参数，p1、p2、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 实例。
只要p1、p2、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操作，最终达到性能优化的目的。

7.07x9.07 阶段总结