000 (H5*) 常見代碼

目錄：

1：HTML

 

1：塊級元素(block-level)

2：行內元素(inline-level)

3：行內塊元素（inline-block）

4: img標籤

5：表單元素

6：自定義列表  dl

7：表格  Table

 

2：CSS

 

1：標籤選擇器：

2：class選擇器

3：id選擇器

4：通配選擇器

5：後代選擇器

6：子代選擇器

7：交集選擇器

8：並集選擇器

9：連接僞類選擇器  LV hao

10：font 風格權重  大小字體

11：裝飾  text-decoration

12：背景  background

13： 陰影  shadow

14：邊框 border

14：邊框 border

15：內邊距 padding

16：浮動

17：定位（覆蓋、脫標）

 

3：JS

 

1：js是一門什麼語言，包含什麼

2：js中的原始數據類型: number,string,boolean,undefined,null,object

3：類型轉換

4：變量

5： 操做符:一些符號-----用來計算

6：數組:存儲一組有序的數據,數據類型能夠不同

7：函數

8：變量、做用域、做用域鏈

9：函數做爲參數

10：函數做爲返回值

11: 預解析和函數預解析分段不衝突、變量不分段

12：對象

13：簡單數據類型和複雜數據類型

14：Math

15：日期：date 

16：字符串

17：Array  數組的方法

18：包裝類型

19：構造函數、原型對象、實例對象之間的關係

20：原型對象的簡單寫法--必須手動添加構造器

21：實例對象訪問屬性和方法

22：call和apply方法調用  修改原型指向，調用

23：bind方法複製 

24：閉包

25：沙箱：虛擬測試和真實世界結果同樣，不影響真實世界。

26：原型和原型鏈

27：構造函數的原型指向能夠改變

28: 原型的最終指向

29：先修改原型指向在添加方法。

30:  一個神奇的原型鏈

31：原型鏈

32：繼承（經過原型來修改原型執行實現繼承） 

33：利用call，在構造函數中修改原型指向

34：組合繼承

35：拷貝繼承

36：函數聲明和函數表達式的區別

37：函數中this的指向

38：淺拷貝

39：深拷貝

40：遍歷DOM樹

41：正則表達式

42：正則表達式的建立方式

43：字符創中的正則表達式

44:真數組和僞數組

 

4：Vue

 

1：MVC和MVVM（背誦）

2：常見的指令

3:  五大事情修飾符

4：在Vue中使用CSS

5：v-for遍歷

7：v-if和v-show指令 

8:  過濾器

9: 自定義指令

10：Vue的生命週期

11：按鍵修飾符號

12：Vue動畫

13：組件化開發

14：組件中的數據和方法

15：組件之間的切換

16：父組件向子組件傳值，經過屬性綁定的方式

17：父組件向子組件傳遞事件--實現向父組件傳值

18:  ref獲取dom元素和組件

19：路由6部曲

20：路由傳遞參數

21：路由嵌套

22：watch

 

5：webpackage

 

 

 

 

6：算法

 

 

 

正文

1：HTML

 1：塊級元素(block-level)

<div> 、<p>

<ul>、<ol>、<li>

<h1>~<h6>

 

2：行內元素(inline-level)

<span>、<a>

<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>

 

3：行內塊元素（inline-block）

<img />、<input />、<td>

 

4: img標籤

 <img src="timg.gif" title="梅長蘇"  alt="我是梅長蘇， 沒了"  border="10"/> 

src:圖像路徑

title：鼠標懸浮的時候顯示的文本

alt：圖片不顯示的時候，替換文本

border：邊框

 

5：表單元素

<input type="text" value="北京" style="color: #ccc;" 

<input type="password" value="北京" style="color: #ccc;"

 

<input type="radio" value="北京" style="color: #ccc;" 

<input type="checkbox" value="北京" style="color: #ccc;" 

 

<input type="button" value="北京" style="color: #ccc;" 

<input type="submit" value="北京" style="color: #ccc;" 

<input type="reset" value="北京" style="color: #ccc;" 

<input type="image" value="北京" style="color: #ccc;" 

 

<input type="file" value="北京" style="color: #ccc;" 

 

text   password 文本  密碼

radio checkbox(要有name屬性)  單選框 複選框

button submit  reset image    普通按鈕  提交按鈕 重置按鈕  背景圖片按鈕

file 上傳文件按鈕

 

6：自定義列表  dl

<dl> 

   <dt>css網站</dt> 

   <dd>網址爲www.divcss5.com</dd> 

   <dt>div css網站</dt> 

   <dd>網址爲www.divcss5.com</dd> 

   <dt>div+css網站</dt> 

   <dd>網址爲www.divcss5.com</dd> 

</dl>

 

dl：defined list 自定義列表

dt:　　defined title 列表項標題

dd：　　defined　　description　　列表項描述

 

7：表格  Table

 <table width="500" >

       <caption>我的信息表</caption>

       <thead>

          <tr>

             <th>姓名</th>

          </tr>

        </thead>

        <tbody>

            <tr>

              <td>小王</td>    

            </tr>

         </tbody>

</table>

 

table：表格

caption：標題

thead  表頭

tbody：表格主體

tr：一行

th：表頭的單元格

td:  表格主體單元格

 

 

2：CSS

標籤 類 id 通配符

後代 子代

交集  並集

僞類

 

 

1：標籤選擇器：

th {

　color:red;

}

 

2：class選擇器

.suibian {

　　 color: blue;

}

 

 

3：id選擇器

#last {

　　color: pink;

}

 

4：通配選擇器

* {  /** 表明全部標籤的意思 使用較少 */

   color: pink;

}

 

5：後代選擇器

div p  {  

　　color: pink;

}

 

6：子代選擇器

ul > li > a {

   color: pink; 

}

 

7：交集選擇器

標籤選擇器和類選擇器

div.red {  /*交集選擇器  既是 div  又 叫 red  知足條件 用的較少 特殊狀況使用  瞭解 */

　　color: red;

}

 

 

8：並集選擇器

div, 

p, 

span {   /*並集選擇器  用逗號隔開  , 表明  和  集體聲明 適合於相一樣式   */

 color: red;

}

 

 

9：連接僞類選擇器  LV hao

a:link {  /* 未訪問過的鏈接狀態*/

        color: #3c3c3c;

}

a:visited {  /*這個連接咱們已經點過的樣子  已訪問過連接*/

        color: orange;

}

a:hover {  /*鼠標通過鏈接時候的樣子*/

        color: #f10215;

}

a:active {  /*鼠標按下時候的樣子*/

        color: green;

}

 

10：font 風格 權重  大小 字體

選擇器{font: font-style  font-weight  font-size/line-height  font-family;  風格 權重  大小 字體}

h1 {

        font: italic 700 12px "微軟雅黑";

}

 

11：裝飾  text-decoration

div {

          /*text-decoration: none;  取消裝飾*/

          text-decoration: underline; /*下劃線*/

          /*text-decoration: overline; 上劃線*/

          /*text-decoration: line-through;  刪除線*/

}

 

12：背景  background

background: red url(image.jpg) repeat-y  scroll 50% 0 ; 

background:背景顏色 背景圖片地址 背景平鋪 背景滾動 背景位置x軸  y軸

若是是關鍵字

top center bottom

left center right

 

13： 陰影  shadow

box-shadow: 5px 5px 3px 4px rgba(0, 0, 0, .4) outset/inset;

box-shadow:水平位置 垂直位置 模糊距離 陰影尺寸（影子大小） 陰影顏色  外/內陰影；

 

14：邊框 border

border: 1px solid red; /*上邊框*/

大小 風格 顏色

none：沒有邊框即忽略全部邊框的寬度（默認值）

solid：邊框爲單實線(最爲經常使用的)

dashed：邊框爲虛線  

dotted：邊框爲點線

 

15：內邊距 padding

/*上下左右都是 20px*/

padding: 20px; 

 /*上下 10  左右 20*/

padding: 10px 20px;

/*上 10  左右 20  下 是 30*/

padding: 10px 20px 30px; 

/* 上 10  右20  下 30 左 40*/

padding: 10px 20px 30px 40px;  

 

16：浮動 爲了讓塊元素在一行展現

1：float      浮 漏 特   

浮：    加了浮動的元素盒子是浮起來的，漂浮在其餘的標準流盒子上面。

漏：    加了浮動的盒子，不佔位置的，它浮起來了，它原來的位置漏 給了標準流的盒子。

特：    特別注意，首先浮動的盒子須要和標準流的父級搭配使用， 其次 特別的注意浮動可使元素顯示模式體現爲行內塊特性。

不會超過內邊距

影響下面的元素

 

2： 清除浮動本質

清除浮動主要爲了解決父級元素由於子級浮動引發內部高度爲0 的問題。

 

3：清除浮動的方法

1:額外標籤法

<!-- 最後一個浮動標籤的後，新添加一個標籤 清除浮動 -->

<div style="clear:both"></div>  

 

2： 父級添加overflow屬性方法

/*別加錯位置了，給 父親加*/

<div class="overflow: hidden">

3：after僞元素清除浮動

 .clearfix:after {  content: ""; display: block; height: 0; clear: both; visibility: hidden;  }   

 .clearfix {*zoom: 1;}   /* IE六、7 專有 */

 

4：雙元素清除浮動

 

     .clearfix:before, .clearfix:after {

        content: "";
        display: table;
    }
.clearfix:after {
        clear: both;
    }

.clearfix {
        *zoom: 1;
    }

 

17：定位（完成飄起來、脫標）

1：靜態定位 static

標準流

 

2：相對定位relative(自戀型)：佔有位置

1. 脫標、佔有位置

2. 每次移動的位置，是以本身的左上角爲基點移動（相對於本身來移動位置）

3：那麼定位的主要價值就是 移動位置， 讓盒子到咱們想要的位置上去。

 

3：絕對定位absolute (拼爹型)：浮動、不佔位置（浮動以後，margin失效）

絕對定位是將元素依據最近的已經定位（絕對、固定或相對定位）的父元素（祖先）進行定位。 

 

4：固定定位fixed(認死理型)：脫標、不佔位置

固定定位有兩點：

 1. 固定定位的元素跟父親沒有任何關係，只認瀏覽器。

2. 固定定位徹底脫標，不佔有位置，不隨着滾動條滾動。

 

5：子絕父相

 

3：JS

1：js是一門什麼語言，包含什麼

　　腳本語言:  不須要編譯,直接運行

 

　　解釋性語言:  遇到同樣代碼就解釋一行代碼

 

　　動態

　　基於對象

　　弱類型語言：聲明變量的時候都使用var

 

  JS分三個部分:
    * 1. ECMAScript標準: js的基本的語法
    * 2. DOM
    * 3. BOM

 

2：js中的原始數據類型: number,string,boolean,undefined,null,object

     number數據類型----不管是整數仍是小數都是number數據類型的
     string數據類型----字符串,獲取字符串的長度:變量名.length
     boolean數據類型---兩個值,true，false
     null----只有一個,null
     undefined----只有一個,undefined,一個變量聲明瞭,沒有賦值
     object---對象-----面向對象的時候講解

     null和undefined數據是沒有太大意義的,null是頗有意義的---對象的位置講
     NaN----不是一個數字,不是一個數字和一個數字計算--->結果就是NaN
     isNaN()--->判斷這個變量或者這個值是否是 不是一個數字---若是不是一個數字結果是true,若是是一個數字結果false

 

3：類型轉換

   1：其餘類型轉數字
     parseInt()---->轉整數
     parseFloat()--->轉小數
     Number()---->轉數字-----要比上面兩個嚴格

//    console.log(parseInt("10"));//10

//    console.log(parseFloat("10"));//10

//    console.log(Number("10"));//10

   2： 其餘類型轉字符串
     .toString()
     String();
    

//    var num=10;
//    console.log(num.toString());//字符串類型

//    //2  String();
//    var num1=20;
//    console.log(String(num1));

   3：其餘類型轉布爾類型
     Boolean()---->要麼是true要麼是false

    //1  Boolean(值);
//
//    console.log(Boolean(1));//true
//    console.log(Boolean(0));//false
//    console.log(Boolean(11));//true
//    console.log(Boolean(-10));//true
//    console.log(Boolean("哈哈"));//true
//    console.log(Boolean(""));//false
//    console.log(Boolean(null));//false
//    console.log(Boolean(undefined));//false

4：變量

1：做用,存儲數據的或者是操做數據

2：獲取變量的類型    var num = 10;

    var str = "小白";
    var flag = true;
    var nll = null;
    var undef;
    var obj = new Object();
    //是使用typeof 獲取變量的類型
    console.log(typeof num);//number
    console.log(typeof str);//string
    console.log(typeof flag);//boolean
    console.log(String(nll));//是null
    console.log(typeof nll);//不是null
    console.log(typeof undef);//undefined
    console.log(typeof obj);//object
    console.log(typeof(num));


5： 操做符:一些符號-----用來計算

     
      1：算數運算符:  +  -  * / %
      2：算數運算表達式:由算數運算符鏈接起來的表達式
      3：一元運算符: 這個操做符只須要一個操做數就能夠運算的符號  ++  --
      4：二元運算符: 這個操做符須要兩個操做數就能夠運算,
      5：三元運算符: -----不講,明天講
      6：複合運算符: +=  -=  *= /= %=
      7：複合運算表達式:由複合運算符鏈接起來的表達式
     
      var num=10;
      num+=10;------>就是:num=num+10;
      console.log(num);20
     
     
      8：關係運算符: >  <  >=  <=  ==不嚴格的 ===嚴格的 !=不嚴格的不等 !==嚴格的不等
      9：關係運算表達式:由關係運算符鏈接起來的表達式
           關係運算表達式的結果是布爾類型
      10：邏輯運算符:
      &&---邏輯與--而且
      ||---邏輯或---或者
      !---邏輯非---取反--取非
      
      11：邏輯運算表達式:由邏輯運算符鏈接起來的表達式
       表達式1&&表達式2
      若是有一個爲false,整個的結果就是false
      表達式1||表達式2
      若是有一個爲true,整個的結果爲true
      !表達式1
      表達式1的結果是true,整個結果爲false
      表達式1的結果是false,整個結果爲true
     
      12： 賦值運算符: =

6：數組:存儲一組有序的數據,數據類型能夠不同

 1： 數組的做用:一次性存儲多個數據
      數組元素:數組中存儲的每一個數據,叫數組元素,存儲了5個數據,有5個數組元素
      數組的長度:數組的元素的個數,叫數組的長度:數組名.length--->就是長度,數組的長度是能夠改變的
      索引(下標):存儲數組元素的編號,從0開始,到數組的長度-1結束
      索引是用來存儲和讀取數組元素的
      遍歷數組:經過循環的方式找到數組中的每一個數據
     
     
  2： 數組定義的方式:
      1. 經過構造函數定義數組
      var 數組名=new Array();空數組 Array()就是構造函數
      var 數組名=new Array(長度);是設置數組的初始的長度,長度是能夠改變的
      var 數組名=new Array(值,值,值...);定義數組並設置數組中的元素值

      2. 字面量的方式定義數組
      var 數組名=[];空數組
      var 數組名=[10];這個數組有一個元素,值是10,長度是1
     
  3：存儲和讀取

    經過下標設置數組的元素值: 數組名[索引]=值
    經過下標訪問數組的元素值: 數組名[索引]

7：函數

    1：函數:把一些重複的代碼封裝起來,在須要的時候直接調用這個函數就能夠了
      函數做用:代碼的重用

    2： 函數定義:
      function 函數名(){
          函數體
      }

     3： 函數調用:
      函數名();
     

     4： 參數:形參和實參 
　　　　　　形參:函數定義的時候函數名字後面的小括號裏的變量就是參數,是不須要寫var
      　　實參:函數調用的時候小括號裏傳入的變量或者是值,都是實參

　　　　  arguments----->能夠獲取函數調用的時候,傳入的實參的個數
           　　 arguments是一個對象,是一個僞數組
   　　　　　　  arguments.length--->是實參的個數
    　　　　　　 arguments[索引]---->實參的值

     5：返回值:函數中若是有return,那麼這個函數就有返回值
      若是函數中沒有return,那麼這個函數沒有返回值
      若是函數中有return,可是後面什麼內容都沒有,這個函數沒有明確返回值
      若是一個函數沒有明確的返回值,函數調用了,而且接收了,那麼此時接收的結果undefined
      若是直接輸出函數名字,那麼是這個函數的代碼

      無參數無返回值的函數
      function f1(){
     
      }

      有參數無返回值的函數,2個參數
      function f2(x,y){
     
      }

     無參數有返回值的函數
      function f3(){
        return 100;
      }

      有參數有返回值的函數
      function f4(x){
       return "您好";
      }

8：變量、做用域、做用域鏈

1：做用域:變量的使用範圍
     全局做用域:全局變量在任何位置均可以使用的範圍
     局部做用域:局部變量只能在某個地方使用---函數內
     全局變量,若是頁面不關閉,那麼就不會釋放,就會佔空間,消耗內存
  

　　 隱式全局變量:聲明的變量沒有var,就叫隱式全局變量
    全局變量是不能被刪除的,隱式全局變量是能夠被刪除的
    定義變量使用var是不會被刪除的,沒有var是能夠刪除的

2： 做用域鏈:
　　　　在一個函數中使用一個變量,先在該函數中搜索這個變量,找到了則使用,找不到則繼續向外面找這個變量,找到則使用,一直找到全局做用域,找不到則是undefined

 <script>


    var num=10;
    function f1() {
      var num=20;
      function f2() {
        var num=30;
        function f3() {
          var num=50;
          console.log(num);
        }
        f3();
      }
      f2();
    }
    f1();
  </script>

 

 

 

3：變量
　　 全局變量:只要是在函數外面聲明的變量均可以當作或者是理解成是全局變量
    局部變量:在函數中定義的變量


9：函數做爲參數

<script>

    //函數能夠做爲參數使用,若是一個函數做爲參數,那麼咱們說這個參數(函數)能夠叫回調函數
    //只要是看到一個函數做爲參數使用了,那就是回調函數


    function sayHi(fn) {
      console.log("您好啊");
      fn();//fn此時應該是一個函數
    }
    function suSay() {
      console.log("我猥瑣,我邪惡,我齷齪,小蘇說");
    }


    sayHi(suSay);
</ script>

10：函數做爲返回值

<script>
    //結論:函數是能夠做爲返回值使用的:
    function f1() {
      console.log("f1函數調用了");
      return function () {
        console.log("這是一個函數");
      };
    }

    var ff=f1();//調用
    //ff就是一個函數了
    ff();

  </script>

 

11: 預解析 和 函數預解析分段不衝突、變量不分段

<script>
    //預解析:提早解析代碼
    /*
    *
    * 預解析:就是在解析代碼以前
    * 預解析作什麼事?
    * 把變量的聲明提早了----提早到當前所在的做用域的最上面
    * 函數的聲明也會被提早---提早到當前所在的做用域的最上面
    *
    *
    * */

    //1****:函數調用的時候,把會函數的聲明提高到做用域的上面
//    f1();//調用
//    var num=20;//這個變量的聲明會提高到變量使用以前
//    function f1() {
//      console.log(num);
//      //var num=10;
//    }


　　// 2：函數的聲明提早
//    function f1() {
//      console.log("小蘇好猥瑣");
//    }
//
//    f1();
//    function f1() {
//      console.log("小蘇沒有助教猥瑣");
//    }
//    f1();



    //把變量的聲明提早了
//    var num;
//    console.log(num);
//    num=10;
//    function f1() {
//      console.log("哈哈,助教好猥瑣哦");
//    }
    //f1();//報錯




  </script>

  <script>
    //預解析中,變量的提高,只會在當前的做用域（script）中提高,提早到當前的做用域的最上面
    //函數中的變量只會提早到函數的做用域中的最前面,不會出去
    //預解析會分段(多對的script標籤中函數重名,預解析的時候不會衝突)

    // 1:  變量
  //  function f1() {

  //   console.log(num);//undefined
  //   var num=10;
  //   }
  //  f1();
  //  console.log(num);// 報錯


    // 2：函數預解析分段不衝突，

    // f1();  // 預解析分段。只會提高到當前的script標籤
    // function f1() {
    //   console.log("哈哈");
    // }

      // 3：變量預解析變量不分段
      var num = 10;

  </script>
  <script>
    
    // function f1() {
    //   console.log("嘎嘎");
    // }


     console.log(num);
     var num = 30;
     console.log(num);

  </script>

 

12：對象

1：建立對象三種方式:

　1.調用系統的構造函數建立對象

     var 變量名= new Object();

2：構造函數建立對象

 //工廠模式建立對象
    function createObject(name,age) {
      var obj = new Object();//建立對象
      //添加屬性
      obj.name = name;
      obj.age = age;
      //添加方法
      obj.sayHi = function () {
        console.log("阿涅哈斯誒呦,我叫:" + this.name + "我今年:" + this.age);
      };
      return obj;
    }

 

3：自定義構造函數

   /*
    *
    * 1. 在內存中開闢(申請一塊空閒的空間)空間,存儲建立的新的對象
    * 2. 把this設置爲當前的對象
    * 3. 設置對象的屬性和方法的值
    * 4. 把this這個對象返回
    *
    * */
//自定義構造函數建立對象,我要本身定義一個構造函數,自定義構造函數,建立對象
    //函數和構造函數的區別；名字是否是大寫(首字母是大寫)
    // 自定義構造函數能夠直接調用（和普通函數同樣。） Person();
    function Person(name,age) {
      this.name=name;
      this.age=age;
      this.sayHi=function () {
        console.log("我叫:"+this.name+",年齡是:"+this.age);
      };
    }

 

4：字面量建立函數

var obj2={
      name:"小明",
      age:20,
      sayHi:function () {
        console.log("我是:"+this.name);
      },
      eat:function () {
        console.log("吃了");
      }
    };

13：簡單數據類型和複雜數據類型

1：原始數據類型: number,string,boolean,undefined, null,object
    基本類型(簡單類型),值類型: number,string,boolean
    複雜類型(引用類型):object
    空類型:undefined,null

2：值類型的值在哪一塊空間中存儲? 棧中存儲
   引用類型的值在哪一塊空間中存儲?對象在堆上存儲,地址在棧上存儲

    var num=10;//值類型,值在棧上
    var obj={};//複雜類型,對象在堆,地址(引用)在棧

 3：值類型之間傳遞,傳遞的是值
    引用類型之間傳遞,傳遞的是地址(引用)

 4： 值類型做爲函數的參數,傳遞的是值
    引用類型做爲函數的參數,傳遞的是地址

14：Math

  1：實例對象、靜態對象
  實例對象:經過構造函數建立出來,實例化的對象
  靜態對象:不須要建立,直接就是一個對象,方法(靜態方法)直接經過這個對象名字調用,
  實例方法必須經過實例對象調用
  靜態方法必須經過大寫的對象調用

  2： Math是對象，不是構造函數
     Math.PI----π---
     Math.E----常數的底數
     Math.abs(值)-----絕對值

     Math.ceil(值)----向上取整
     Math.floor(值)---向下取整

     Math.max(值)---求最大值
     Math.min(值)---求最小值

     Math.pow(2,4)---求2的4次方
     Math.sqrt(16)---求16開方

15：日期：date 
1：函數

    dt.getFullYear();//年
    dt.getMonth();//月---從0開始
    dt.getDate();//日
    dt.getHours();//小時
    dt.getMinutes();//分鐘
    dt.getSeconds();//秒
    dt.getDay();//星期---從0開始


    dt.toDateString();//日期
    dt.toLocaleDateString();//日期

    dt.toTimeString();//時間
    dt.toLocaleTimeString

2:格式化日期

/**
 * 獲取指定格式的時間
 * @param dt 日期的對象
 * @returns {string} 返回的是字符串的日期時間
 */
function getDate(dt) {
    //獲取年
    var year = dt.getFullYear();
    //獲取月
    var month = dt.getMonth() + 1;
    //獲取日
    var day = dt.getDate();
    //獲取小時
    var hour = dt.getHours();
    //獲取分鐘
    var minute = dt.getMinutes();
    //獲取秒
    var second = dt.getSeconds();
    month = month < 10 ? "0" + month : month;
    day = day < 10 ? "0" + day : day;
    hour = hour < 10 ? "0" + hour : hour;
    minute = minute < 10 ? "0" + minute : minute;
    second = second < 10 ? "0" + second : second;
    return year + "年" + month + "月" + day + "日 " + hour + ":" + minute + ":" + second;
}

16：字符串

　　　實例方法---->必需要經過new的方式建立的對象(實例對象)來調用的方法
     靜態方法---->直接經過大寫的構造函數的名字調用的方法(直接經過大寫的對象名字調用的)
   
     1：字符串的經常使用屬性:
      .length------>字符串的長度
      .charAt(索引),返回值是指定索引位置的字符串,超出索引,結果是空字符串
      .fromCharCode(數字值,能夠是多個參數),返回的是ASCII碼對應的值
　　　 .indexOf(要找的字符串,從某個位置開始的索引);返回的是這個字符串的索引值,沒找到則返回-1
      .lastIndexOf(要找的字符串);從後向前找,可是索引仍然是從左向右的方式,找不到則返回-1

　　　　.concat(字符串1,字符串2,...);返回的是拼接以後的新的字符串
　　　　.replace("原來的字符串","新的字符串");用來替換字符串的 
　　　　.trim();幹掉字符串兩端的空格 

　　　　.slice(開始的索引,結束的索引); 從索引5的位置開始提取,到索引爲10的前一個結束,沒有10，並返回這個提取後的字符串 
　　　　.split("要幹掉的字符串",切割後留下的個數);切割字符串 

　　　　.substr(開始的位置,個數);返回的是截取後的新的字符串 
　　　  .substring(開始的索引,結束的索引),返回截取後的字符串,不包含結束的索引的字符串 

　　　　.toLocaleLowerCase();轉小寫 
　　　　.toLowerCase();轉小寫
　　　  .toLocaleUpperCase()轉大寫 
　　　  .toUpperCase();轉大寫 
　

  <script>
    /*
     *
     * 實例方法---->必需要經過new的方式建立的對象(實例對象)來調用的方法
     * 靜態方法---->直接經過大寫的構造函數的名字調用的方法(直接經過大寫的對象名字調用的)
     *
     * */
    /*
     *
     * 字符串的經常使用屬性:
     * .length------>字符串的長度
     * .charAt(索引),返回值是指定索引位置的字符串,超出索引,結果是空字符串
     * .fromCharCode(數字值,能夠是多個參數),返回的是ASCII碼對應的值
     * .concat(字符串1,字符串2,...);返回的是拼接以後的新的字符串
     * .indexOf(要找的字符串,從某個位置開始的索引);返回的是這個字符串的索引值,沒找到則返回-1
     * .lastIndexOf(要找的字符串);從後向前找,可是索引仍然是從左向右的方式,找不到則返回-1
     * .replace("原來的字符串","新的字符串");用來替換字符串的
     * .slice(開始的索引,結束的索引); 從索引5的位置開始提取,到索引爲10的前一個結束,沒有10，並返回這個提取後的字符串
     * .split("要幹掉的字符串",切割後留下的個數);切割字符串
     * .substr(開始的位置,個數);返回的是截取後的新的字符串
     * .substring(開始的索引,結束的索引),返回截取後的字符串,不包含結束的索引的字符串
     * .toLocaleLowerCase();轉小寫
     * .toLowerCase();轉小寫
     * .toLocaleUpperCase()轉大寫
     * .toUpperCase();轉大寫
     * .trim();幹掉字符串兩端的空格
     *
     *
     * */


    //    var str="12345";
    //    console.log(str.length);
    //
    //    var str="whatareyounoshalei";
    //    var result=str.charAt(1000);
    //    console.log(result);

    //    var str=String.fromCharCode(107,108,109);
    //    console.log(str);


    //sos


    //    var str=String.fromCharCode(83,79,83);
    //    console.log(str);


    //    var str="what";
    //    console.log(str+"are"+"you"+"no"+"sha"+"lei");


    //    var str="小蘇";
    //    console.log(str.concat("喜歡","鳳姐","這是","真的"));


    //    var str="小蘇真的好猥好瑣啊";
    //    var index=str.indexOf("好",5);
    //    console.log(index);

    //    var str="helo amen";
    //    var index=str.lastIndexOf("Y");
    //    console.log(index);

    //    var str="小蘇好帥哦,真的好勇敢哦";
    //    if(str.indexOf("帥")!=-1){
    //      str=str.replace("帥","猥瑣");
    //    }else{
    //      console.log("不存在");
    //    }
    //    console.log(str);


//    var str = "若是有一天我邪惡了,請記住,我曾純潔過";
//    //從索引5的位置開始提取,到索引爲10的前一個結束,沒有10，並返回這個提取後的字符串
//    str = str.slice(5, 10);
//    console.log(str);

//    var str="喬峯|慕容|鳳姐|梅超風|小蘇|大蛇丸";
//    var arr=str.split("|");
//    for(var i=0;i<arr.length;i++){
//      console.log(arr[i]);
//    }


//    var str="哈哈,小蘇真的是好帥哦";
//    str=str.substr(5,5);
//    console.log(str);


//    var str="哈哈,小蘇真的是好帥哦";
//    str=str.substring(5,9);
//    console.log(str);

//    var str="HELLO";
//    //str=str.toLocaleLowerCase();
//    str=str.toLowerCase();
//    console.log(str);


//    var str="hello";
//    str=str.toLocaleUpperCase();
//    //str=str.toUpperCase();
//    console.log(str);

    var str="   哦,這    是一個神奇的一天   ";
    str=str.trim();
    console.log("===="+str+"====");
  </script>

 

17：Array  數組的方法

　　　　Array.isArray(對象)---->判斷這個對象是否是數組
      instanceof關鍵字
      .concat(數組,數組,數組,...) 組合一個新的數組
      .every(函數)--返回值是布爾類型,函數做爲參數使用,函數中有三個參數,第一個參數是元素的值，第二個參數是索引值,第三個參數是原來的數組(沒用)
      若是這個數組中的每一個元素的值都符合條件,最後才返回的是true
     
     .filter(函數);返回的是數組中每個元素都複合條件的元素,組成了一個新的數組
     
      .push(值);--->把值追加到數組中,加到最後了---返回值也是追加數據以後的數組長度
      .pop();--->刪除數組中最後一個元素,返回值就是刪除的這個值
      .shift();--->刪除數組中第一個元素,返回值就是刪除的這個值
      .unshift();--->向數組的第一個元素前面插入一個新的元素,----返回值是插入後的程度

      .forEach(函數)方法---遍歷數組用---至關於for循環
      .indexOf(元素值);返回的是索引,沒有則是-1
      .join("字符串");----返回的是一個字符串
      .map(函數);--->數組中的每一個元素都要執行這個函數,把執行後的結果從新的所有的放在一個新的數組中

      .reverse();----->反轉數組
      .sort();---排序的,可能不穩定,若是不穩定,請寫MDN中的那個固定的代碼
      .arr.slice(開始的索引,結束的索引);把截取的數組的值放在一個新的數組中,可是不包含結束的索引對應的元素值
      .splice(開始的位置,要刪除的個數,替換的元素的值);通常是用於刪除數組中的元素,或者是替換元素,或者是插入元素

  <script>

    /*
     *
     * Array.isArray(對象)---->判斷這個對象是否是數組
     * instanceof關鍵字
     * .concat(數組,數組,數組,...) 組合一個新的數組
     * .every(函數)--返回值是布爾類型,函數做爲參數使用,函數中有三個參數,第一個參數是元素的值，第二個參數是索引值,第三個參數是原來的數組(沒用)
     * 若是這個數組中的每一個元素的值都符合條件,最後才返回的是true
     *
     * .filter(函數);返回的是數組中每個元素都複合條件的元素,組成了一個新的數組
     *
     * .push(值);--->把值追加到數組中,加到最後了---返回值也是追加數據以後的數組長度
     * .pop();--->刪除數組中最後一個元素,返回值就是刪除的這個值
     * .shift();--->刪除數組中第一個元素,返回值就是刪除的這個值
     * .unshift();--->向數組的第一個元素前面插入一個新的元素,----返回值是插入後的程度
     * .forEach(函數)方法---遍歷數組用---至關於for循環
     * .indexOf(元素值);返回的是索引,沒有則是-1
     * .join("字符串");----返回的是一個字符串
     * .map(函數);--->數組中的每一個元素都要執行這個函數,把執行後的結果從新的所有的放在一個新的數組中
     * .reverse();----->反轉數組
     * .sort();---排序的,可能不穩定,若是不穩定,請寫MDN中的那個固定的代碼
     * .arr.slice(開始的索引,結束的索引);把截取的數組的值放在一個新的數組中,可是不包含結束的索引對應的元素值
     * .splice(開始的位置,要刪除的個數,替換的元素的值);通常是用於刪除數組中的元素,或者是替換元素,或者是插入元素
     *
     *
     * */
    //構造函數
    //    var arr1=new Array();
    //    //字面量的方式
    //    var arr2=[];


    //對象是否是數組類型:兩種
    //1   instanceof
    //    var obj=[];
    //    console.log(obj instanceof Array);//false
    //
    //    //2 使用數組的
    //    console.log(Array.isArray(obj));//


    //    var arr=["a","b","c"];
    //    var newArr=Array.from(arr);
    //    console.log(newArr);

    //    var arr1=[10,20,30];
    //    var arr2=[40,50,60];
    //    console.log(arr1.concat(arr2));

    //    var arr=[1000,2000,3000];
    //    //a----: 元素的值
    //    //b----: 索引的值
    //    //c----:誰調用了這個方法,那麼c就是誰---->arr
    //   var flag= arr.every(function (a,b) {
    //      //console.log(a+"==="+b+"===="+c);
    //      return a>2000;//數組中的每一個元素的值都要大於2000的狀況,最後才返回true
    //    });


    //    var arr=["小明明lkko","小曹操674","小白白bd","笑眯眯a"];
    //   var flag=arr.every(function (ele,index) {
    //      //數組中的每一個元素的長度是否是大於4
    //      return ele.length>4;
    //    });


    //console.log(flag);


    //    var arr=[10,20,30,40,50,60,70,80];
    //    var newArr=arr.filter(function (ele) {//ele---每一個元素
    //      return ele>40;
    //    });
    //    console.log(newArr);

    //    var arr=[10,0,20,0,40,0,60,100];
    //    var newArr=arr.filter(function (ele) {
    //      return ele!=0;
    //    });
    //    console.log(newArr);

    //    var arr=[10,20,30,40,50];
    //    var result=arr.unshift(100);
    //    console.log(result);
    //    console.log(arr);
//
//    var arr = [10, 20, 30, 40];
//    arr.forEach(function (ele,index) {
//      console.log(ele+'======'+index);
//    });

//    var arr=[10,20,30,40];
//    var index=arr.indexOf(300);
//    console.log(index);


//    var arr=["小白","小黑","小紅","小芳","小綠","小蘇"];
//    var str=arr.join("|");
//    console.log(str);


//    var numbers = [1, 4, 9];
//    var roots = numbers.map(Math.sqrt);
//    console.log(roots);


//    var arr=[10,20,30,40,50];
//    arr.reverse();//反轉
//    console.log(arr);


//    var arr=[1,40,20,10,100];
//    //a---arr[j]
//    //b---arr[j+1]
//    arr.sort(function (a,b) {
//      if(a>b){
//        return 1;
//      }else if(a==b){
//        return 0;
//      }else{
//        return -1;
//      }
//    });
//    console.log(arr);


//
//    var arr=[10,20,30,40,50,60,70,80,90,100];
//    var newArr= arr.slice(3,7);
//    console.log(newArr);


    var myFish = ['angel', 'clown', 'mandarin', 'sturgeon'];

   // myFish.splice(2, 0, 'drum'); // 在索引爲2的位置插入'drum'

    // myFish 變爲 ["angel", "clown", "drum", "mandarin", "sturgeon"]

    myFish.splice(2, 1); // 從索引爲2的位置刪除一項（也就是'drum'這一項）

    console.log(myFish);
    // myFish 變爲 ["angel", "clown", "mandarin", "sturgeon"]
  </script>

 

18：包裝類型

  <script>
    //基本包裝類型

    //普通變量不能直接調用屬性或者方法
    //對象能夠直接調用屬性和方法

    //基本包裝類型:自己是基本類型,可是在執行代碼的過程當中,若是這種類型的變量調用了屬性或者是方法,那麼這種類型就再也不是基本類型了,而是基本包裝類型,這個變量也不是普通的變量了,而是基本包裝類型對象
    //string number boolean


//    var str="hello";
//    str=str.replace("ll","HH");
//    console.log(str);


//    var str=new String("hello");
//    str=str.replace("ll","HH");
//    console.log(str);
//    str=null;

//    var num=10;//number---->
//    console.log(num.toString());


    //若是是一個對象&&true,那麼結果是true
    //若是是一個true&&對象,那麼結果是對象


//    var flag=new Boolean(false);
//    var result=true&&flag;
//    console.log(result);


//    var num=10;
//    var num2=Number("10");//轉換,沒有new---類型轉
//    var num3=new Number("10");//基本包裝類型


  </script>

 

19：構造函數、原型對象、實例對象之間的關係

   1 構造函數能夠實例化對象

   2 構造函數中有一個屬性叫prototype,是構造函數的原型對象

   3 構造函數的原型對象(prototype)中有一個constructor構造器,這個構造器指向的就是本身所在的原型對象所在的構造函數

   4 實例對象的原型對象(__proto__)指向的是該構造函數的原型對象

   5 構造函數的原型對象(prototype)中的方法是能夠被實例對象直接訪問的

20：原型對象的簡單寫法--必須手動添加構造器

<script>
    function Student(name, age, sex) {
      this.name = name;
      this.age = age;
      this.sex = sex;
    }
    //簡單的原型寫法
    Student.prototype = {
      //手動修改構造器的指向
      constructor:Student,
      height: "188",
      weight: "55kg",
      study: function () {
        console.log("學習好開心啊");
      },
      eat: function () {
        console.log("我要吃好吃的");
      }
    };

    var stu=new Student("段飛",20,"男");
    stu.eat();
    stu.study();
    console.dir(Student);
    console.dir(stu);

  </script>

 

21：實例對象訪問屬性和方法

<script>
    function Person(age,sex) {
      this.age=age;//年齡
      this.sex=sex;
      this.eat=function () {
        console.log("構造函數中的吃");
      };
    }
    Person.prototype.sex="女";
    Person.prototype.eat=function () {
      console.log("原型對象中的吃");
    };


    var per=new Person(20,"男");
    console.log(per.sex);//男
    per.eat();

    // console.log(per.height);//男
    // per.play();

    console.dir(per);


    /*
    * 實例對象使用的屬性或者方法,先在實例中查找,找到了則直接使用,找不到則,去實例對象的__proto__指向的原型對象prototype中找,找到了則使用
    *  找不到屬性：undefined
    *  找不到方法: 報錯 Uncaught TypeError: per.play is not a function
    * */


  </script>

 

22：call和apply方法調用  修改原型指向，調用

call：參數個數

apply：參數數組

<script>
        function f1 (x, y) {
            console.log("結果是："+(x+ y) + this);
        }
        
        // 函數的調用
        f1(10, 20);

        console.log("===========");

        //1:  此時的f1其實是當成對象來使用的,對象能夠調用方法,apply和call方法也是函數的調用的方式
        
        f1.apply();
        f1.call();


        //2:  apply和call均可以讓函數或者方法來調用,傳入參數和函數本身調用的寫法不同,可是效果是同樣的, apply傳入的是數組，  call，傳入的是參數
    
        f1.apply(null, [100, 200]);

        f1.call(null, 100, 200);
        console.log("===========");

        function f2(x, y){
            console.log("這個函數是window對象的一個方法"+ (x+y) + this);
            console.dir(this);
        }

        window.f2(10, 20);

        var obj = {
            age: 10,
            name: "張三",
        }

        //3:  apply和call能夠改變this的指向,
        window.f2.call(obj, 10, 20);
        window.f2.apply(obj, [10,20]);


        // 4：apply和call方法實際上並不在函數這個實例對象中，而是在Function的prototype，原型對象中。
　　　　　　　　原型對象能夠當作+方法，實例方法能夠當成-方法。調用+方法時候能夠當成對象。
        console.log(f2.__proto__ == Function.prototype);

        console.log(Function.prototype); //{ [native code] }

        console.dir(Function);

    
    </script>

 

23：bind方法複製 

修改原型指向，沒有調用

<script>
        
        console.log("=====  11 =====")
        function f1 (x, y ){
            console.log((x+y) + " :======>>>>"+this );
            console.dir(this);
        }    
        
        f1.bind();

        //  方法複製了一份，而且傳遞參數，結果仍是方法，方法沒有調用。此時f1是對象。
        //   bind方法是複製的意思，能夠在複製的時候傳遞參數，也能夠在複製以後傳遞參數
        //  apply 和 call 是調用的時候改變this的指向
        //  bind是 複製的時候修改this的指向
        var ff = f1.bind(null, 10, 20);

        console.log (ff);

        ff();


        var f2 = f1.bind(null);
        f2(10, 20);
        console.log("=====  22 =====")


        // bind是方法複製，apply和call是方法調用
        function Person (){
            this.age = 10;
        }

        Person.prototype.eat = function () { 
            console.log("這個是吃");
         };

         var per = new Person;

         var ff = f1.bind(per);

         ff(10, 20);


         console.log("=====  33 =====")

         function Person(age) {
             this.age = age;
         }

         Person.prototype.play = function () {
             console.log(this + "========>>>>" + this.age);
         }


         function Student (age) {
             this.age = age;
         }

         var per = new Person(10);
         var stu = new Student(20);

         var paly2 = per.play.bind(stu);

         paly2();

    </script>

 

24：閉包

1：閉包的定義：

函數A中，有一個函數B，函數B中能夠訪問函數A中定義的變量或者數據，此時就行程了閉包。

 閉包緩存數據

 總結：若是想要緩存數據，須要把數據放在外層函數和內層函數之間。

 

 閉包的做用：緩存數據。優勢也是缺點，沒有及時釋放

 局部變量在函數中，函數使用結束後，局部變量就會被自動釋放。

 閉包後，裏面的局部變量的使用做用域鏈就會被延長。

   <script>
        /* 閉包
         * 閉包的概念：函數A中，有一個函數B，函數B中能夠訪問函數A中定義的變量或者數據，此時就行程了閉包。

         *閉包的模式：函數閉包和對象閉包

         * 閉包的做用：緩存數據，延長做用域鏈

         * 閉包的優勢和缺點：緩存數據

         * 閉包的應用：

         * ****/


         console.log("=======  11  ========");
        //  1：函數式閉包
         function f1() {
             var num = 10;

             // 函數
             function f2() {
                 console.log(num);
             }

             f2();
         }

         f1();

         console.log("=======  22  ========");
        //  2：對象是閉包
        function  f3() {

            var num1 = 20;

            // 對象
            var obj = {
                age : num1,
            }

            console.log(obj.age);
        }

        f3();

        console.log("=======  33  ========");

        function f4() {
            var num4 = 40;
            return function () { 
                console.log(num4); 
                return num4;
            };
        }
 
        var ff1 = f4();
        var result =  ff1();
        console.log(result);
        

        console.log("=======  44  ========");
        function f5() {
            var num5 = 50;
            var obj = {
                age : num5,
            }
            return obj;
        }

        var resultObj = f5();
        var result5 = resultObj.age;
        console.log(result5);
    </script>

 

 

25：沙箱：虛擬測試和真實世界結果同樣，不影響真實世界。

1：沙箱的定義和2種格式

<script>
       //沙箱:環境,黑盒,在一個虛擬的環境中模擬真實世界,作實驗,實驗結果和真實世界的結果是同樣,可是不會影響真實世界 
        
       // 沙箱 函數的自調用

       console.log("========  11  ========");
       // 沙箱的模板,函數自調用兩種格式
        //   格式一：       ()();
       (function () {  
        var num = 10;
        console.log(num + 10);
       })();



       // 格式二：使用的比較多.    (());
       (function () {  
        var num = 10;
        console.log(num + 20);
       }());

     
    </script>

 

26：原型和原型鏈

<script>
        // 1：使用對象---->使用對象中的屬性和方法，就須要先有構造函數

        // 1.1：構造函數。
        function Person (name, age){
            this.name = name;
            this.age = age;
            this.sayHi = function () {  
                console.log("您好，您真帥");
            };
        }    
        
        // 1.2：實例化對象，並初始化
        var per = new Person("小明", 20);

        // 1.3: 若是想要使用一些屬性和方法，而且屬性的值在每一個對象中都是同樣的，方法在每一個對象中的操做也是同樣的，那麼，爲了共享數據，節約內存空間，是能夠把屬性和方法經過原型的方法進行賦值
        
        Person.prototype.sex = "男";
        Person.prototype.sayHello = function (){
            console.log("您怎麼能夠這麼帥呀");
        };

        console.dir(per);     // 實例對象
        console.dir(Person);  // 構造函數

        // 實例對象中的原型__proto__和構造函數中的原型prototype指向是同樣的，指向的是原型對象
        // 實例對象的原型__proto__原型指向的是  構造函數中的原型prototype，原型對象

        // 原型對象中的構造器指向的是原型對象所在的構造函數
        // 實例對象和原型對象經過原型來聯繫的

        // 實例對象中的原型__proto__是遊覽器使用的，不是正規的
        // 構造函數中的prototype是原型，是程序員使用的

        // 原型鏈：是一種關係，實例對象和原型對象之間的關係，關係是經過原型（__proto__）來聯繫的
        console.log(per.__proto__ == Person.prototype);
    </script>

 

 

1：實例對象中的原型__proto__和構造函數中的原型prototype指向是同樣的，指向的是原型對象

2：實例對象的原型__proto__原型指向的是 構造函數中的原型prototype，原型對象

3：原型對象中的構造器指向的是原型對象所在的構造函數，實例對象和原型對象經過__proto__來聯繫的

4:  原型鏈：是一種關係，實例對象和原型對象之間的關係，關係是經過原型（__proto__）來聯繫的

 

 

27：構造函數的原型指向能夠改變

<script>

        console.log("=======  11  =======");  
        // 1:構造函數中的this是實例對象
        function Person (age){
            this.age = age;
            console.log(this);
        }    
        
        // 2：原型對象中的方法中的this是實例對象
        Person.prototype.eat = function (){
            console.log(this);
            console.log("人吃了嗎？");
        };

        var per = new Person(20);
        
        per.eat();


        console.log("=======  22  ======="); 
        // 3：學生
        function Student (){

        };


        // 原型的指向是能夠改變的
        // 構造函數的原型對象（prototype）指向若是改變了，實例對象的原型（__proto__）指向也會發生改變

        // 原型的指向是能夠改變的
        // 實例對象和原型對象之間的關係是經過__proto__原型來聯繫起來的，這個關係就是原型鏈
        Student.prototype = new Person(20);

        var stu = new Student();
        stu.eat();
    </script>

 

1:  原型的指向是能夠改變的

2:  構造函數的原型對象（prototype）指向若是改變了，實例對象的原型（__proto__）指向也會發生改變

3:   實例對象和原型對象之間的關係是經過__proto__原型來聯繫起來的，這個關係就是原型鏈

 

 

 

28: 原型的最終指向

<script>
    
        // 1:  只要是對象就有__proto__.
        // 2:  只要有__proto__，他就指向某個構造函數的prototype、
    
        function Person() {

        }
        Person.prototype.eat=function () {
        console.log("吃東西");
        };

        var per=new Person();
        console.dir(per);
        console.dir(Person);

        //實例對象中有__proto__原型
        //構造函數中有prototype原型
        //prototype是對象
        //因此,prototype這個對象中也有__proto__,那麼指向了哪裏
        //實例對象中的__proto__指向的是構造函數的prototype
        //因此,prototype這個對象中__proto__指向的應該是某個構造函數的原型prototype

        //Person的prototype中的__proto__的指向
        //console.log(Person.prototype.__proto__);

        //per實例對象的__proto__------->Person.prototype的__proto__---->Object.prototype的__proto__是null

        console.log(per.__proto__==Person.prototype);
        console.log(per.__proto__.__proto__==Person.prototype.__proto__);
        console.log(Person.prototype.__proto__==Object.prototype);
        console.log(Object.prototype.__proto__);
    </script>

1：實例對象per的__proto__指向的是構造函數Person的prototype對象。

2：prototype是一個對象。

3：prototype的__proto__指向的是某個構造函數的prototype對象。  某個指的是：NSobject。

4：NSObject的原型對象prototype對象，他的__proto__指向的是null。

 

 

 

29：先修改原型指向在添加方法。

<script>
    
        function Person (age){
            this.age = age;
        };

        Person.prototype.eat = function () {  
            console.log("人在吃飯");
        };
    
        function Student(sex){
            this.sex = sex;
        };

        // 1： 修改原型指向
        Student.prototype = new Person(10);

        // 2： 添加原型方法，要想問原型添加新方法，必定要再原型指向修改後添加原型方法。
        Student.prototype.sayHi = function (){
            console.log("您好呀，學生！！");
        };

        var stu = new Student("男");
        console.dir(stu);

    </script>

1：先添加原型方法，在修改原型指向。

 

 

2：先修改原型指向，在添加原型方法。方法添加在實例對象中。

 

 

 

30:  一個神奇的原型鏈

 

<body>
    <div id="dv"></div>
    <script>
      //原型鏈:實例對象和原型對象之間的關係,經過__proto__來聯繫
      var divObj=document.getElementById("dv");
      console.dir(divObj);

      //divObj.__proto__---->HTMLDivElement.prototype的__proto__--->HTMLElement.prototype的__proto__---->Element.prototype的__proto__---->Node.prototype的__proto__---->EventTarget.prototype的__proto__---->Object.prototype沒有__proto__,因此,Object.prototype中的__proto__是null
    </script>
</body>

1：首先從f3中找age，以後在f2中找age，最後在f1中找age，若是沒有就是undefined。

 

 

31：原型鏈

1：原型鏈是實例對象之間的關係，實例對象中__proto__之間的關係。

 

 

32：繼承（經過原型來修改原型執行實現繼承） 

<script>

    /*
    *
    * 面向對象編程思想:根據需求,分析對象,找到對象有什麼特徵和行爲,經過代碼的方式來實現需求,要想實現這個需求,就要建立對象,要想建立對象,就應該顯示有構造函數,而後經過構造函數來建立對象.,經過對象調用屬性和方法來實現相應的功能及需求,便可
    * 首先JS不是一門面向對象的語言,JS是一門基於對象的語言,那麼爲何學習js還要學習面向對象,由於面向對象的思想適合於人的想法,編程起來會更加的方便,及後期的維護....
    * 面向對象的編程語言中有類(class)的概念(也是一種特殊的數據類型),可是JS不是面向對象的語言,因此,JS中沒有類(class),可是JS能夠模擬面向對象的思想編程,JS中會經過構造函數來模擬類的概念(class)
    *
    *
    * 小明,小紅，小麗，小白，小花 都是人
    * 共同的特徵和行爲
    * 特徵--->屬性
    * 行爲---方法
    *
    * 面向對象的特性:封裝,繼承,多態
    *
    * 封裝:就是包裝
    * 一個值存儲在一個變量中--封裝
    * 一坨重複代碼放在一個函數中--封裝
    * 一系列的屬性放在一個對象中--封裝
    * 一些功能相似的函數(方法)放在一個對象中--封裝
    * 好多相相似的對象放在一個js文件中---封裝
    *
    * 繼承: 首先繼承是一種關係,類(class)與類之間的關係,JS中沒有類,可是能夠經過構造函數模擬類,而後經過原型來實現繼承
    * 繼承也是爲了數據共享,js中的繼承也是爲了實現數據共享
    *
    * 原型做用之一:數據共享,節省內存空間
    * 原型做用之二:爲了實現繼承
    *
    * 繼承是一種關係:
    *
    * 父類級別與類級別的關係
    *
    * 例子:
    *
    * 小楊--->人, 姓名, 有錢, 帥, 有功夫--降龍十八掌
    * 小楊子-->人,
    * 繼承:
    * 姓氏----繼承
    * 外表----繼承
    * 財產----繼承
    * 功夫---繼承
    *
    *
    * 人:  姓名, 性別, 年齡 ,吃飯, 睡覺
    *
    * 學生類別: 姓名, 性別, 年齡 ,吃飯, 睡覺 學習行爲
    * 老師類別: 姓名, 性別, 年齡 ,吃飯, 睡覺 工資,教學行爲
    * 程序員: 姓名, 性別, 年齡 ,吃飯, 睡覺 工資, 敲代碼
    * 司機類別: 姓名, 性別, 年齡 ,吃飯, 睡覺 工資 開車
    *
    *
    * 動物類別:  體重， 顏色, 吃
    * 狗類別:   體重,顏色, 吃, 咬人
    * 二哈類別: 體重,顏色, 吃, 咬人 逗主人開心,汪汪,你好帥
    *
    * 多態:一個對象有不一樣的行爲,或者是同一個行爲針對不一樣的對象,產生不一樣的結果,要想有多態,就要先有繼承,js中能夠模擬多態,可是不會去使用,也不會模擬,
    * */



    //例子:
    //人,都有姓名,性別,年齡, 吃飯, 睡覺, 玩
    //學生,都有姓名,性別,年齡, 成績, 吃飯, 睡覺, 玩 ,學習的行爲


    //js中經過原型來實現繼承

    function Person(name,age,sex) {
      this.name=name;
      this.sex=sex;
      this.age=age;
    }
    Person.prototype.eat=function () {
      console.log("人能夠吃東西");
    };
    Person.prototype.sleep=function () {
      console.log("人在睡覺");
    };
    Person.prototype.play=function () {
      console.log("生活就是不同的玩法而已");
    };


    function Student(score) {
      this.score=score;
    }
    //改變學生的原型的指向便可==========>學生和人已經發生關係
    Student.prototype=new Person("小明",10,"男");
    Student.prototype.study=function () {
      console.log("學習很累很累的哦.");
    };

    //相同的代碼太多,形成了代碼的冗餘(重複的代碼)

    var stu=new Student(100);
    console.log(stu.name);
    console.log(stu.age);
    console.log(stu.sex);
    stu.eat();
    stu.play();
    stu.sleep();
    console.log("下面的是學生對象中本身有的");
    console.log(stu.score);
    stu.study();
 </script>

 

33：利用call，在構造函數中修改原型指向

父類中的方法沒法繼承

<script>
    
    //解決方案:繼承的時候,不用改變原型的指向,直接調用父級的構造函數的方式來爲屬性賦值就能夠了------借用構造函數:把要繼承的父級的構造函數拿過來,使用一下就能夠了    

    //借用構造函數:構造函數名字.call(當前對象,屬性,屬性,屬性....);
    //解決了屬性繼承,而且值不重複的問題
    //缺陷:父級類別中的方法不能繼承

    function Person(name, age, sex, weight) {
      this.name = name;
      this.age = age;
      this.sex = sex;
      this.weight = weight;
    }
    Person.prototype.sayHi = function () {
      console.log("您好");
    };
    function Student(name,age,sex,weight,score) {
      //借用構造函數
      Person.call(this,name,age,sex,weight);
      this.score = score;
    }
    var stu1 = new Student("小明",10,"男","10kg","100");
    console.log(stu1.name, stu1.age, stu1.sex, stu1.weight, stu1.score);

    var stu2 = new Student("小紅",20,"女","20kg","120");
    console.log(stu2.name, stu2.age, stu2.sex, stu2.weight, stu2.score);

    var stu3 = new Student("小麗",30,"妖","30kg","130");
    console.log(stu3.name, stu3.age, stu3.sex, stu3.weight, stu3.score);


  </script>

 

34：組合繼承

1：構造函數call解決屬性繼承

2：原型繼承解決方法繼承。

<script>


    //原型實現繼承
    //借用構造函數實現繼承
    //組合繼承:原型繼承+借用構造函數繼承

    function Person(name,age,sex) {
      this.name=name;
      this.age=age;
      this.sex=sex;
    }
    Person.prototype.sayHi=function () {
      console.log("阿涅哈斯誒呦");
    };
    function Student(name,age,sex,score) {
      //借用構造函數:屬性值重複的問題
      Person.call(this,name,age,sex);
      this.score=score; 
    }
    //改變原型指向----繼承
    Student.prototype=new Person();//不傳值
    Student.prototype.eat=function () {
      console.log("吃東西");
    };
    var stu=new Student("小黑",20,"男","100分");
    console.log(stu.name,stu.age,stu.sex,stu.score);
    stu.sayHi();
    stu.eat();
    var stu2=new Student("小黑黑",200,"男人","1010分");
    console.log(stu2.name,stu2.age,stu2.sex,stu2.score);
    stu2.sayHi();
    stu2.eat();

    //屬性和方法都被繼承了



  </script>

 

 

35：拷貝繼承

拷貝繼承；把一個對象中的屬性或者方法直接複製到另外一個對象中

<script>

    //拷貝繼承；把一個對象中的屬性或者方法直接複製到另外一個對象中

//    var obj1={
//      name:"小糊塗",
//      age:20,
//      sleep:function () {
//       console.log("睡覺了");
//      }
//    };
//
//    //改變了地址的指向
//    var obj2=obj1;
//    console.log(obj2.name,obj2.age);
//    obj2.sleep();



//    var obj1={
//      name:"小糊塗",
//      age:20,
//      sleep:function () {
//        console.log("睡覺了");
//      }
//    };
//
//
//    var obj2={};
//    for(var key in obj1){
//      obj2[key]=obj1[key];
//    }
//    console.log(obj2.name);



    function Person() {
    }
    Person.prototype.age=10;
    Person.prototype.sex="男";
    Person.prototype.height=100;
    Person.prototype.play=function () {
      console.log("玩的好開心");
    };
    var obj2={};
    //Person的構造中有原型prototype,prototype就是一個對象,那麼裏面,age,sex,height,play都是該對象中的屬性或者方法

    for(var key in Person.prototype){
      obj2[key]=Person.prototype[key];
    }
    console.dir(obj2);
    obj2.play();



  </script>

 

 

36：函數聲明和函數表達式的區別

之後寧願用函數表達式,都不用函數聲明

<script>

    //函數聲明
//
//    if(true){
//      function f1() {
//        console.log("哈哈,我又變帥了");
//      }
//    }else{
//      function f1() {
//        console.log("小蘇好猥瑣");
//      }
//    }
//    f1();


    //函數表達式

    var ff;
    if(true){
      ff=function () {
        console.log("哈哈,我又變帥了");
      };
    }else{
      ff=function () {
        console.log("小蘇好猥瑣");
      };
    }
    ff();

    //函數聲明若是放在if-else的語句中,在IE8的瀏覽器中會出現問題
    //之後寧願用函數表達式,都不用函數聲明



  </script>

 

37：函數中this的指向

<script>

    /*
     *
     * 函數中的this的指向
     *
     *
     * 普通函數中的this是誰?-----window
     * 對象.方法中的this是誰?----當前的實例對象
     * 定時器方法中的this是誰?----window
     * 構造函數中的this是誰?-----實例對象
     * 原型對象方法中的this是誰?---實例對象
     *
     *
     * */

    //嚴格模式:
//    "use strict";//嚴格模式
//    function f1() {
//      console.log(this);//window
//    }
//    f1();


    //普通函數
    //    function f1() {
    //      console.log(this);
    //    }
    //   f1();

    //定時器中的this
    //    setInterval(function () {
    //      console.log(this);
    //    },1000);

    //構造函數
    //    function Person() {
    //      console.log(this);
    //對象的方法
    //      this.sayHi=function () {
    //        console.log(this);
    //      };
    //    }
    //原型中的方法
    //    Person.prototype.eat=function () {
    //      console.log(this);
    //    };
    //    var per=new Person();
    //    console.log(per);
    //    per.sayHi();
    //    per.eat();


    //BOM:中頂級對象是window,瀏覽器中全部的東西都是window的




  </script>

38：淺拷貝

<script>
    
        //淺拷貝:拷貝就是複製,就至關於把一個對象中的全部的內容,複製一份給另外一個對象,直接複製,或者說,就是把一個對象的地址給了另外一個對象,他們指向相同,兩個對象之間有共同的屬性或者方法,均可以使用
        
        
        var obj1={
          age:10,
          sex:"男",
          car:["奔馳","寶馬","特斯拉","奧拓"]
        };
        //另外一個對象
        var obj2={};
        
        //寫一個函數,做用:把一個對象的屬性複製到另外一個對象中,淺拷貝
        //把a對象中的全部的屬性複製到對象b中
        function extend(a,b) {
          for(var key in a){
            b[key]=a[key];
          }
        }
        extend(obj1,obj2);

        obj2.sex = "女";
        console.dir(obj2);//開始的時候這個對象是空對象
        console.dir(obj1);//有屬性

    
        console.log(obj1 == obj2);
        
        
    </script>

 

淺拷貝：示意圖

 

39：深拷貝

// 只要不是基本類型，好比數組和對象的話，就須要從新開始開闢一塊內存，來存儲。以後把地址給這個屬性。

<script>
        //深拷貝:拷貝仍是複製,深:把一個對象中全部的屬性或者方法,一個一個的找到.而且在另外一個對象中開闢相應的空間,一個一個的存儲到另外一個對象中
    
        var obj1={
          age:10,
          sex:"男",
          car:["奔馳","寶馬","特斯拉","奧拓"],
          dog:{
            name:"大黃",
            age:5,
            color:"黑白色"
          }
        };
    
        var obj2={};//空對象
        //經過函數實現,把對象a中的全部的數據深拷貝到對象b中
        function extend(a,b) {
          for(var key in a){
            //先獲取a對象中每一個屬性的值
            var item=a[key];
            //判斷這個屬性的值是否是數組
            if(item instanceof Array){
              //若是是數組,那麼在b對象中添加一個新的屬性,而且這個屬性值也是數組
              b[key]=[];
              //調用這個方法，把a對象中這個數組的屬性值一個一個的複製到b對象的這個數組屬性中
              extend(item,b[key]);
            }else if(item instanceof Object){//判斷這個值是否是對象類型的
         //若是是對象類型的,那麼在b對象中添加一個屬性,是一個空對象
              b[key]={};
              //再次調用這個函數,把a對象中的屬性對象的值一個一個的複製到b對象的這個屬性對象中
              extend(item,b[key]);
            }else{
              //若是值是普通的數據,直接複製到b對象的這個屬性中
              b[key]=item;
            }
          }
        }
    
        extend(obj1,obj2);
        console.dir(obj1);
        console.dir(obj2);

    </script>

深拷貝示意圖

 

 

40：遍歷DOM樹

<script>

  //獲取頁面中的根節點--根標籤
  var root=document.documentElement;//html
  //函數遍歷DOM樹
  //根據根節點,調用fn的函數,顯示的是根節點的名字
  function forDOM(root1) {
    //調用f1,顯示的是節點的名字
   // f1(root1);
    //獲取根節點中全部的子節點
    var children=root1.children;
    //調用遍歷全部子節點的函數
    forChildren(children);
  }
  //給我全部的子節點,我把這個子節點中的全部的子節點顯示出來
  function forChildren(children) {
    //遍歷全部的子節點
    for(var i=0;i<children.length;i++){
      //每一個子節點
      var child=children[i];
      //顯示每一個子節點的名字
      f1(child);
      //判斷child下面有沒有子節點,若是還有子節點,那麼就繼續的遍歷
      child.children&&forDOM(child);
    }
  }
  //函數調用,傳入根節點
  forDOM(root);
  function f1(node) {
    console.log("節點的名字:"+node.nodeName);
  }

  //節點:nodeName,nodeType,nodeValue


//  第一個函數:給我根節點,我會找到全部的子節點:forDOM(根節點)
//  獲取這個根節點的子節點
//  var children=根節點的.children
//  調用第二個函數
//
//  第二個函數:給我全部的子節點,我把每一個子節點的名字顯示出來(children)
//  for(var i=0;i<children.length;i++){
//    每一個子節點
//    var child=children[i];
//    f1(child);給我節點,我顯示該節點的名字
//    child是子節點,可是若是child裏面還有子節點,此時child就是爹了
//    child.children&&第一個函數(child)
//
//  }

</script>

 

 

41：正則表達式

<script>

    /*
    *
    * 正則表達式:也叫規則表達式,按照必定的規則組成的一個表達式,這個表達式的做用主要是匹配字符串的,
    * "個人電話:10086,他的電話:10010,你的電話:10000" 正則表達式,把這個字符串中的全部的數字找到
    *
    * 正則表達式的做用:匹配字符串的
    *
    * 在大多數編程語言中均可以使用
    *
    * 正則表達式的組成:是由元字符或者是限定符組成的一個式子
    *
    *
    * 元字符:
    *
    * 1:  .  表示的是:除了\n之外的任意的一個字符   "fdsfs238"
    *
    *
    * 2:  [] 表示的是:範圍,  [0-9] 表示的是0到9之間的任意的一個數字,  "789" [0-9]
    * [1-7] 表示的是1到7之間的任意的一個數字
    * [a-z] 表示的是:全部的小寫的字母中的任意的一個
    * [A-Z] 表示的是:全部的大寫的字母中的任意的一個
    * [a-zA-Z] 表示的是:全部的字母的任意的一個
    * [0-9a-zA-Z] 表示的是: 全部的數字或者是字母中的一個
    * [] 另外一個函數: 把正則表達式中元字符的意義幹掉    [.] 就是一個.
    *
    *
    * 3:  | 或者     [0-9]|[a-z] 表示的是要麼是一個數字,要麼是一個小寫的字母
    *
    *
    * 4:  () 分組 提高優先級   [0-9]|([a-z])|[A-Z]
    * ([0-9])([1-5])([a-z]) 三組, 從最左邊開始計算
    * (()(()))
    *
    *
    * 都是元字符,可是也能夠叫限定符,下面的這些
    *   5:   *   表示的是:前面的表達式出現了0次到屢次
    *    [a-z][0-9]* 小寫字母中的任意一個 後面是要麼是沒有數字的,要麼是多個數字的
    *    "fdsfs3223323"  [a-z][0-9]*
    *
    *
    *   6:  +  表示的是:前面的表達式出現了1次到屢次
    *    [a-z][9]+  小寫字母一個後面最少一個9,或者多個9
    *    "fesfewww9fefds"
    *
    *
    *    7:  ?  表示的是:前面的表達式出現了0次到1次,最少是0次,最多1次 ,另外一個含義:阻止貪婪模式
    *    [4][a-z]? "1231234ij"
    *  
    *
    *   限定符:限定前面的表達式出現的次數
    *  
    *   
    *   8:   {} 更加的明確前面的表達式出現的次數
    *  {0,} 表示的是前面的表達式出現了0次到屢次,和 *同樣的
    *  {1,} 表示的是前面的表達式出現了1次到屢次,和 +同樣的
    *  {0,1} 表示的是前面的表達式出現了0次到1次,和 ?同樣的
    *  {5,10} 表示的是前面的表達式出現了5次到10次
    *  {4} 前面的表達式出現了4次
    *  {,10} 錯誤的========不能這麼寫
    *
    *
    *  9:   ^ 表示的是以什麼開始,或者是取非(取反) ^[0-9] 以數字開頭
    *  ^[a-z] 以小寫字母開始
    *  [^0-9] 取反,非數字
    *  [^a-z] 非小寫字母
    *  [^0-9a-zA-Z_]   特殊字符
    * 
    *
    *  10:   $ 表示的是以什麼結束   [0-9][a-z]$  必須以小寫字母結束
    *  ^[0-9][a-z] 至關因而嚴格模式   "3f2432e"  "4f"
    *
    *
    *  11：  \d 數字中的任意一個,   digit 數字
    *        \D 非數字中的一個
    *  12：  \s 空白符中的一個     Space  空白符號
    *        \S 非空白符
    *   13：  \w 非特殊符號   Word,單詞.\w匹配包括下劃線的任何單詞字符.等價於'[A-Za-z0-9_]'.
    *         \W 特殊符號
    *   \b 單詞的邊界
    *   "what are you no sha lei"
    *
    *
    *    . 除了\n之外的任意一個單個字符
    *    []  範圍
    *    () 分組,提高優先級
    *    | 或者
    *    * 0-屢次
    *    + 1-屢次
    *    ? 0-1次
    *    {0,} 和*同樣
    *    {1,} 和+
    *    {0,1} 和?
    *
    *    \d 數字中的一個
    *    \D 非數字
    *    \s 空白符
    *    \S 非空白符
    *     \W  特殊符號
    *     \w 非特殊符號 _
    *     ^ 取反,以什麼開始
    *     $ 以什麼結束
    *
    *     \b 單詞邊界
  
    * */
  </script>

 

42：正則表達式的建立方式

<script>

   //建立正則表達式對象

    //兩種:
    /*
    *
    * 1.經過構造函數建立對象
    *
    *
    * 2.字面量的方式建立對象
    *
    *
    * 正則表達式的做用:匹配字符串的
    *
    * */
//   //對象建立完畢---
//    var reg=new RegExp(/\d{5}/);
//   //字符串
//    var str="個人電話是10086";
//   //調用方法驗證字符串是否匹配
//    var flag=reg.test(str);
//    console.log(flag);



//   //對象建立完畢---
//   var reg=new RegExp(/\d{5}/);
//   //調用方法驗證字符串是否匹配
//   var flag=reg.test("個人電話是10086");
//   console.log(flag);


    //字面量的方式建立正則表達式對象
    var reg=/\d{1,5}/;
    var flag=reg.test("小蘇的幸運數字:888");
    console.log(flag);



  </script>

 

 

43：字符創中的正則表達式

<script>
    //正則表達式中:g 表示的是全局模式匹配
    //正則表達式中:i 表示的是忽略大小寫
    // match是匹配的意思
    // replace是替換的意思

    
       var str="中國移動:10086,中國聯通:10010,中國電信:10000";
       //把裏面全部的數字所有顯示出來
       var array=str.match(/\d{5}/g);
       console.log(array);


    //
    //    var str = "123123@xx.com,fangfang@valuedopinions.cn 286669312@qq.com 二、emailenglish@emailenglish.englishtown.com 286669312@qq.com...";
    //    var array = str.match(/\w+@\w+\.\w+(\.\w+)?/g);
    //    console.log(array);


    //提取這裏的日
    //    var str="2017-11-12";
    //    var array=str.match(/(\d{4})[-](\d{2})[-](\d{2})/g);
    //    //console.log(array);
    //    //正則表達式對象.$3
    //    console.log(RegExp.$3);


    //    var email="shuaiyangtaishuaile@itcast.com.cn";
    //    email.match(/([0-9a-zA-Z_.-]+)[@]([0-9a-zA-Z_-]+)(([.][a-zA-Z]+){1,2})/);
    //    console.log(RegExp.$1);//用戶名
    //    console.log(RegExp.$2);//126
    //    console.log(RegExp.$3);//域名


    //    var str="小蘇好帥哦,真的是太帥了,帥,就是真帥";
    //    str=str.replace(/帥/g,"猥瑣");
    //    console.log(str);

    //    var str="  哦買噶的    ,太幸福了  ";
    //    str=str.trim();
    //    console.log("==="+str+"===");


    //    var str = "  哦買噶的    ,太幸福了  ";
    //    str = str.replace(/\s+/g, "");
    //    console.log("===" + str + "===");


    //全部的h都替換成S
    //    var str="HhpphH";//SSppSS
    //    str=str.replace(/[h]/gi,"S");
    //    console.log(str);


    //    var reg = new RegExp(/[h]/gi);
    //    var str = "HhpphH";//SSppSS
    //    str = str.replace(reg, "S");
    //    console.log(str);

//
//    var str = "中國移動:10086,中國聯通:10010,中國電信:10000";
//    //把裏面全部的數字所有顯示出來
//    //var array = str.match(/\d{5}/g);
//    //正則表達式對象.exec方法傳入字符串
//    var reg=/\d{5}/g;
//    //var array=reg.exec(str);
////    console.log(array);
////    console.log(reg.exec(str));
////    console.log(reg.exec(str));
////    console.log(reg.exec(str));
//
//    var result=reg.exec(str);
//    while(result!=null){
//      console.log(result);
//      result=reg.exec(str);
//    }



//    var str = "中國移動:10086,中國聯通:10010,中國電信:10000";
//    var reg=/\d{5}/g;
//    //經過正則表達式匹配這個字符串
//    var array=reg.exec(str);
//    console.log(array);
//    console.log(reg.exec(str));
//    console.log(reg.exec(str));
//    console.log(reg.exec(str));//null
//


    var str = "中國移動:10086,中國聯通:10010,中國電信:10000";
    var reg=/\d{5}/g;
    //經過正則表達式匹配這個字符串
    var array=reg.exec(str);
    while (array!=null){
      //輸出匹配的內容
      console.log(array[0]);
      array=reg.exec(str);
    }

  </script>

 

44:真數組和僞數組

<script>
        //僞數組和數組的區別
        //真數組的長度是可變的
        //僞數組的長度不可變
        //真數組可使用數組中的方法
        //僞數組不可使用數組中的方法
        
    
    //    function f1() {
    //      var sum=0;
    //      for(var i=0;i<arguments.length;i++){
    //        sum+=arguments[i];
    //      }
    //      console.log(sum);
    //    }
    //    //arguments獲得的是實參的個數及實參的每一個值
    //
    //    f1(10,20,30,40);
    
    
    //    function f1() {
    //     var sum=0;
    //      arguments.forEach(function () {
    //
    //      });
    //    }
    //    //arguments獲得的是實參的個數及實參的每一個值
    //
    //    f1(10,20,30,40);
    
    //    var arr=[10,20,30];
    //    arr.forEach(function () {
    //
    //    });
    
    
    
        var arr=[10,20];
        arr.forEach()
        console.dir(arr);
    
        // 數組實例對象的__proto__----->Array的prototype
    
        //數組
    //    var arr=[10,20,30];
    //    arr[3]=100;
    //    console.log(arr.length);
    //    //對象---假的數組
    //    var obj={
    //      0:10,
    //      1:20,
    //      2:30,
    //      length:3
    //    };
    //
    //    console.log(obj[0]);
    //    console.log(obj[1]);
    //    console.log(obj[2]);
    //    console.log(obj.length);
    //    obj[3]=1000;
    //    console.log(obj[3]);
    //    console.log(obj.length);
    
        //遍歷數組
    //    for(var i=0;i<arr.length;i++){
    //      console.log(arr[i]);
    //    }
    //
    //    for(var i=0;i<obj.length;i++){
    //      console.log(obj[i]);
    //    }
    </script>

 

4：Vue

1：MVC和MVVM（背誦）

 

前端的主要工做？主要負責MVC中的V這一層；主要工做就是和界面打交道，來製做前端頁面效果；

 

2：常見的指令

1：  {{}}  　　插值表達式   

2：v-cloak　　解決插值表達式的閃爍問題。原理是標籤的顯示隱藏。

3：v-text　　用來實現數據。

4:  v-html　　用來展現html文本

5：v-bind:   是Vue中，提供用於綁定屬性的指令。

　　 v-bind:能夠簡寫成：

6：v-on　　Vue中提供了v-on：事件綁定機制。

　　v-on：能夠簡寫成@

 

7：v-model　　雙向數據綁定。

 v-mdoel能夠實現model和view的雙向綁定 v-model只能用在表單元素中 。

input(radio, text, address, email....) select  checkbox  textarea 

 

區別：

1：v-text：沒有插值表達式閃爍的問題。

2: v-text會覆蓋元素內容。可是插值表達式只會修改插值表達式，不會把整個內容覆蓋。

 

1：插值表達式

<div id="app">
        <!-- 3：插值表達式  -->
        <p>{{ msg}} </p>
    </div>
   <!-- 2：建立一個vue對象 {}配置對象 幾個屬性：el：元素 -->
   <script>
       var vm = new Vue ({
        el : '#app',
        data : {
            msg : '歡迎學習Vue' //經過vue提供的指令，去渲染數據，不是經過操做DOM。
        }
   })
   </script>

 

2：實例

<div id="app">
            <p>{{msg}}</p>
            <p v-text="msg"></p>
            <div>{{msg2}}</div>
            <div v-text="msg2"></div>
             <div v-html="msg2"></div>
             <input type="button" value="按鈕" v-bind:title="myTitle" v-on:click='show'>
             <!-- <input type="button" value="按鈕" v-bind:title="myTitle" v-on:mouseover='show'> -->
    </div>

    

    <script>
        var vm = new Vue({
            el : "#app",
            data : {
                msg : "123",
                msg2: "<h1>我是一個大大的H1標籤</h1>",
                myTitle:'這是一個自定義按鈕的標題',
            },
            methods:{
                show : function (){
                    alert("Hello")
                }
            }
        })    
        
    </script>

 

3：v-model

 <div id="app">
        <h4>{{msg}}</h4>
        <!-- <input type="text" :value="msg"> -->

        <!-- v-mdoel能夠實現model和view的雙向綁定 v-model只能用在表單元素中 -->
        <input type="text" v-model="msg">

    </div>

    <script>
        var vm = new Vue({
            el : '#app',
            data : {
                msg : '個人單向數據',
            }, 
            metheds : {

            },
        });
    </script>

 

3:  五大事情修飾符

事件修飾符：

.stop        阻止冒泡

.prevent    阻止默認事件

.capture    添加事件偵聽器時使用事件捕獲模式

.self       只當事件在該元素自己（好比不是子元素）觸發時觸發回調

.once       事件只觸發一次

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="./lib/vue-2.4.0.js"></script>
  <style>
    .inner {
      height: 150px;
      background-color: darkcyan;
    }

    .outer {
      padding: 40px;
      background-color: red;
    }
  </style>
</head>

<body>
  <div id="app">

    <!-- 使用  .stop  阻止冒泡 -->
    <!-- <div class="inner" @click="div1Handler">
      <input type="button" value="戳他" @click.stop="btnHandler">
    </div> -->

    <!-- 使用 .prevent 阻止默認行爲 -->
    <!-- <a href="http://www.baidu.com" @click.prevent="linkClick">有問題，先去百度</a> -->

    <!-- 使用  .capture 實現捕獲觸發事件的機制 -->
    <!-- <div class="inner" @click.capture="div1Handler">
      <input type="button" value="戳他" @click="btnHandler">
    </div> -->

    <!-- 使用 .self 實現只有點擊當前元素時候，纔會觸發事件處理函數 -->
    <!-- <div class="inner" @click="div1Handler">
      <input type="button" value="戳他" @click="btnHandler">
    </div> -->

    <!-- 使用 .once 只觸發一次事件處理函數 -->
    <!-- <a href="http://www.baidu.com" @click.prevent.once="linkClick">有問題，先去百度</a> -->


    <!-- 演示： .stop 和 .self 的區別 -->
    <!-- <div class="outer" @click="div2Handler">
      <div class="inner" @click="div1Handler">
        <input type="button" value="戳他" @click.stop="btnHandler">
      </div>
    </div> -->

    <!-- .self 只會阻止本身身上冒泡行爲的觸發，並不會真正阻止 冒泡的行爲 -->
    <!-- <div class="outer" @click="div2Handler">
      <div class="inner" @click.self="div1Handler">
        <input type="button" value="戳他" @click="btnHandler">
      </div>
    </div> -->

  </div>

  <script>
    // 建立 Vue 實例，獲得 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {},
      methods: {
        div1Handler() {
          console.log('這是觸發了 inner div 的點擊事件')
        },
        btnHandler() {
          console.log('這是觸發了 btn 按鈕 的點擊事件')
        },
        linkClick() {
          console.log('觸發了鏈接的點擊事件')
        },
        div2Handler() {
          console.log('這是觸發了 outer div 的點擊事件')
        }
      }
    });
  </script>
</body>

</html>

 

4：在Vue中使用CSS

1:  使用內聯樣式

<h1 :style="{color: 'red', 'font-size': '40px'}">這是一個善良的H1</h1>

 

 <div id="app">
    <!-- 對象就是無序鍵值對的集合 -->

　　// 方式一：直接寫樣式

    <!-- <h1 :style="{color: 'red', 'font-size': '40px'}">這是一個善良的H1</h1>  -->

　　// 方式二  一個class
    <!-- <h1 :style="styleObj1">這是一個h1</h1> -->

　　// 方式三  兩個class
    <h1 :style="[ styleObj1, styleObj2 ]">這是一個h1</h1>
  </div>

  <script>
    // 建立 Vue 實例，獲得 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        styleObj1: { color: 'red', 'font-weight': 200 },
        styleObj2: { 'font-style': 'italic' }
      },
      methods: {}
    });
  </script>

 

2:  使用class樣式

4中方式：

字符串

字符串拼接

 數組

 對象

<div id="app">
　　　　// 方式一：直接用字符串 空格拼接
        <!-- <h1 class="red thin">這是一個很大的h1，大到你沒法想象 </h1> -->

　　　　// 方式二：數組的方式：字符串數組
        <!-- <h1 :class="['thin', 'red']">這是一個很大的h1，大到你沒法想象 </h1>  -->
　　
　　　　// 方式三：對象方式
        <h1 :class="{red:true, thin:true, active:true}">這是一個很大的h1，大到你沒法想象 </h1>

　　　　// 方式4：一個class 字符串
        <h1 :class="classobj">這是一個很大的h1，大到你沒法想象 </h1>
    </div>

    <script>
    var vm = new Vue({
        el : "#app",
        data : {
            classobj : {red:true, thin:true, active:true},
        },
        methodes : {

        },
    });
    </script>

 

 

5：v-for遍歷

1：遍歷數組

 

 

<div id="app">
    <!-- <p>{{list[0]}}</p>
    <p>{{list[1]}}</p>
    <p>{{list[2]}}</p>
    <p>{{list[3]}}</p>
    <p>{{list[4]}}</p> -->

    <p v-for="(item, i) in list">索引值：{{i}} --- 每一項：{{item}}</p>

  </div>

  <script>
    // 建立 Vue 實例，獲得 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        list: [1, 2, 3, 4, 5, 6]
      },
      methods: {}
    });
  </script>

 

2 ：遍歷對象數組

<div id="app">
    <p v-for="(user, i) in list">Id：{{ user.id }} --- 名字：{{ user.name }} --- 索引：{{i}}</p>
  </div>

  <script>
    // 建立 Vue 實例，獲得 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        list: [
          { id: 1, name: 'zs1' },
          { id: 2, name: 'zs2' },
          { id: 3, name: 'zs3' },
          { id: 4, name: 'zs4' }
        ]
      },
      methods: {}
    });
  </script>

 

3：遍歷對象

key屬性添加，若是出現錯誤的話，key的值是字符串或者數值。

<div id="app">
    <!-- 注意：在遍歷對象身上的鍵值對的時候， 除了 有  val  key  ,在第三個位置還有 一個 索引  -->
    <p v-for="(val, key, i) in user">值是： {{ val }} --- 鍵是： {{key}} -- 索引： {{i}}</p>
  </div>

  <script>
    // 建立 Vue 實例，獲得 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        user: {
          id: 1,
          name: '託尼·屎大顆',
          gender: '男'
        }
      },
      methods: {}
    });
  </script>

 

 

4：遍歷數字

 

<div id="app">
    <!-- in 後面咱們放過  普通數組，對象數組，對象， 還能夠放數字 -->
    <!-- 注意：若是使用 v-for 迭代數字的話，前面的 count 值從 1 開始 -->
    <p v-for="count in 10">這是第 {{ count }} 次循環</p>
  </div>

  <script>
    // 建立 Vue 實例，獲得 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {},
      methods: {}
    });
  </script>

 

7：v-if和v-show指令 

 v-if的特色是：每次都會從新刪除或者建立元素

 v-show的特色是：每次不會進行DOM的刪除或者建立，只是切換元素的狀態。

性能上：v-if有較高的性能消耗 ，v-show有較高的初始的渲染消耗

<div id="app">

    <!-- <input type="button" value="toggle" @click="toggle"> -->
    <input type="button" value="toggle" @click="flag=!flag">

    <!-- v-if 的特色：每次都會從新刪除或建立元素 -->
    <!-- v-show 的特色： 每次不會從新進行DOM的刪除和建立操做，只是切換了元素的 display:none 樣式 -->

    <!-- v-if 有較高的切換性能消耗 -->
    <!-- v-show 有較高的初始渲染消耗 -->

    <!-- 若是元素涉及到頻繁的切換，最好不要使用 v-if, 而是推薦使用 v-show -->
    <!-- 若是元素可能永遠也不會被顯示出來被用戶看到，則推薦使用 v-if -->
    <h3 v-if="flag">這是用v-if控制的元素</h3>
    <h3 v-show="flag">這是用v-show控制的元素</h3>

  </div>

  <script>
    // 建立 Vue 實例，獲得 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        flag: false
      },
      methods: {
        /* toggle() {
          this.flag = !this.flag
        } */
      }
    });
  </script>

 

8:  過濾器

1：全局過濾器

<div id="app">
    <p>{{ msg | msgFormat('瘋狂+1', '123') | test }}</p>
  </div>

  <script>
    // 定義一個 Vue 全局的過濾器，名字叫作  msgFormat
    Vue.filter('msgFormat', function (msg, arg, arg2) {
      // 字符串的  replace 方法，第一個參數，除了可寫一個 字符串以外，還能夠定義一個正則
      return msg.replace(/單純/g, arg + arg2)
    })

    Vue.filter('test', function (msg) {
      return msg + '========'
    })


    // 建立 Vue 實例，獲得 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        msg: '曾經，我也是一個單純的少年，單純的我，傻傻的問，誰是世界上最單純的男人'
      },
      methods: {}
    });
  </script>

 

2：局部過濾器

<div id="app">
        <!-- 1：全局過濾器 -->
        <h1>{{ msg | appendStr("全局過濾器")}}</h1>
        <!-- 2：私有過濾器 -->
        <h1>{{ msg | appendEndStr("全局過濾器")}}</h1>
    </div>
 <script>

        // 1：全局過濾器
        Vue.filter("appendStr", function (msg, arg) {  
            return msg + arg;
        });

var vm = new Vue({
            el : "#app",
            data : {
                msg : "原始的消息",
            },
            methods : {

            },

            // 2：私有過濾器
            filters : {
                appendEndStr : function (msg, arg) {
                    return msg + arg + "~~~~";
                }
                ,
            },

       
        });
    
    </script>

9: 自定義指令

<div id="app">
        <!-- 自定義指令 -->
        <!--  傳的參數是字符串，若是不是字符串的話，就是變量，。去data中找 -->
        <input type="text" v-focus v-color="'red'">
        <p v-fontweight="'red'">我是一個p標籤</p>
        <p>我是一個p標籤</p>
        <h1>我是一個h1標籤</h1>
        <h1 v-fontweight="'red'">我是一個h1標籤</h1>
    </div>

    <script>

        //  第一個參數是指令的名字，第二個參數是對象
　　　　 //  1：自定義全局指令
        Vue.directive("focus", {
            bind : function (el) {  
                //進行一些樣式的操做
                // el.style.color = "red";
            },

            inserted : function (el) {
              // 進行一些js操做  
              el.focus();
            },

            updated : function (el) {
                
            },

        });


        //  自定義樣式指令
        Vue.directive("color", {
            bind : function (el, binding) {
                el.style.color = binding.value;
            },

            inserted : function (el) { 

             },

             updated : function (el) { 

              },

        });

        var vm = new Vue({
            el : "#app",
            data : {

            },


            methods : {

            },

// 2： 自定義私有的指令
            directives : {
                "fontweight" : { 
                    bind : function (el , binding) {  
                        el.style.color = binding.value;
                    }
                 },
            },
        });
    
    </script>

 

10：Vue的生命週期

 

  <script>
    // 建立 Vue 實例，獲得 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        msg: 'ok'
      },
      methods: {
        show() {
          console.log('執行了show方法')
        }
      },
      beforeCreate() { // 1：這是咱們遇到的第一個生命週期函數，表示實例徹底被建立出來以前，會執行它
        // console.log(this.msg)
        // this.show()
        // 注意： 在 beforeCreate 生命週期函數執行的時候，data 和 methods 中的 數據都尚未沒初始化
      },
      
      created() { // 2：這是遇到的第二個生命週期函數
        // console.log(this.msg)
        // this.show()
        //  在 created 中，data 和 methods 都已經被初始化好了！
        // 若是要調用 methods 中的方法，或者操做 data 中的數據，最先，只能在 created 中操做
      },

      beforeMount() { // 3： 這是遇到的第3個生命週期函數，表示 模板已經在內存中編輯完成了，可是還沒有把 模板渲染到 頁面中
        // console.log(document.getElementById('h3').innerText)
        // 在 beforeMount 執行的時候，頁面中的元素，尚未被真正替換過來，只是以前寫的一些模板字符串
      },

      mounted() { // 4： 這是遇到的第4個生命週期函數，表示，內存中的模板，已經真實的掛載到了頁面中，用戶已經能夠看到渲染好的頁面了
        // console.log(document.getElementById('h3').innerText)
        // 注意： mounted 是 實例建立期間的最後一個生命週期函數，當執行完 mounted 就表示，實例已經被徹底建立好了，此時，若是沒有其它操做的話，這個實例，就靜靜的 躺在咱們的內存中，一動不動
      },


      // 5： 接下來的是運行中的兩個事件
      beforeUpdate() { // 這時候，表示 咱們的界面尚未被更新【數據被更新了嗎？  數據確定被更新了】
        /* console.log('界面上元素的內容：' + document.getElementById('h3').innerText)
        console.log('data 中的 msg 數據是：' + this.msg) */
        // 得出結論： 當執行 beforeUpdate 的時候，頁面中的顯示的數據，仍是舊的，此時 data 數據是最新的，頁面還沒有和 最新的數據保持同步
      },

      // 6：
      updated() {
        console.log('界面上元素的內容：' + document.getElementById('h3').innerText)
        console.log('data 中的 msg 數據是：' + this.msg)
        // updated 事件執行的時候，頁面和 data 數據已經保持同步了，都是最新的
      }
    });
  </script>

 

7：當執行beforeDestory鉤子函數的時候，Vue實例從運行階段進入到銷燬階段

當執行beforeDestory鉤子函數的時候，Vue實例身上全部的data和methods和過濾器和指令都處於能夠利用的狀態。此時尚未真正的銷燬。

 

8：當執行Destoryed鉤子函數的時候，Vue實例身上全部的data和methods和過濾器和指令都處於不利用的狀態。

11：按鍵修飾符號

• .enter
• .tab
• .delete (捕獲「刪除」和「退格」鍵)
• .esc
• .space
• .up
• .down
• .left
• .right

 自定義全局鍵盤碼：

Vue.config.keycodes.f2 = 113;

12：Vue動畫

1：transition動畫

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="./lib/vue-2.4.0.js"></script>
  <!-- 2. 自定義兩組樣式，來控制 transition 內部的元素實現動畫 -->
  <style>
    /* v-enter 【這是一個時間點】 是進入以前，元素的起始狀態，此時尚未開始進入 */
    /* v-leave-to 【這是一個時間點】 是動畫離開以後，離開的終止狀態，此時，元素 動畫已經結束了 */
    .v-enter,
    .v-leave-to {
      opacity: 0;
      transform: translateX(150px);
    }

    /* v-enter-active 【入場動畫的時間段】 */
    /* v-leave-active 【離場動畫的時間段】 */
    .v-enter-active,
    .v-leave-active{
      transition: all 0.8s ease;
    }
  </style>
</head>

<body>
  <div id="app">
    <input type="button" value="toggle" @click="flag=!flag">
    <!-- 需求： 點擊按鈕，讓 h3 顯示，再點擊，讓 h3 隱藏 -->
    <!-- 1. 使用 transition 元素，把 須要被動畫控制的元素，包裹起來 -->
    <!-- transition 元素，是 Vue 官方提供的 -->
    <transition>
      <h3 v-if="flag">這是一個H3</h3>
    </transition>
  </div>

  <script>
    // 建立 Vue 實例，獲得 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        flag: false
      },
      methods: {}
    });
  </script>
</body>

</html>

 

2：animate.css  動畫

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="./lib/vue-2.4.0.js"></script>
  <link rel="stylesheet" href="./lib/animate.css">
  <!-- 入場 bounceIn    離場 bounceOut -->
</head>

<body>
  <div id="app">
    <input type="button" value="toggle" @click="flag=!flag">
    <!-- 需求： 點擊按鈕，讓 h3 顯示，再點擊，讓 h3 隱藏 -->
    <!-- <transition enter-active-class="animated bounceIn" leave-active-class="animated bounceOut">
      <h3 v-if="flag">這是一個H3</h3>
    </transition> -->

    <!-- 使用 :duration="毫秒值" 來統一設置 入場 和 離場 時候的動畫時長 -->
    <!-- <transition enter-active-class="bounceIn" leave-active-class="bounceOut" :duration="200">
      <h3 v-if="flag" class="animated">這是一個H3</h3>
    </transition> -->

    <!-- 使用  :duration="{ enter: 200, leave: 400 }"  來分別設置 入場的時長 和 離場的時長  -->
    <transition 
    enter-active-class="bounceIn" 
    leave-active-class="bounceOut" 
    :duration="{ enter: 200, leave: 400 }">
      <h3 v-if="flag" class="animated">這是一個H3</h3>
    </transition> 
  </div>

  <script>
    // 建立 Vue 實例，獲得 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        flag: false
      },
      methods: {}
    });
  </script>
</body>

</html>

 

3：鉤子函數動畫

 

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="./lib/vue-2.4.0.js"></script>
  <style>
    .ball {
      width: 15px;
      height: 15px;
      border-radius: 50%;
      background-color: red;
    }
  </style>
</head>

<body>
  <div id="app">
    <input type="button" value="快到碗裏來" @click="flag=!flag">
    <!-- 1. 使用 transition 元素把 小球包裹起來 -->
    <transition
      @before-enter="beforeEnter"
      @enter="enter"
      @after-enter="afterEnter">
      <div class="ball" v-show="flag"></div>
    </transition>
  </div>

  <script>

    // 建立 Vue 實例，獲得 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        flag: false
      },
      methods: {
        // 注意： 動畫鉤子函數的第一個參數：el，表示 要執行動畫的那個DOM元素，是個原生的 JS DOM對象
        // 你們能夠認爲 ， el 是經過 document.getElementById('') 方式獲取到的原生JS DOM對象
        beforeEnter(el){
          // beforeEnter 表示動畫入場以前，此時，動畫還沒有開始，能夠 在 beforeEnter 中，設置元素開始動畫以前的起始樣式
          // 設置小球開始動畫以前的，起始位置
          el.style.transform = "translate(0, 0)"
        },
        enter(el, done){
          // 這句話，沒有實際的做用，可是，若是不寫，出不來動畫效果；
          // 能夠認爲 el.offsetWidth 會強制動畫刷新
          el.offsetWidth
          // enter 表示動畫 開始以後的樣式，這裏，能夠設置小球完成動畫以後的，結束狀態
          el.style.transform = "translate(150px, 450px)"
          el.style.transition = 'all 1s ease'

          // 這裏的 done， 起始就是 afterEnter 這個函數，也就是說：done 是 afterEnter 函數的引用
          done()
        },
        afterEnter(el){
          // 動畫完成以後，會調用 afterEnter
          // console.log('ok')
          this.flag = !this.flag
        }
      }
    });
  </script>
</body>

</html>

 

13：組件化開發

1：全局組件 extend

<div id="app">
    <!-- 若是要使用組件，直接，把組件的名稱，以 HTML 標籤的形式，引入到頁面中，便可 -->
    <mycom1></mycom1>
  </div>

  <script>
    // 1.1 使用 Vue.extend 來建立全局的Vue組件
    // var com1 = Vue.extend({
    //   template: '<h3>這是使用 Vue.extend 建立的組件</h3>' // 經過 template 屬性，指定了組件要展現的HTML結構
    // })
    // 1.2 使用 Vue.component('組件的名稱', 建立出來的組件模板對象)
    // Vue.component('myCom1', com1)
    // 若是使用 Vue.component 定義全局組件的時候，組件名稱使用了 駝峯命名，則在引用組件的時候，須要把 大寫的駝峯改成小寫的字母，同時，兩個單詞以前，使用 - 連接；
    // 若是不使用駝峯,則直接拿名稱來使用便可;
    // Vue.component('mycom1', com1)

    // Vue.component 第一個參數:組件的名稱,未來在引用組件的時候,就是一個 標籤形式 來引入 它的
    // 第二個參數: Vue.extend 建立的組件  ,其中 template 就是組件未來要展現的HTML內容
    Vue.component('mycom1', Vue.extend({
      template: '<h3>這是使用 Vue.extend 建立的組件</h3>'
    }))


    // 建立 Vue 實例，獲得 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {},
      methods: {}
    });
  </script>

 

2:  對象模式

<div id="app">
    <!-- 仍是使用 標籤形式,引入本身的組件 -->
    <mycom2></mycom2>
  </div>

  <script>
    // 注意:不管是哪一種方式建立出來的組件,組件的 template 屬性指向的模板內容,必須有且只能有惟一的一個根元素
    Vue.component('mycom2', {
      template: '<div><h3>這是直接使用 Vue.component 建立出來的組件</h3><span>123</span></div>'
    })

    // 建立 Vue 實例，獲得 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {},
      methods: {}
    });
  </script>

3: 模板建立組件

<div id="app">
        <my-custom-com3></my-custom-com3>
    </div>

    <template id="com3">
        <div>
            <h1>這是經過template標籤建立的組件</h1>
        </div>
    </template>
    <script>
　　　　　// 1：全局建立組件
        // Vue.component("my-custom-com3", {
        //     template : "#com3",
        // })
        var vm = new Vue({
            el : "#app",

            data : {

            },

            methods : {

            },

            filters : {

            },

            directives : {

            },
            components: { // 2：定義實例內部私有組件的
                myCustomCom3: {
                    template: '#com3'
        }
      },


        });
    
    </script>

 

14：組件中的數據和方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./lib/vue-2.4.0.js"></script>
</head>
<body>
    <div id="app">
        <my-com></my-com>

    </div>

    <template id="tem">
        <h1>{{msg}}</h1>
    </template>

    <script>
        Vue.component("my-com", {
            template : "#tem",
            data : function () {  
                return {
                    msg : "組件中的數據",
                };
            },
        });
        var vm = new Vue({
            el : "#app",
        });
    </script>
</body>
</html>

 

15：組件之間的切換

1：flag切換

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="./lib/vue-2.4.0.js"></script>
</head>

<body>
  <div id="app">
    <a href="" @click.prevent="flag=true">登陸</a>
    <a href="" @click.prevent="flag=false">註冊</a>

    <login v-if="flag"></login>
    <register v-else="flag"></register>

  </div>

  <script>
    Vue.component('login', {
      template: '<h3>登陸組件</h3>'
    })

    Vue.component('register', {
      template: '<h3>註冊組件</h3>'
    })

    // 建立 Vue 實例，獲得 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        flag: false
      },
      methods: {}
    });
  </script>
</body>

</html>

 

 

2：v-bind:is

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="./lib/vue-2.4.0.js"></script>
</head>

<body>
  <div id="app">
    <a href="" @click.prevent="comName='login'">登陸</a>
    <a href="" @click.prevent="comName='register'">註冊</a>

    <!-- Vue提供了 component ,來展現對應名稱的組件 -->
    <!-- component 是一個佔位符, :is 屬性,能夠用來指定要展現的組件的名稱 -->
    <component :is="comName"></component>

    <!-- 總結:當前學習了幾個 Vue 提供的標籤了??? -->
    <!-- component,  template,  transition,  transitionGroup  -->

  </div>

  <script>
    // 組件名稱是 字符串
    Vue.component('login', {
      template: '<h3>登陸組件</h3>'
    })

    Vue.component('register', {
      template: '<h3>註冊組件</h3>'
    })

    // 建立 Vue 實例，獲得 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        comName: 'login' // 當前 component 中的 :is 綁定的組件的名稱
      },
      methods: {}
    });
  </script>
</body>

</html>

 

16：父組件向子組件傳值，經過屬性綁定的方式

1.1：父組件聲明數據

1.2：子組件聲明屬性

1.3：子組件引用的使用綁定屬性

<div id="app">
    <!-- 3：父組件，能夠在引用子組件的時候， 經過 屬性綁定（v-bind:） 的形式, 把 須要傳遞給 子組件的數據，以屬性綁定的形式，傳遞到子組件內部，供子組件使用 -->
    <com1 v-bind:parentmsg="msg"></com1>
  </div>

  <script>
    // 建立 Vue 實例，獲得 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        // 1：父組件聲明屬性 msg
        msg: '123 啊-父組件中的數據'
      },
      methods: {},

      components: {
        // 結論：通過演示，發現，子組件中，默認沒法訪問到 父組件中的 data 上的數據 和 methods 中的方法
        com1: {
          data() { // 注意： 子組件中的 data 數據，並非經過 父組件傳遞過來的，而是子組件自身私有的，好比： 子組件經過 Ajax ，請求回來的數據，均可以放到 data 身上；
            // data 上的數據，都是可讀可寫的；
            return {
              title: '123',
              content: 'qqq'
            }
          },
          template: '<h1 @click="change">這是子組件 --- {{ parentmsg }}</h1>',

          // 2：子組件聲明傳過來的屬性  parentmsg
          // 注意： 組件中的 全部 props 中的數據，都是經過 父組件傳遞給子組件的
          // props 中的數據，都是隻讀的，沒法從新賦值
          props: ['parentmsg'], // 把父組件傳遞過來的 parentmsg 屬性，先在 props 數組中，定義一下，這樣，才能使用這個數據
          directives: {},
          filters: {},
          components: {},
          methods: {
            change() {
              this.parentmsg = '被修改了'
            }
          }
        }
      }
    });
  </script>

 

17：父組件向子組件傳遞事件--實現向父組件傳值

<body>
  <div id="app">
    <!-- 2：父組件向子組件 傳遞 方法，使用的是 事件綁定機制； v-on, 當咱們自定義了 一個 事件屬性以後，那麼，子組件就可以，經過某些方式，來調用 傳遞進去的 這個 方法了 -->
    <com2 @func="show"></com2>
  </div>

  <template id="tmpl">
    <div>
      <h1>這是 子組件</h1>
      <input type="button" value="這是子組件中的按鈕 - 點擊它，觸發 父組件傳遞過來的 func 方法" @click="myclick">
    </div>
  </template>

  <script>

    // 定義了一個字面量類型的 組件模板對象
    var com2 = {
      template: '#tmpl', // 經過指定了一個 Id, 表示 說，要去加載 這個指定Id的 template 元素中的內容，看成 組件的HTML結構
      data() {
        return {
          sonmsg: { name: '小頭兒子', age: 6 }
        }
      },
      methods: {
        myclick() {
          //3： 當點擊子組件的按鈕的時候，如何 拿到 父組件傳遞過來的 func 方法，並調用這個方法？？？
          //  emit 英文原意： 是觸發，調用、發射的意思
          // this.$emit('func123', 123, 456)

          this.$emit('func', this.sonmsg)
        }
      }
    }


    // 建立 Vue 實例，獲得 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        datamsgFormSon: null
      },
      methods: {
        // 1：聲明方法
        show(data) {
          // console.log('調用了父組件身上的 show 方法: --- ' + data)
          // console.log(data);
          this.datamsgFormSon = data;
        }
      },

      components: {
        com2
        // com2: com2
      }
    });
  </script>
</body>

 

18:  ref獲取dom元素和組件

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="./lib/vue-2.4.0.js"></script>
</head>

<body>
  <div id="app">
    <input type="button" value="獲取元素" @click="getElement" ref="mybtn">

    <h3 id="myh3" ref="myh3">哈哈哈， 今每天氣太好了！！！</h3>

    <hr>

    <login ref="mylogin"></login>
  </div>

  <script>

    var login = {
      template: '<h1>登陸組件</h1>',
      data() {
        return {
          msg: 'son msg'
        }
      },
      methods: {
        show() {
          console.log('調用了子組件的方法')
        }
      }
    }

    // 建立 Vue 實例，獲得 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {},
      methods: {
        getElement() {
          console.log(document.getElementById('myh3').innerText);

          //  ref  是 英文單詞 【reference】   值類型 和 引用類型  referenceError
          console.log(this.$refs.myh3.innerText);

          console.log(this.$refs.mylogin.msg);
          this.$refs.mylogin.show();
        }
      },
      components: {
        login
      }
    });
  </script>
</body>

</html>

 

19：路由6部曲

1. 安裝 vue-router 路由模塊
2. 建立一個路由對象
3:路由匹配規則 
4: 將路由規則對象，註冊到 vm 實例上，用來監聽 URL 地址的變化，而後展現對應的組件
5：router-link 默認渲染
6：展現組件位置：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="./lib/vue-2.4.0.js"></script>
  <!-- 1. 安裝 vue-router 路由模塊 -->
  <script src="./lib/vue-router-3.0.1.js"></script>

</head>

<body>
  <div id="app">

      <!-- router-link 默認渲染爲一個a 標籤 -->
    <!-- 5: 填寫a標籤 -->
    <router-link to="/login" tag="span">登陸</router-link>
    <router-link to="/register">註冊</router-link>


    <!-- 6：展現組件位置：
      這是 vue-router 提供的元素，專門用來 看成佔位符的，未來，路由規則，匹配到的組件，就會展現到這個 router-view 中去 -->
    <!-- 因此： 咱們能夠把 router-view 認爲是一個佔位符 -->
      <router-view></router-view>

  </div>

  <script>
    // 組件的模板對象
    var login = {
      template: '<h1>登陸組件</h1>'
    }

    var register = {
      template: '<h1>註冊組件</h1>'
    }


    /*  Vue.component('login', {
       template: '<h1>登陸組件</h1>'
     }) */

    // 2. 建立一個路由對象， 當 導入 vue-router 包以後，在 window 全局對象中，就有了一個 路由的構造函數，叫作 VueRouter
    // 在 new 路由對象的時候，能夠爲 構造函數，傳遞一個配置對象
    var routerObj = new VueRouter({
      // route // 這個配置對象中的 route 表示 【路由匹配規則】 的意思
      routes: [ // 3:路由匹配規則 
        // 每一個路由規則，都是一個對象，這個規則對象，身上，有兩個必須的屬性：
        //  屬性1 是 path， 表示監聽 哪一個路由連接地址；
        //  屬性2 是 component， 表示，若是 路由是前面匹配到的 path ，則展現 component 屬性對應的那個組件
        // 注意： component 的屬性值，必須是一個 組件的模板對象， 不能是 組件的引用名稱；
        // { path: '/', component: login },
        { path: '/', redirect: '/login' }, // 這裏的 redirect 和 Node 中的 redirect 徹底是兩碼事
        { path: '/login', component: login },
        { path: '/register', component: register }
      ],
      linkActiveClass: 'myactive'
    })

    // 建立 Vue 實例，獲得 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {},
      methods: {},
      router: routerObj, // 4: 將路由規則對象，註冊到 vm 實例上，用來監聽 URL 地址的變化，而後展現對應的組件
    });
  </script>
</body>

</html>

 

 

20：路由傳遞參數

1：路徑傳遞參數

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="./lib/vue-2.4.0.js"></script>
  <script src="./lib/vue-router-3.0.1.js"></script>
</head>

<body>
  <div id="app">

    <!-- 若是在路由中，使用 查詢字符串，給路由傳遞參數，則 不須要修改 路由規則的 path 屬性 -->
    <router-link to="/login?id=10&name=zs">登陸</router-link>
    <router-link to="/register">註冊</router-link>

    <router-view></router-view>

  </div>

  <script>

    var login = {
      template: '<h1>登陸 --- {{ $route.query.id }} --- {{ $route.query.name }}</h1>',
      data(){
        return {
          msg: '123'
        }
      },
      created(){ // 組件的生命週期鉤子函數
        console.log(this.$route)
        console.log(this.$route.query.id)
      }
    }

    var register = {
      template: '<h1>註冊</h1>'
    }

    var router = new VueRouter({
      routes: [
        { path: '/login', component: login },
        { path: '/register', component: register }
      ]
    })

    // 建立 Vue 實例，獲得 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {},
      methods: {},
      // router: router
      router
    });
  </script>
</body>

</html>

2：配置傳參

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="./lib/vue-2.4.0.js"></script>
  <script src="./lib/vue-router-3.0.1.js"></script>
</head>

<body>
  <div id="app">

    <!-- 若是在路由中，使用 查詢字符串，給路由傳遞參數，則 不須要修改 路由規則的 path 屬性 -->
    <router-link to="/login/12/ls">登陸</router-link>
    <router-link to="/register">註冊</router-link>

    <router-view></router-view>

  </div>

  <script>

    var login = {
      template: '<h1>登陸 --- {{ $route.params.id }} --- {{ $route.params.name }}</h1>',
      data(){
        return {
          msg: '123'
        }
      },
      created(){ // 組件的生命週期鉤子函數
        console.log(this.$route.params.id)
      }
    }

    var register = {
      template: '<h1>註冊</h1>'
    }

    var router = new VueRouter({
      routes: [
        { path: '/login/:id/:name', component: login },
        { path: '/register', component: register }
      ]
    })

    // 建立 Vue 實例，獲得 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {},
      methods: {},
      // router: router
      router
    });
  </script>
</body>

</html>

 

21：路由嵌套

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="./lib/vue-2.4.0.js"></script>
  <script src="./lib/vue-router-3.0.1.js"></script>
</head>

<body>
  <div id="app">

    <router-link to="/account">Account</router-link>

    <router-view></router-view>

  </div>

  <template id="tmpl">
    <div>
      <h1>這是 Account 組件</h1>

      <router-link to="/account/login">登陸</router-link>
      <router-link to="/account/register">註冊</router-link>

      <router-view></router-view>
    </div>
  </template>

  <script>

    // 組件的模板對象
    var account = {
      template: '#tmpl'
    }

    var login = {
      template: '<h3>登陸</h3>'
    }

    var register = {
      template: '<h3>註冊</h3>'
    }

    var router = new VueRouter({
      routes: [
        {
          path: '/account',
          component: account,
          // 使用 children 屬性，實現子路由，同時，子路由的 path 前面，不要帶 / ，不然永遠以根路徑開始請求，這樣不方便咱們用戶去理解URL地址
          children: [
            { path: 'login', component: login },
            { path: 'register', component: register }
          ]
        }
        // { path: '/account/login', component: login },
        // { path: '/account/register', component: register }
      ]
    })

    // 建立 Vue 實例，獲得 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {},
      methods: {},
      router
    });
  </script>
</body>

</html>

 

22：watch

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="./lib/vue-2.4.0.js"></script>
  <!-- 1. 導入包 -->
  <script src="./lib/vue-router-3.0.1.js"></script>
</head>

<body>
  <div id="app">
    <router-link to="/login">登陸</router-link>
    <router-link to="/register">註冊</router-link>

    <!-- 容器 -->
    <router-view></router-view>

  </div>

  <script>
    // 2. 建立子組件
    var login = {
      template: '<h3>這是登陸子組件，這個組件是 奔波霸 開發的。</h3>'
    }

    var register = {
      template: '<h3>這是註冊子組件，這個組件是 霸波奔 開發的。</h3>'
    }

    // 3. 建立一個路由對象
    var router = new VueRouter({
      routes: [ // 路由規則數組
        { path: '/', redirect: '/login' },
        { path: '/login', component: login },
        { path: '/register', component: register }
      ],
      linkActiveClass: 'myactive' // 和激活相關的類
    })

    // 建立 Vue 實例，獲得 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {},
      methods: {},
      // router: router
      router,
      watch: {
        //  this.$route.path
        '$route.path': function (newVal, oldVal) {
          // console.log(newVal + ' --- ' + oldVal)
          if (newVal === '/login') {
            console.log('歡迎進入登陸頁面')
          } else if (newVal === '/register') {
            console.log('歡迎進入註冊頁面')
          }
        }
      }
    });
  </script>
</body>

</html>

 

5：webpackage

1：在網頁中會引用哪些常見的靜態資源？

JS

 - .js  .jsx  .coffee  .ts（TypeScript  類 C# 語言）

 

 CSS

 - .css  .less   .sass  .scss

 

 Images

 - .jpg   .png   .gif   .bmp   .svg

 

 字體文件（Fonts）

 - .svg   .ttf   .eot   .woff   .woff2

 

模板文件

 - .ejs   .jade  .vue【這是在webpack中定義組件的方式，推薦這麼用】

2： 什麼是webpack?

webpack 是前端的一個項目構建工具，它是基於 Node.js 開發出來的一個前端工具；

 通過剛纔的演示，Webpack 能夠作什麼事情？？？

 1. webpack 可以處理 JS 文件的互相依賴關係；

2. webpack 可以處理JS的兼容問題，把 高級的、瀏覽器不是別的語法，轉爲 低級的，瀏覽器能正常識別的語法

剛纔運行的命令格式：    webpack  要打包的文件的路徑  打包好的輸出文件的路徑

 

 

3：如何完美實現上述的2種解決方案

1. 使用Gulp， 是基於 task 任務的；

2. 使用Webpack， 是基於整個項目進行構建的；

+ 藉助於webpack這個前端自動化構建工具，能夠完美實現資源的合併、打包、壓縮、混淆等諸多功能。

+ 根據官網的圖片介紹webpack打包的過程

+ [webpack官網](http://webpack.github.io/)

4：webpack安裝的兩種方式

1. 運行`npm i webpack -g`全局安裝webpack，這樣就能在全局使用webpack的命令

2. 在項目根目錄中運行`npm i webpack --save-dev`安裝到項目依賴中

 

 

5：建立你一個webpack工程

1：用npm init -y 建立package.json 配置工程,拿到項目的第一步驟是用包管理工具管理起來。npm

2：建立src和dist目錄

3：在src文件夾下面。建立js文件夾、css文件夾、images文件夾、建立index.html、main.js、index.js

 

4：添加mode到script標籤中（package.json文件中）

     "dev":"webpack --mode development",

    "bulid":"webapck --mode production"

5：npm run dev   此時加載的bundle.js是在本地中

　　　可使用  webpack ./src/main.js -o　./dist/bundle.js ，可是報黃色的警告，因此：用npm run dev來解決

npm run 其實執行了package.json中的script腳本

 

6: 配置入口和出口函數，

　　直接寫webpack就能夠打包。

const path = require('path')

//  向外暴露一個配置對象

module.exports = {

    // 1:入口，表示要使用webpack 打包哪一個文件。

    entry: path.join(__dirname, './src/main.js'),

    output : {

        // 2：輸出文件的相關配置

        path: path.join(__dirname, './dist'),  // 指定打包好的文件的目標

        filename: 'bundle.js' // 指定文件的名字

    },

}

 

7:使用webpack-dev-server這個工具來自動打包編譯的功能

//1.運行cnpm i webpack-dev-server -D   來自動打包編譯

//2: webpack-dev-server 依賴webpack包，因此須要一塊兒安裝。

cnpm i webpack -D

cnpm i webpack-cli -D

 

cnpm i webpack-dev-server webpack webpack-cli -D

 

2: webpack-dev-server --open --port 3000 --contentBase src

修改完，package.json以後，須要從新運行

--open，自動打開遊覽器

--port 修改端口號

--contentBase src  修改根路徑

 

此時：bundle.js是在內存中，html在物理磁盤中

 

8：html-webpack-plugin 把html放到內存中

能夠自動建立一個script標籤，自動把打包好的 bundle.js 追加到頁面中去

 

cnpm i html-webpack-plugin -D

 

9: 處理樣式文件

cnpm i style-loader css-loader -D     處理css文件

cnpm i less-loader less -D      　　　　處理less文件

cnpm i sass-loader node-sass  -D　　cnpm i sass fibers -D　　　　　　處理scss文件

cnpm i sass-loader node-sass  sass fibers -D

 

10：處理url路徑、圖片、字體庫

cnpm i url-loader file-loader -D

 

11:安裝babel

// 經過 Babel ，能夠幫咱們將 高級的語法轉換爲 低級的語法

// 1. 在 webpack 中，能夠運行以下兩套 命令，安裝兩套包，去安裝 Babel 相關的loader功能：

// 1.1 第一套包： cnpm i babel-core babel-loader babel-plugin-transform-runtime -D

cnpm i @babel/core -D

// 1.2 第二套包： cnpm i babel-preset-env babel-preset-stage-0 -D

// 2. 打開 webpack 的配置文件，在 module 節點下的 rules 數組中，添加一個 新的 匹配規則：

// 2.1 { test:/\.js$/, use: 'babel-loader', exclude:/node_modules/ }

// 2.2 注意： 在配置 babel 的 loader規則的時候，必須 把 node_modules 目錄，經過 exclude 選項排除掉：緣由有倆：

// 2.2.1 若是 不排除 node_modules， 則Babel 會把 node_modules 中全部的 第三方 JS 文件，都打包編譯，這樣，會很是消耗CPU，同時，打包速度很是慢；

// 2.2.2 哪怕，最終，Babel 把 全部 node_modules 中的JS轉換完畢了，可是，項目也沒法正常運行！

// 3. 在項目的 根目錄中，新建一個 叫作 .babelrc  的Babel 配置文件，這個配置文件，屬於JSON格式，因此，在寫 .babelrc 配置的時候，必須符合JSON語法規範： 不能寫註釋，字符串必須用雙引號

// 3.1 在 .babelrc 寫以下的配置：  你們能夠把 preset 翻譯成 【語法】 的意思

  {

 "presets": ["env", "stage-0"],

 "plugins": ["transform-runtime"]

     }

// 4. 瞭解： 目前，咱們安裝的 babel-preset-env, 是比較新的ES語法， 以前， 咱們安裝的是 babel-preset-es2015, 如今，出了一個更新的 語法插件，叫作 babel-preset-env ，它包含了 全部的 和 es***相關的語法

 

/********************/

上面的作法是 Babel^6x 版本的使用方法，babel在2018年9月份升級了一個大的版本 Babel 7.x，語法有了很大的變更，因此我上面運行的指令已經被out了，必須使用新語法，以下：
新命令以下適合 Babel 7.x和webpack 4 搭配：

• 安裝babel插件
  • 　　運行 cnpm i @babel/core babel-loader @babel/plugin-transform-runtime -D  轉換工具
  • 　　運行 cnpm i @babel/preset-env @babel/preset-stage-0 -D　　                     語法
• 安裝可以識別轉換jsx語法的包 babel-preset-react
  • 　　運行 cnpm i @babel/preset-react -D
• 執行命令：cnpm i @babel/plugin-proposal-class-properties -D
• 執行命令：cnpm i @babel/runtime -D
• 添加 .babelrc 配置文件：

 

最後在 webpack.config.js 中配置上：

{ test:/\.js$/, use: 'babel-loader', exclude: /node_modules/ } //配置 babel 轉化ES6 語法

/********************/

 

12：安裝vue

1:  npm i vue -S

[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.

解決辦法：

// 在webpack 中嘗試使用 Vue：

// 注意： 在 webpack 中， 使用 import Vue from 'vue' 導入的 Vue 構造函數，功能不完整，只提供了 runtime-only 的方式，並無提供 像網頁中那樣的使用方式；

咱們用script標籤導入的vue是全新的版本。

 解決辦法：

1：修改引用規則。

 import Vue from '../node_modules/vue/dist/vue.js'

// 回顧 包的查找規則：

// 1. 找 項目根目錄中有沒有 node_modules 的文件夾

// 2. 在 node_modules 中 根據包名，找對應的 vue 文件夾

// 3. 在 vue 文件夾中，找 一個叫作 package.json 的包配置文件

// 4. 在 package.json 文件中，查找 一個 main 屬性【main屬性指定了這個包在被加載時候，的入口文件】

 2：直接修改 main 屬性

3：導入vue，在webpack.config.js中修改引用指向 

 

2：npm i vue-loader vue-template-compiler -D

 

3：vue-loader把vue文件中的template  script stype文件統一成最終的模板。最後給組件用。

 

 13：路由

npm i vue-router -S

1：導包：

import VueRouter from 'vue-router'

 

2：綁定路由對象

Vue.use(VueRouter);

 

3：建立路由對象

var router = new VueRouter({

  routes: [

    {path: '/account', component: account},

    {path: '/goodslist', component:goodslist}

  ],

});

 

4：掛在路由實例中

 

5：顯示在界面中

<router-link to="/account">Account</router-link>

 <router-link to="/goodslist">Goodslist</router-link>

  <router-view></router-view>

6：常見的Vue命令

1：全局安裝

1：npm i webpack -g  　　　　　　　 　全局安裝webpack。

 

2：保存到項目中  -S

2：npm i webpack --save-dev　　　　 安裝到項目依賴中。

3：cnpm i jquery -S　　　　　　　　　　安裝jquery。

4:   cnpm i bootstrap -S 　　　　　　　　安裝bootstrap

5:    npm i vue -S　　　　　　　　　　　安裝 vue

 

開發是用到  -D

3:  安裝 webpack-dev-server

cnpm i webpack-dev-server -D   來自動打包編譯，把bundle.js 放到內存中

cnpm i webpack -D

cnpm i webpack-cli -D

 

cnpm i webpack-dev-server webpack webpack-cli -D

 

4:  安裝 html-webpack-plugin 把html放到內存中

cnpm i html-webpack-plugin -D   把html放到內存中

 

5:  處理樣式文件

cnpm i style-loader css-loader -D   加載less文件

cnpm i less-loader less -D      　　　　處理less文件

cnpm i sass-loader node-sass  -D　　cnpm i sass fibers -D　　　　　　處理scss文件

cnpm i sass-loader node-sass  sass fibers -D

 

6：處理url路徑、圖片、字體庫

cnpm i url-loader file-loader -D

 

7：babel 解決高級語法

安裝babel插件

 1:  運行 cnpm i @babel/core babel-loader @babel/plugin-transform-runtime -D  轉換工具

 2:  運行 cnpm i @babel/preset-env @babel/preset-stage-0 -D　　                     語法

 3:   安裝可以識別轉換jsx語法的包 babel-preset-react

　　　　運行 cnpm i @babel/preset-react -D

 4:   執行命令：cnpm i @babel/plugin-proposal-class-properties -D

  5: 執行命令：cnpm i @babel/runtime -D

 

8:  Vue組件

npm i vue-loader vue-template-compiler -D

 

9:  vue-router

npm i vue-router -S 

10：其餘命令

3：npm init -y　　　　　　　　　　　　建立package.json文件。

3：webpack ./src/main.js -o ./dist/bundle.js  把main.js處理成bundle.js文件

3：npm run dev　　運行項目

 

webpack-dev-server --open --port 3000 --contentBase src --hot

6：算法
1：冒泡排序

  <script>

    //冒泡排序:把全部的數據按照必定的順序進行排列(從小到大,從大到下)

    var arr = [10, 0, 100, 20, 60, 30];
    //循環控制比較的輪數
    for (var i = 0; i < arr.length - 1; i++) {
      //控制每一輪的比較的次數
      for (var j = 0; j < arr.length - 1 - i; j++) {
        if (arr[j] < arr[j + 1]) {
          var temp = arr[j];
          arr[j] = arr[j + 1];
          arr[j + 1] = temp;
        }
      }
    }
    console.log(arr);
  </script>