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. 行級元素和塊級元素區別

  1. 行級元素
    • 多個元素佔⼀行 不能設置寬高
    • 不能夠嵌套塊級元素
    • 浮動後能夠設置寬高
  2. 塊級元素
    • 一個元素佔一行 垂直排列列 能夠設置寬高
    • 塊級元素能夠嵌套行級元素、行級塊元素、塊級元素
    • 特例： 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. 外邊距合併

當兩個垂直外邊距相遇時，它們將造成一個外邊距。合併後的外邊距的高度等於兩個發生合併的外邊距的高度中的較大者。

解決辦法：

嵌套關係
  1. 父元素overflow:hidden
  2. 父元素或子元素設置絕對定位 position:absolute
  3. 父元素或子元素浮動 float:left
  4. 給父元素設置邊框
並列關係

外邊距設置在一個元素上便可

3. js

1. js數據類型

  • number
  • string
  • boolean
  • null
  • Undefined
  • obj

2. 類

  • 具備相同屬性和方法的集合（構造方法/構造函數） 首字母大寫
  • 屬性寫在構造函數 方法寫在原型（prototype）
String.prototype.functionname = function(){}
複製代碼
  • 原型中方法被實例化對象所共享
  • prototype 下有 construction （判斷數組/對象）表構造函數

3. 原型（prototype__proto__constructor）

4. 繼承

5. this指向

  1. 函數中 this是 window
  2. 定時器(window對象下的方法) this是 window
  3. 對象 this是當前對象
  4. 構造函數 this 是實例化對象
  5. 事件綁定 this 綁定事件的那個dom對象
  6. 改變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. 閉包

  1. 外部函數有內部函數

  2. 內部函數會使用外部函數裏的局部變量

  3. 優勢：

    閉包內的變量不會被垃圾回收機制處理掉，一直存在內存中

    能夠拿到索引值

<script>
    var aLi = document.getElementsByTagName('li');
    for(var i = 0 ; i<aLi.length ;i++){
        (function(j){
            aLi[j].onclick = function (){
                console.log(j);
            }
        })(i)
    }
複製代碼
  1. 缺點： 會形成內存泄露

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
  1. GET能夠經過在請求URL上添加請求參數，而POST請求則是做爲HTTP消息的實體內容發送給WEB服務器。
  2. get方式請求數據會被瀏覽器緩存起來,而post方式不會
  3. GET大小限制約4K，POST則沒有限制
  4. 若是有數據 值 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. 水平垂直都居中
  1. 已知高度和寬度的元素
.item{
        position: absolute;
        margin:auto;
        left:0;
        top:0;
        right:0;
        bottom:0;
    }
複製代碼
  1. 已知高度和寬度的元素
.item{
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -75px;  /* 設置margin-left / margin-top 爲自身高度的一半 */
        margin-left: -75px;
    }
複製代碼
  1. 未知高度和寬度元素解決方案
.item{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);  /* 使用css3的transform來實現 */
    }
複製代碼
  1. 使用flex佈局實現
.parent{
        display: flex;
        justify-content:center;
        align-items: center;
        /* 注意這裏須要設置高度來查看垂直居中效果 */
        height: 300px;
        background: #AAA;
    }
複製代碼
2. 左側固定右側⾃適應
  1. 定位
.left {
        position: absolute;
        height: 100px;
        width: 300px;
        background-color: blue;
    }
    .right {
        height: 200px;
        margin-left: 300px;
        background-color: red;
    }
複製代碼
  1. 浮動
.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操做，最終達到性能優化的目的。
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程