【萬字長文】 Vue全家桶從入門到實戰，超詳細筆記整理 ( 一 ) （建議收藏）-有解無憂

筆記根據B站編程不良人視頻整理，視頻鏈接：【編程不良人】VUE全家桶入門到實戰，學VUE看這個就夠了，已完結！基于企業最流行Vue實戰技術，需要md格式筆記的可以私信我，

- 1、Vue 引言
- 2、Vue入門
- - 2.1、下載Vuejs
  - 2.2、Vue第一個入門應用
- 3、v-text和v-html
- - 3.1、v-text
  - 3.2、v-html
  - 3.3、v-text和v-html對比
- 4、vue中事件系結(v-on)
- - 4.1、系結事件基本語法
  - 4.2、Vue中事件的簡化語法
  - 4.3、Vue事件函式兩種寫法
  - 4.4、Vue事件引數傳遞
- 5、v-show v-if v-bind
- - 5.1、v-show、v-if使用
  - 5.2、v-show、v-if小案例
  - 5.3、v-bind
  - 5.4、v-bind 簡化寫法
  - 5.5、v-bind案例
- 6、v-for的使用
- 7、v-model 雙向系結
- - 7.1、v-model
  - 7.2、兩個案例
- 8、計算屬性
- 9、事件修飾符
- - 9.1 stop事件修飾符
  - 9.2 prevent 事件修飾符
  - 9.3 self 事件修飾符
  - 9.4 once 事件修飾符
- 10、按鍵修飾符
- - 10.1 enter 回車鍵
  - 10.2 tab 鍵
- 11、Axios 基本使用
- - 11.1、引言
  - 11.2、Axios 第一個程式
  - - 11.2.1、GET方式的請求
    - 11.2.2 POST方式請求
    - 11.2.3 axios并發請求
    - 11.2.4 攔截器
- 12、Vue 生命周期

1、Vue 引言

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-w5ZKiCvv-1627348740556)(Vue實戰筆記（一）.assets/image-20210129104929487.png)]

漸進式 JavaScript 框架 --摘自官網

# 漸進式
   1. 易用  html css javascript
   2. 高效  開發前端頁面 非常高效 
   3. 靈活  開發靈活 多樣性

# 總結
		Vue 是一個javascript 框架 js 簡化頁面js操作
		bootstrap 是一個css框架  封裝css

# 后端服務端開發人員: 
		頁面標簽 dom jquery js document.getElementById("xxx")
		Vue 漸進式javascript框架: 讓我們通過操作很少的DOM,甚至不需要操作頁面中任何DOM元素,就很容易的完成資料和視圖系結 ====> 雙向系結 MVVM  
		
		注意：日后在使用vue程序中頁面不要再引入Jquery框架
		
		html css--->javascript(document.getElementById()...) ---->jquery($("#xx")) ---> angularjs --->vue(前后端分離架構核心)
		
		vue 前端系統   <-----JSON----->  后臺系統springcloud

# Vue 作者
 	尤雨溪   國內的

2、Vue入門

2.1、下載Vuejs

//開發版本:
	<!-- 開發環境版本，包含了有幫助的命令列警告 -->
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

//生產版本:
	<!-- 生產環境版本，優化了尺寸和速度 -->
	<script src="https://cdn.jsdelivr.net/npm/vue"></script>

2.2、Vue第一個入門應用

1、vue第一個入門應用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue系列課程</title>
</head>
<body>
    <div id="app">
        {{msg}}
        <h2>{{msg}}</h2>
        <span>
            <h2>{{msg}}</h2>
            <span>
                <span>{{msg}}</span>
            </span>
        </span>
        <h3>用戶名：{{username}}</h3>
    </div>
</body>
</html>
<script src="js/vue.js"></script>
<script>
    var app= new Vue({
        el:"#app",  //element：元素 作用：用來指定vue實體作用范圍  日后在el指定的作用范圍內可以直接使用{{屬性名}}獲取data中的屬性
        data:{      //data：資料    作用：用來給vue實體物件系結一系列資料
            msg: "Vue歡迎您！",
            username: "小陳!!",
        }
    });
</script>

2、vue實體中定義物件，陣列等相關資料

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue系列課程</title>
</head>
<body>
    <div id="app">
        <h2>{{msg}}</h2>
        <h2>{{age}}</h2>
        <h2>姓名：{{user.name}}   描述：{{user.des}}</h2>
        <h2>{{schools[0]}}-{{schools[1]}}-{{schools[2]}}-{{schools[3]}}</h2>
        <h2>姓名：{{users[0].name}}  年齡：{{users[0].age}}  生日：{{users[0].bir}}</h2>
        <h2>姓名：{{users[1].name}}  年齡：{{users[1].age}}  生日：{{users[1].bir}}</h2>
        <h2>姓名：{{users[2].name}}  年齡：{{users[2].age}}  生日：{{users[2].bir}}</h2>
    </div>
</body>
</html>
<!--引入vue.js檔案-->
<script src="js/vue.js"></script>
<script>
    var app = new Vue({
       el:"#app",  //指定vue作用范圍
       data:{      //用來給vue實體系結一系列資料
           msg:"百知歡迎您!!!",
           age:"23",
           user:{name:"小陳",des:"他在百知,百知等你！！"}, //定義物件
           schools:["河南校區","北京校區","天津校區","山西校區"], //定義一個陣列
           users:[
               {name:"小王",age:23,bir:"2012-12-01"},
               {name:"小李",age:24,bir:"2013-12-01"},
               {name:"小趙",age:25,bir:"2014-12-01"},
           ]
       }
    });
</script>

3、使用{{屬性名}}獲取data資料時,使用運算式運算子等相關操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue系列課程</title>
</head>
<body>
    <div id="app">
        <h2>{{msg}}</h2>
        <!--{{屬性名}}：使用這種方式獲取資料時，可以進行相關的運算（算數，邏輯），呼叫獲取值型別相關js方法-->
        <h2>{{msg + '您好'}}</h2>
        <h2>{{msg == 'hello vue'}}</h2>
        <h2>{{msg.toUpperCase()}}</h2>
        <h2>{{age + 1}}</h2>
        <h2>{{age == 23}}</h2>
    </div>
</body>
</html>
<!--引入vue.js檔案-->
<script src="js/vue.js"></script>
<script>
    var app = new Vue({
       el:"#app",  //指定vue作用范圍
       data:{      //用來給vue實體系結一系列資料
            msg:"hello vue",
            age:23,
       }
    });
</script>

4、使用vue時el屬性指定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue系列課程</title>
</head>
<body >
    <div id="app" class="aa">
        <h2>{{msg}}</h2>

    </div>
</body>
</html>
<!--引入vue.js檔案-->
<script src="js/vue.js"></script>
<script>
    var app = new Vue({
       el:"#app",  //指定vue作用范圍
                        // 書寫格式：使用css選擇器 id選擇器 html選擇器 類選擇器 推薦使用id選擇器 id選擇器具有唯一性
                        // 注意事項：不要將el指向body或html標簽 Do not mount Vue to <html> or <body> - mount to normal elements instead.
       data:{      //用來給vue實體系結一系列資料
            msg:"hello vue",
       }
    });
</script>

5、總結

# 總結:
			1.vue實體(物件)中el屬性: 	代表Vue的作用范圍  日后在Vue的作用范圍內都可以使用Vue的語法
			2.vue實體(物件)中data屬性: 用來給Vue實體系結一些相關資料, 系結的資料可以通過{{變數名}}在Vue作用范圍內取出
			3.在使用{{}}進行獲取data中資料時,可以在{{}}中書寫運算式,運算子,呼叫相關方法,以及邏輯運算等
			4.el屬性中可以書寫任意的CSS選擇器[jquery選擇器],但是在使用Vue開發是推薦使用 id選擇器  注意: el屬性值不能指定body或html標簽

3、v-text和v-html

3.1、v-text

v-text:用來獲取data中資料將資料以文本的形式渲染到指定標簽內部類似于javascript 中 innerText

	<div id="app" class="aa">
        <span >{{ message }}</span>
        <span v-text="message"></span>
    </div>

    <!--引入vue.js-->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        const app = new Vue({
            el:"#app",
            data:{
                message:"百知歡迎您"
            }
        })
    </script>

# 總結
				1.{{}}(插值運算式)和v-text獲取資料的區別在于 
				a.使用v-text取值會將標簽中原有的資料覆寫 使用插值運算式的形式不會覆寫標簽原有的資料
				b.使用v-text可以避免在網路環境較差的情況下出現插值閃爍

3.2、v-html

v-html:用來獲取data中資料將資料中含有的html標簽先決議在渲染到指定標簽的內部類似于javascript中 innerHTML

		<div id="app" class="aa">
        <span>{{message}}</span>
        <br>
        <span v-text="message"></span>

        <br>
        <span v-html="message">xxxxxx</span>
    </div>

    <!--引入vue.js-->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        const app = new Vue({
            el:"#app",
            data:{
                message:"<a href=''>百知歡迎您</a>"
            }
        })
    </script> }        })    </script>

3.3、v-text和v-html對比

代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue系列課程</title>
</head>
<body >
    <div id="app" class="aa">
        <h2>{{msg}} 您好</h2>
        <!--vue提供兩個指令： v-text v-html 都可以直接根據屬性名獲取data資料渲染到指定標簽內-->

        <!--v-text-->
        <h2><span v-text="msg"></span> 您好</h2>
        <!--
            v-text: {{}} 取值區別：
                1.使用{{}}取值不會將標簽原始資料覆寫 使用v-text獲取資料會將標簽中原始內容覆寫
                2.v-text獲取資料時不會出現插值閃爍  {{屬性名}} ===> 插值運算式：容易出現插值閃爍 插值閃爍：當網路不好條件情況下使用{{}}方式獲取資料
        -->
        <h2 v-html="msg"></h2>
        <!--
            共同點：都可以直接根據data中資料名，將資料渲染到標簽內部
            v-text: v-text將獲取資料直接以文本形式渲染到標簽內部                innerText
            v-html: v-html將獲取資料中含有html標簽決議之后渲染到對應標簽內部     innerHtml
        -->
        <h1 >{{content}}</h1>
        <h1 v-text="content"></h1>
        <h1 v-html="content"></h1>
    </div>
</body>
</html>
<!--引入vue.js檔案-->
<script src="js/vue.js"></script>
<script>
    var app = new Vue({
       el:"#app",  //指定vue作用范圍
       data:{      //用來給vue實體系結一系列資料
            msg:"hello vue",
            content : "歡迎來到<a href='http://www.baidu.com'>百度</a>",
       }
    });
</script>

運行結果：

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-LdfpoTfT-1627348740558)(Vue實戰筆記（一）.assets/image-20210709215316787.png)]

4、vue中事件系結(v-on)

4.1、系結事件基本語法

1、vue事件系結（一）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue系列課程</title>
</head>
<body >
    <div id="app" >
        <h2>{{msg}}</h2>
        <h2 v-text="msg"></h2>
        <h2 v-html="msg"></h2>

        <!--
            js 事件三要素
                1.事件源：發生事件源頭稱之為事件源，一般指的是html標簽
                2.事件：發生特定動作 onclick單擊 dbclick 雙擊 onkeyup ......
                3.監聽器：事件處理器程式 事件處理函式 function(){}
            vue 事件：v-on
                1.在vue中給對應標簽系結事件可以通過vue提供v-on指令進行事件系結 ==> v-on:事件名
                2.在vue中事件處理函式統一宣告在vue實體中methods屬性
        -->
        <!--給button按鈕系結多個事件-->
        <input type="button" value="點我" v-on:click="aaa" v-on:mouseover="bbb" v-on:mouseout="ccc">
    </div>
</body>
</html>
<!--引入vue.js檔案-->
<script src="js/vue.js"></script>
<script>
    var app = new Vue({
       el:"#app",  //指定vue實體作用范圍
       data:{      //用來給vue實體系結一系列資料
            msg:"hello vue",
       },
       methods:{ //用來給當前vue實體物件，宣告一系列函式
           aaa: function () {
                alert("aaa");
           },
           bbb: function () {
                console.log("mouse over");
           },
           ccc: function () {
               console.log("mouse out");
           }
       }
    });
</script>

2、vue事件系結（二）

給一個按鈕系結點擊+1事件，

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue系列課程</title>
</head>
<body >
    <div id="app" >
        <h1>{{msg}}</h1>
        <h1>{{age}}</h1>
        <!--
            vue事件：
                1. 使用v-on：事件名
                2. 函式名統一定義在vue實體中 methods 屬性中
        -->
        <input type="button" value="點我給年齡+1" v-on:click="incrmentAge">
        <input type="button" value="點我給年齡-1" v-on:click="decrmentAge">
    </div>
</body>
</html>
<!--引入vue.js檔案-->
<script src="js/vue.js"></script>
<script>
    var app = new Vue({
       el:"#app",  //指定vue實體作用范圍
       data:{      //用來給vue實體系結一系列資料
            msg:"hello vue",
            age:23,
       },
       methods:{ //用來給當前vue實體物件，宣告一系列函式
           incrmentAge:function () {
               //this物件代表當前vue實體物件
               console.log(this);
               console.log(this.age)
               if(this.age >= 120) return;
               this.age ++;  //vue實體中data資料age發生變化
           },
           decrmentAge:function () { //定義函式
               if(this.age < 2) return ;
               this.age --;
           }
       }
    });
</script>

3、總結

? 事件源: 發生事件dom元素事件: 發生特定的動作 click.... 監聽器發生特定動作之后的事件處理程式通常是js中函式

在vue中系結事件是通過v-on指令來完成的 v-on:事件名如 v-on:click
在v-on:事件名的賦值陳述句中是當前事件觸發呼叫的函式名
在vue中事件的函式統一定義在Vue實體的methods屬性中
在vue定義的事件中this指的就是當前的Vue實體,日后可以在事件中通過使用this獲取Vue實體中相關資料呼叫methods中相關方法

4.2、Vue中事件的簡化語法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue系列課程</title>
</head>
<body >
    <div id="app" >
        <h1>{{msg}}</h1>
        <h1>{{age}}</h1>

        <!--
            vue事件系結  v-on：事件名  簡化寫法===> @事件名
        -->
        <input type="button" value="點我改變年齡" @click="changeAge">
    </div>
</body>
</html>
<!--引入vue.js檔案-->
<script src="js/vue.js"></script>
<script>
    var app = new Vue({
       el:"#app",  //指定vue實體作用范圍
       data:{      //用來給vue實體系結一系列資料
            msg:"hello vue",
            age:23,
       },
       methods:{
           changeAge:function () { 
               this.age ++ ;
           }
       }
    });
</script>

# 總結:
			1.日后在vue中系結事件時可以通過@符號形式 簡化  v-on 的事件系結

4.3、Vue事件函式兩種寫法

<script>
    var app = new Vue({
       el:"#app",  //指定vue實體作用范圍
       data:{      //用來給vue實體系結一系列資料
            msg:"hello vue",
            age:23,
       },
       methods:{
           /*changeAge:function () { //定義事件 簡化寫法
               this.age ++ ;
           }*/
           changeAge(){ //es6語法 ecmascript 6版本
               this.age ++ ;
           }
       }
    });
</script>

# 總結:
			1.在Vue中事件定義存在兩種寫法  
				 一種是 函式名:function(){}       
			     一種是 函式名(){} 推薦

4.4、Vue事件引數傳遞

我們還可以給vue事件中傳遞引數，

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue系列課程</title>
</head>
<body >
    <div id="app" >
        <h1>{{msg}}</h1>
        <h1>{{age}}</h1>

        <!--
            vue事件系結  v-on：事件名  簡化 @事件名="事件函式名(引數......)"
        -->
        
        <!--多個引數使用','隔開-->
        <input type="button" value="點我改變年齡的值" @click="changeAge(10,'xiaohei')"> 
    </div>
</body>
</html>
<!--引入vue.js檔案-->
<script src="js/vue.js"></script>
<script>
    var app = new Vue({
        el:"#app",  //指定vue實體作用范圍
        data:{      //用來給vue實體系結一系列資料
            msg:"hello vue",
            age:23,
        },
        methods:{
            changeAge(number,name){ //定義事件
                console.log(number);
                console.log(name);
                this.age += number ;
            }
        }
    });
</script>

# 總結:
	1.在使用事件時,可以直接在事件呼叫處給事件進行引數傳遞,在事件定義處通過定義對應變數接收傳遞的引數

5、v-show v-if v-bind

5.1、v-show、v-if使用

v-show: 用來控制頁面中某個標簽元素是否展示

v-if: 用來控制頁面元素是否展示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue系列課程</title>
</head>
<body >
    <div id="app" >
        <h2>{{msg}}</h2>
        <!--
            v-if、v-show ： 作用：都是用來控制頁面中標簽是否展示和隱藏 使用：標簽：v-if="true|false" v-show="true|false"
            區別：
                v-show: 底層在控制頁面標簽是否展示時底層使用的是css 中 display 屬性來標簽展示和隱藏  推薦使用：v-show 資料量比較大 控制顯示狀態切換頻繁
                v-if  : 底層在控制頁面標簽是否展示時底層是直接操作dom元素，通過對dom元素洗掉和添加來控制標簽的展示和隱藏
        -->
        <!--v-show-->
        <h1 v-show="isShow">{{content}}</h1>
        <!--v-if-->
        <h1 v-if="isShow">{{content}}</h1>
    </div>
</body>
</html>
<!--引入vue.js檔案-->
<script src="js/vue.js"></script>
<script>
    var app = new Vue({
        el:"#app",  //指定vue實體作用范圍
        data:{      //用來給vue實體系結一系列資料
            msg:"hello vue",
            content: "vue學習",
            isShow:true
        },
        methods:{ //用來給vue實體定義事件處理函式

        }
    });
</script>

總結：

在使用v-show時可以直接書寫boolean值控制元素展示,也可以通過變數控制標簽展示和隱藏，
在v-show中可以通過boolean運算式控制標簽的展示和隱藏，
v-if、v-show ：作用：都是用來控制頁面中標簽是否展示和隱藏使用：標簽：v-if="true|false",v-show="true|false"
區別：
- v-show: 底層在控制頁面標簽是否展示時底層使用的是css 中 display 屬性來標簽展示和隱藏，推薦使用：v-show 在資料量比較大和控制顯示狀態切換頻繁時，
- v-if : 底層在控制頁面標簽是否展示時底層是直接操作dom元素，通過對dom元素洗掉和添加來控制標簽的展示和隱藏，

5.2、v-show、v-if小案例

1、v-show、v-if顯示隱藏案例(一)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue系列課程</title>
</head>
<body >
    <div id="app" >
        <!-- v-show v-if -->
        <h2 v-show="isShow">{{msg}}</h2>

        <!--系結事件 單擊事件 @click-->
        <input type="button" value="顯示" @click="show">
        <input type="button" value="隱藏" @click="hidden">
        <input type="button" value="切換顯示狀態" @click="changeState">
        <input type="button" value="切換顯示狀態,另一種寫法" @click="isShow=!isShow">

    </div>
</body>
</html>
<!--引入vue.js檔案-->
<script src="js/vue.js"></script>
<script>
    var app = new Vue({
        el:"#app",  //指定vue實體作用范圍
        data:{      //用來給vue實體系結一系列資料
            msg:"hello vue",
            isShow:true
        },
        methods:{ //用來給vue實體定義事件處理函式
            show(){  //用來顯示
                this.isShow = true;
            },
            hidden(){//用來隱藏
                this.isShow = false;
            },
            changeState(){ //切換顯示狀態
                this.isShow = !this.isShow;
            },
        }
    });
</script>

2、v-show、v-if顯示隱藏案例(二)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue系列課程</title>
</head>
<body >
    <div id="app" >
        <!-- v-show v-if -->
        <h2>{{msg}}</h2>

        <!--圖片添加滑鼠移入事件-->
        <img width="200" v-show="isShow" @mouseover="hide" style="border: 5px red solid" src="https://img0.baidu.com/it/u=384452397,1089369801&fm=26&fmt=auto&gp=0.jpg" alt="這是圖片">
    </div>
</body>
</html>
<!--引入vue.js檔案-->
<script src="js/vue.js"></script>
<script>
    var app = new Vue({
        el:"#app",  //指定vue實體作用范圍
        data:{      //用來給vue實體系結一系列資料
            msg:"hello vue",
            isShow:true
        },
        methods:{ //用來給vue實體定義事件處理函式
            hide(){
                this.isShow = false;
            }
        }
    });
</script>

5.3、v-bind

v-bind: 用來系結標簽的屬性從而通過vue動態修改標簽的屬性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue系列課程</title>
</head>
<body >
    <div id="app" >

        <h2>{{msg}}</h2>

       <!--
            v-bind: 系結 作用：用來將html標簽中相關屬性系結到vue實體中，日后通過對vue實體中資料修改，影響到對應標簽中屬性變化
                        語法：v-bind:屬性名
        -->
        <img v-bind:width="width" v-bind:src="imgSrc" v-bind:alt="tip">
    </div>
</body>
</html>
<!--引入vue.js檔案-->
<script src="js/vue.js"></script>
<script>
    var app = new Vue({
        el:"#app",  //指定vue實體作用范圍
        data:{      //用來給vue實體系結一系列資料
            msg:"hello vue",
            imgSrc:"https://img0.baidu.com/it/u=384452397,1089369801&fm=26&fmt=auto&gp=0.jpg",
            width:200,
            tip:"這是圖片"
        },
        methods:{ //用來給vue實體定義事件處理函式

        }
    });
</script>

5.4、v-bind 簡化寫法

? vue為了方便我們日后系結標簽的屬性提供了對屬性系結的簡化寫法如 v-bind:屬性名 簡化之后 :屬性名

<!--
	v-bind: 系結 作用：用來將html標簽中相關屬性系結到vue實體中，日后通過對vue實體中資料修改，影響到對應標簽中屬性變化
	語法：v-bind:屬性名   =====> 簡化寫法：屬性名
-->
<img :width="width" :src="imgSrc" :alt="tip">

擴展v-bind使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue系列課程</title>
    <style>
        .aa{
            border: 5px red solid;
        }
        .bb{
            border: 5px darkorange solid;
        }
    </style>
</head>
<body >
    <div id="app" >

        <h2>{{msg}}</h2>

       <!--
            v-bind: 系結 作用：用來將html標簽中相關屬性系結到vue實體中，日后通過對vue實體中資料修改，影響到對應標簽中屬性變化
                        語法：v-bind:屬性名   =====> 簡化寫法：屬性名
        -->
        <img :width="width" :src="imgSrc" :alt="tip" :class="isClass?'aa':'bb'">
    </div>
</body>
</html>
<!--引入vue.js檔案-->
<script src="js/vue.js"></script>
<script>
    var app = new Vue({
        el:"#app",  //指定vue實體作用范圍
        data:{      //用來給vue實體系結一系列資料
            msg:"hello vue",
            imgSrc:"https://img0.baidu.com/it/u=384452397,1089369801&fm=26&fmt=auto&gp=0.jpg",
            width:200,
            tip:"這是圖片",
            isClass:true,  //ture 顯示red false 顯示orange
        },
        methods:{ //用來給vue實體定義事件處理函式

        }
    });
</script>

5.5、v-bind案例

實作滑鼠移入和移出對圖片和邊框的切換，

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue系列課程</title>
    <style>
        .aa{
            border: 5px red solid;
        }
        .bb{
            border: 5px darkorange solid;
        }
    </style>
</head>
<body >
    <div id="app" >

        <h2>{{msg}}</h2>
        <!--屬性系結-->
        <img width="200" @mou="change" :src="src" :class="cls" @mouseover="change" @mouseout="recover">
    </div>
</body>
</html>
<!--引入vue.js檔案-->
<script src="js/vue.js"></script>
<script>
    var app = new Vue({
        el:"#app",  //指定vue實體作用范圍
        data:{      //用來給vue實體系結一系列資料
            msg:"hello vue",
            src:"https://img2.baidu.com/it/u=1077360284,2857506492&fm=26&fmt=auto&gp=0.jpg",
            cls:"aa"
        },
        methods:{ //用來給vue實體定義事件處理函式
            change(){
                this.src = "https://img1.baidu.com/it/u=3229045480,3780302107&fm=26&fmt=auto&gp=0.jpg";
                this.cls = "bb";
            },
            recover(){
                this.src = "https://img2.baidu.com/it/u=1077360284,2857506492&fm=26&fmt=auto&gp=0.jpg";
                this.cls = "aa";
            }
        }
    });
</script>

6、v-for的使用

v-for: 作用就是用來對物件進行遍歷的(陣列也是物件的一種)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue系列課程</title>
</head>
<body >
    <div id="app" >

        <h2>{{msg}}</h2>

        <!--
            v-for : 作用：用來給vue實體中資料進行遍歷
        -->
        <h1>遍歷物件</h1>
        <h2 v-for="(value,key,index) in user">
            index: {{index}} key:{{key}} value:{{value}}
        </h2>

        <h1>遍歷陣列</h1>
        <h2 v-for="(school,index) in schools">
            index:{{index}}  schools:{{school}}
        </h2>

        <h1>遍歷陣列中含有物件</h1>
        <h2 v-for="(user,index) in users" :key = "user.id">
            index: {{index}} name:{{user.name}} age:{{user.age}} bir:{{user.bir}}
        </h2>

    </div>
</body>
</html>
<!--引入vue.js檔案-->
<script src="js/vue.js"></script>
<script>
    var app = new Vue({
        el:"#app",  //指定vue實體作用范圍
        data:{      //用來給vue實體系結一系列資料
            msg:"hello vue",
            user:{name:"小王",age:23,bir:"2012-02-06"},
            schools:["北京","重慶","天津"],
            users:[
                {id:"1",name:"小王",age:23,bir:"2012-02-06"},
                {id:"2",name:"小李",age:34,bir:"2016-02-06"},
                {id:"3",name:"小趙",age:12,bir:"2014-02-06"},
            ]
        },
        methods:{ //用來給vue實體定義事件處理函式

        }
    });
</script>

# 總結
	1.在使用v-for的時候一定要注意加入:key 用來給vue內部提供重用和排序的唯一key

7、v-model 雙向系結

7.1、v-model

v-model: 作用用來系結標簽元素的值與vue實體物件中data資料保持一致,從而實作雙向的資料系結機制

代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue系列課程</title>
</head>
<body >
    <div id="app" >

        <h2>{{msg}}</h2>

        <!--
            v-model : 作用：用來系結from表單標簽中的value屬性交給vue實體進行管理 input select checxbox button ...
        -->
        <input type="text" v-model="msg">

        <input type="button" value="改變data資料" @click="change">

    </div>
</body>
</html>
<!--引入vue.js檔案-->
<script src="js/vue.js"></script>
<script>
    var app = new Vue({
        el:"#app",  //指定vue實體作用范圍
        data:{      //用來給vue實體系結一系列資料
            msg:"hello vue",

        },
        methods:{ //用來給vue實體定義事件處理函式
            change(){
                this.msg = "vue學習"
            }
        }
    });
</script>

總結：

# 總結
		1.使用v-model指令可以實作資料的雙向系結 
		2.所謂雙向系結 表單中資料變化導致vue實體data資料變化   vue實體中data資料的變化導致表單中資料變化 稱之為雙向系結

# MVVM架構  雙向系結機制
	Model: 資料  Vue實體中系結資料
	
	VM:   ViewModel  監聽器

	View:  頁面  頁面展示的資料

學完v-model以后，我們一起來做兩個小案例，

7.2、兩個案例

備忘錄案例實作

需求：

代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue系列課程</title>
</head>
<body>
    <div id="app">
        <h1>{{msg}}</h1>
        <!-- v-if(dom)、v-show(css display) ： 作用：都是用來控制頁面中標簽是否展示和隱藏-->
        輸入備忘錄內容：<input type="text" v-model="content"> <input type="button" value="添加到備忘錄" @click="saveItem"> <br>

        <ul v-show="items.length > 0">
            <li v-for="(item,index) in items">{{index+1}}. {{item}} <a href="javascript:;" @click="delItem(index)">洗掉</a></li>
        </ul>
        <h5 v-show="items.length == 0">當前備忘錄中還沒有任何內容~~,請添加！</h5>
        <h3>當前備忘錄中共：{{items.length}}條</h3>
        <input type="button" value="清空備忘錄" @click="delAllItems">
    </div>
</body>
</html>
<!--引入vue的js檔案-->
<script src="js/vue.js"></script>
<script>
    var app = new Vue({
        el:"#app",  //代表vue實體作用范圍
        data:{      //在vue實體中定義一系列資料
            msg:"備忘錄功能實作",
            items:["今天去買菜","今天要好好學習","今天要取快遞"],
            content:""
        },
        methods:{ //在vue實體中定義相關函式
            saveItem(){ //添加備忘錄方法
                console.log(this.content);
                if(!this.content) {
                    alert("請輸入備忘錄內容!!!")
                    return;
                }
                this.items.push(this.content); //將新增的內容添加到陣列中
                this.content="";
            },
            delItem(index){ //根據下標洗掉指定元素
                console.log(index);
                this.items.splice(index,1); //根據下標洗掉元素 //引數1：洗掉起始下標 引數2：洗掉元素個數
            },
            delAllItems(){ //清空備忘錄
                this.items = [];
            }
        }
    });
</script>

效果：

購物車案例實作

需求：

代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue系列課程</title>
</head>
<body>
    <div id="app">
        <h1>{{msg}}</h1>

        <table border="1">
            <tr>
                <th>id</th>
                <th>名稱</th>
                <th>價格</th>
                <th>數量</th>
                <th>小計</th>
            </tr>
            <!--v-for-->
            <tr v-for="(item,index) in items" :key="item.id">
                <td>{{item.id}}</td>
                <td>{{item.name}}</td>
                <td>{{item.price}}</td>
                <td><input type="button" value="-" @click="decrCount(index)">{{item.count}}<input type="button" value="+" @click="incrCount(index)"></td>
                <td>{{(item.price * item.count).toFixed(2)}}</td>
            </tr>
        </table>

        <h3>總價格：{{getTotalPrice()}}</h3>
    </div>
</body>
</html>
<!--引入vue的js檔案-->
<script src="js/vue.js"></script>
<script>
    var app = new Vue({
        el:"#app",  //代表vue實體作用范圍
        data:{      //在vue實體中定義一系列資料
            msg:"購物車功能實作",
            items:[
                {id:1,name:"蘋果iphone12",count:1,price:28.28},
                {id:2,name:"華為mate40 pro",count:1,price:30.28},
            ]
        },
        methods:{ //在vue實體中定義相關函式
            incrCount(index){  //數量增加的方法
                console.log(this.items[index].count);
                this.items[index].count++;
            },
            decrCount(index){  //數量減少的方法
                console.log(this.items[index].count);
                if( this.items[index].count >= 1){
                    this.items[index].count--;
                }else{
                    alert("不能在少了!");
                    return ;
                }
            },
            getTotalPrice(){ 
                var totalPrice = 0;
                for(var i = 0; i < this.items.length; i++){
                    totalPrice += this.items[i].count * this.items[i].price;
                }
                return totalPrice.toFixed(2);
            }
        }
    });
</script>

效果：

8、計算屬性

計算屬性：computed: vue官方提供一個計算屬性

代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue系列課程</title>
</head>
<body>
    <div id="app">
        <h1>{{msg}}</h1>

        <!--
            computed: vue官方提供一個計算屬性
                作用：在完成某種業務時，往往頁面結果需要經過多次計算才能獲取，computed屬性就是用來完成頁面結果多次計算
                好處：在完成計算同時也會將本次計算結果進行快取，如果資料沒有發生變化，在頁面中多次使用，計算方法僅執行一次
                使用：{{ 屬性名}} 屬性名即方法名稱
        -->
        <table border="1">
            <tr>
                <th>id</th>
                <th>名稱</th>
                <th>價格</th>
                <th>數量</th>
                <th>小計</th>
            </tr>
            <!--v-for-->
            <tr v-for="(item,index) in items" :key="item.id">
                <td>{{item.id}}</td>
                <td>{{item.name}}</td>
                <td>{{item.price}}</td>
                <td><input type="button" value="-" @click="decrCount(index)">{{item.count}}<input type="button" value="+" @click="incrCount(index)"></td>
                <td>{{(item.price * item.count).toFixed(2)}}</td>
            </tr>
        </table>

        <!--使用methods方法完成計算業務：
            缺點：
                1.只要呼叫了一次計算方法，整個計算方法就會執行一次，如果在一個頁面中多次使用到計算結果，可能會導致造成重復計算，導致頁面加載性能變低
        -->
        <h3>總價格：{{totalPrice}}</h3>

    </div>
</body>
</html>
<!--引入vue的js檔案-->
<script src="js/vue.js"></script>
<script>
    var app = new Vue({
        el:"#app",  //代表vue實體作用范圍
        data:{      //在vue實體中定義一系列資料
            msg:"購物車功能實作之methods方法實作總價格",
            items:[
                {id:1,name:"蘋果iphone12",count:1,price:28.28},
                {id:2,name:"華為mate40 pro",count:1,price:30.28},
            ]
        },
        methods:{ //在vue實體中定義相關函式
            incrCount(index){  //數量增加的方法
                console.log(this.items[index].count);
                this.items[index].count++;
            },
            decrCount(index){  //數量減少的方法
                console.log(this.items[index].count);
                if( this.items[index].count >= 1){
                    this.items[index].count--;
                }else{
                    alert("不能在少了!");
                    return ;
                }
            },

        },
        computed:{  //用來書寫計算相關方法  計算屬性
            totalPrice(){ //計算方法 好處：只進行一次計算，多次使用時直接使用第一次計算之后快取結果
                var totalPrice = 0;
                for(var i = 0; i < this.items.length; i++){
                    totalPrice += this.items[i].count * this.items[i].price;
                }
                return totalPrice.toFixed(2);
            }
        }
    });
</script>

總結：

作用：在完成某種業務時，往往頁面結果需要經過多次計算才能獲取，computed屬性就是用來完成頁面結果多次計算
好處：在完成計算同時也會將本次計算結果進行快取，如果資料沒有發生變化，在頁面中多次使用，計算方法僅執行一次
使用：{{ 屬性名}} 屬性名即方法名稱

9、事件修飾符

修飾符: 用來和事件連用,用來決定事件觸發條件或者是阻止事件的觸發機制

# 1.常用的事件修飾符
	.stop    停止
	.prevent 阻止
	.self    獨自
	.once    一次

9.1 stop事件修飾符

用來阻止事件冒泡

<h2>stop事件修飾符</h2>
<!--.stop 事件修飾符 作用：用來阻止事件的冒泡-->
<div style="width: 200px;height: 200px;background: red" @click="parent">

    <!--對孩子中單擊事件進行修飾：不進行事件冒泡處理 .stop-->
    <div style="width: 100px;height: 100px;background: green" @click.stop="child"></div>

</div>

9.2 prevent 事件修飾符

用來阻止標簽的默認行為

<h2>prevent事件修飾符</h2>
<!--默認行為：根據href連接自動跳轉 .prevent 阻止事件默認行為-->
<a href="http://www.baidu.com" @click.prevent="search">百度一下</a>
<a href="javascript:void(0);" @click.prevent="search">百度一下</a>
<a href="javascript:;" @click.prevent="search">百度一下</a>

9.3 self 事件修飾符

用來針對于當前標簽的事件觸發 ===========> 只觸發自己標簽的上特定動作的事件只關心自己標簽上觸發的事件不監聽事件冒泡

<h2>slef事件修飾符</h2>
<!--self: 只監聽自身標簽觸發的對應事件-->
<div style="width: 200px;height: 200px;background: aqua" @click.self="parent">

    <div style="width: 100px;height: 100px;background: green" @click="child"></div>
    <div style="width: 100px;height: 100px;background: brown" @click="child"></div>

</div>

9.4 once 事件修飾符

once 一次作用: 就是讓指定事件只觸發一次

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue系列課程</title>
</head>
<body>
    <div id="app">

        <h1>{{msg}}</h1>

        <!--
            事件修飾符 作用：用來和事件連用，用來決定事件觸發條件和決定事件觸發機制
            .stop       停止事件冒泡
            .prevent    阻止默認行為
            .slef       只觸發自身行為
            .once       一次事件

            注意：事件修飾符可以多個連用
         -->
        <h2>stop事件修飾符</h2>
         <!--.stop 事件修飾符 作用：用來阻止事件的冒泡-->
         <div style="width: 200px;height: 200px;background: red" @click="parent">

             <!--對孩子中單擊事件進行修飾：不進行事件冒泡處理 .stop-->
             <div style="width: 100px;height: 100px;background: green" @click.stop.once="child"></div>

         </div>

        <h2>prevent事件修飾符</h2>
        <!--默認行為：根據href連接自動跳轉 .prevent 阻止事件默認行為-->
        <a href="http://www.baidu.com" @click.prevent="search">百度一下</a>
        <a href="javascript:void(0);" @click.prevent="search">百度一下</a>
        <a href="javascript:;" @click.prevent="search">百度一下</a>

        <h2>slef事件修飾符</h2>
        <!--self: 只監聽自身標簽觸發的對應事件-->
        <div style="width: 200px;height: 200px;background: aqua" @click.self="parent">

            <div style="width: 100px;height: 100px;background: green" @click="child"></div>
            <div style="width: 100px;height: 100px;background: brown" @click="child"></div>

        </div>

        <h2>once事件修飾符</h2>
        <!--once事件修飾符：作用：只能讓標簽上的對應事件執行一次-->
        <input type="button" value="點我" @click.once="clickMe">
    </div>
</body>
</html>
<!--引入vue的js檔案-->
<script src="js/vue.js"></script>
<script>
    var app = new Vue({
        el:"#app",  //代表vue實體作用范圍
        data:{      //在vue實體中定義一系列資料
            msg:"事件修飾符",

        },
        methods:{ //在vue實體中定義相關函式
            parent(){
                alert("parent div event");
            },
            child(){
                alert("child div event");
            },
            search(){
                alert("a click event");
            },
            clickMe(){
                alert("click me!!!")
            }
        },
        computed:{  //用來書寫計算相關方法  計算屬性

        }
    });
</script>

10、按鍵修飾符

作用: 用來與鍵盤中按鍵事件系結在一起,用來修飾特定的按鍵事件的修飾符

# 按鍵修飾符
	.enter
	.tab
	.delete (捕獲“洗掉”和“退格”鍵)
	.esc
	.space
	.up
	.down
	.left
	.right

10.1 enter 回車鍵

用來在觸發回車按鍵之后觸發的事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue系列課程</title>
</head>
<body>
    <div id="app">

        <h1>{{msg}}</h1>
        <!--
            按鍵修飾符：作用:用來和鍵盤上事件(keyup,keydown......)進行連用，用來修飾鍵盤上特定的按鍵來觸發對應的事件
            .enter
            .tab
            .delete (捕獲“洗掉”和“退格”鍵)
            .esc
            .space
            .up
            .down
            .left
            .right
        -->
        <!--.enter 回車按鍵修飾符-->
        <input type="text" v-model="msg" @keyup.enter="test">
    </div>
</body>
</html>
<!--引入vue的js檔案-->
<script src="js/vue.js"></script>
<script>
    var app = new Vue({
        el:"#app",  //代表vue實體作用范圍
        data:{      //在vue實體中定義一系列資料
            msg:"按鍵修飾符",

        },
        methods:{ //在vue實體中定義相關函式
            test(){
                console.log("test");
            }
        },
        computed:{  //用來書寫計算相關方法  計算屬性

        }
    });
</script>

10.2 tab 鍵

用來捕獲到tab鍵執行到當前標簽是才會觸發

<input type="text" @keyup.tab="test">

11、Axios 基本使用

11.1、引言

Axios 是一個異步請求技術,核心作用就是用來在頁面中發送異步請求,并獲取對應資料在頁面中渲染頁面區域更新技術 Ajax

11.2、Axios 第一個程式

中文網站:https://www.kancloud.cn/yunye/axios/234845

安裝: https://unpkg.com/axios/dist/axios.min.js

11.2.1、GET方式的請求

后端代碼：

package com.xiao.controller;

import com.xiao.entity.User;
import org.springframework.web.bind.annotation.*;

import javax.websocket.server.PathParam;
import java.util.Date;

@RestController //代表介面中回傳的都是json格式資料
@CrossOrigin //運行所有的請求 所有域訪問 解決：跨域問題
public class AdminController {

    //user介面

    //rest介面 url/11/
    @GetMapping("user/{id}")
    public User FindUserById(@PathVariable("id") Integer id){
        System.out.println("id: "+id);
        System.out.println("user...");
        return new User(id,"小李",23,new Date());
    }

    //queryString介面 url?id=11
    @GetMapping("user")
    public User user(@RequestParam("id") Integer id){
        System.out.println("id: "+id);
        System.out.println("user...");
        return new User(id,"小陳",23,new Date());
    }

    //測驗介面
    @GetMapping("demo")

    public String demo(){
        System.out.println("demo...");
        return "demo ok";
    }
}

前端代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue系列課程</title>
</head>
<body>
    <div id = "app">
        <h1>axios的GET方式請求</h1>
    </div>
</body>
</html>
<!--引入axios異步請求核心js檔案-->
<script src="js/axios.min.js"></script>
<!--測驗異步請求-->
<script>

    //發送axios 的GET方式請求
    /*axios.get("http://localhost:8989/user?id=11").then(function (res){
        console.log(res.data);
        console.log(res.data.id);
        console.log(res.data.name);
        console.log(res.data.age);
        console.log(res.data.bir);
    });*/

    //es6中簡化寫法function(){}簡化寫法java中lambada運算式   ()=>
    axios.get("http://localhost:8989/user/11").then((res)=>{
        console.log(res.data);
        console.log(res.data.id);
        console.log(res.data.name);
        console.log(res.data.age);
        console.log(res.data.bir);
    });


    /*axios.get("http://localhost:8989/demo").then(function (resonse){ //then 正確請求回傳處理結果
        console.log(resonse.data);
    }).catch(function (error){  //請求地址值出錯的處理結果
        console.log(error)
    });   //發送異步請求方式*/
</script>

11.2.2 POST方式請求

后端代碼：

//定義post介面
@PostMapping("user")
public Map<String,Object> save(@RequestBody User user){ //@RequestBody 將json格式資料轉換成java物件
    System.out.println("user:" + user);
    HashMap<String,Object> result = new HashMap<>();
    result.put("success",true);
    result.put("msg","添加成功~~");
    return result;
}

前端代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue系列課程</title>
</head>
<body>
    <div id = "app">
        <h1>axios的POST方式請求</h1>
    </div>
</body>
</html>
<!--引入axios異步請求核心js檔案-->
<script src="js/axios.min.js"></script>
<!--測驗異步請求-->
<script>
    //發送post方式請求
    //引數1: url地址 引數2: 請求資料
    axios.post("http://localhost:8989/user",{
        name:"小李",
        age:23,
        bir:"2012-02-05"
    }).then((res)=>{
        console.log(res.data);
    });

</script>

11.2.3 axios并發請求

并發請求: 將多個請求在同一時刻發送到后端服務介面,最后在集中處理每個請求的回應結果

//axios并發請求
//定義demo請求
function demo(){
    return axios.get("http://localhost:8989/demo");
}
//定義user請求
function user(){
    return axios.get("http://localhost:8989/user?id=11");
}
axios.all([demo(), user()]).then(axios.spread((demoRes,useRes)=>{ //并發請求
    console.log(demoRes);
    console.log(useRes);
}));

11.2.4 攔截器

在這里插入圖片描述

12、Vue 生命周期

Vue 實體生命周期 ===> java 物件生命周期(初始化階段運行階段銷毀階段) 生命周期鉤子 ====> 生命周期函式

Vue實體從創建到銷毀程序中自動觸發一系列函式 ====> Vue生命周期函式(鉤子)

Vue生命周期總結

# 
- 1.初始化階段
        beforeCreate(){ //1.生命周期中第一個函式,該函式在執行時Vue實體僅僅完成了自身事件的系結和生命周期函式的初始化作業,Vue實體中還沒有 Data el methods相關屬性
        console.log("beforeCreate: "+this.msg);
        },
        created(){ //2.生命周期中第二個函式,該函式在執行時Vue實體已經初始化了data屬性和methods中相關方法
        console.log("created: "+this.msg);
        },
        beforeMount(){//3.生命周期中第三個函式,該函式在執行時Vue將El中指定作用范圍作為模板編譯
        console.log("beforeMount: "+document.getElementById("sp").innerText);
        },
        mounted(){//4.生命周期中第四個函式,該函式在執行程序中,已經將資料渲染到界面中并且已經更新頁面
        console.log("Mounted: "+document.getElementById("sp").innerText);
        }

- 2.運行階段
        beforeUpdate(){//5.生命周期中第五個函式,該函式是data中資料發生變化時執行 這個事件執行時僅僅是Vue實體中data資料變化頁面顯示的依然是原始資料
        console.log("beforeUpdate:"+this.msg);
        console.log("beforeUpdate:"+document.getElementById("sp").innerText);
        },
        updated(){    //6.生命周期中第六個函式,該函式執行時data中資料發生變化,頁面中資料也發生了變化  頁面中資料已經和data中資料一致
        console.log("updated:"+this.msg);
        console.log("updated:"+document.getElementById("sp").innerText);
        },

- 3.銷毀階段
        beforeDestory(){//7.生命周期第七個函式,該函式執行時,Vue中所有資料 methods componet 都沒銷毀
        },
        destoryed(){ //8.生命周期的第八個函式,該函式執行時,Vue實體徹底銷毀
        }

代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue系列課程</title>
</head>
<body>
    <div id = "app">
        <h1 id="sp">{{msg}}</h1>

        <input type="button" value="修改資料" @click="changeData">
        <!--
            vue生命周期分為三個階段：
                1.初始化階段
                     beforeCreate(){ //1.生命周期中第一個函式,該函式在執行時Vue實體僅僅完成了自身事件的系結和生命周期函式的初始化作業,Vue實體中還沒有 Data el methods相關屬性
                        console.log("beforeCreate: "+this.msg);
                    },
                    created(){   //2.生命周期中第二個函式,該函式在執行時Vue實體已經初始化了data屬性和methods中相關方法
                        console.log("created: "+this.msg);
                    },
                    beforeMount(){//3.生命周期中第三個函式,該函式在執行時Vue將El中指定作用范圍作為模板編譯
                        console.log("beforeMount: "+document.getElementById("sp").innerText);
                    },
                    mounted(){    //4.生命周期中第四個函式,該函式在執行程序中,已經將資料渲染到界面中并且已經更新頁面
                        console.log("Mounted: "+document.getElementById("sp").innerText);
                    }
                2.運行階段
                    beforeUpdate(){//5.生命周期中第五個函式,該函式是data中資料發生變化時執行 這個事件執行時僅僅是Vue實體中data資料變化頁面顯示的依然是原始資料
                        console.log("beforeUpdate:"+this.msg);
                        console.log("beforeUpdate:"+document.getElementById("sp").innerText);
                    },
                    updated(){    //6.生命周期中第六個函式,該函式執行時data中資料發生變化,頁面中資料也發生了變化  頁面中資料已經和data中資料一致
                        console.log("updated:"+this.msg);
                        console.log("updated:"+document.getElementById("sp").innerText);
                    },
                3.銷毀階段
                    beforeDestory(){//7.生命周期第七個函式,該函式執行時,Vue中所有資料 methods componet 都沒銷毀
                        },
                    destoryed(){ //8.生命周期的第八個函式,該函式執行時,Vue實體徹底銷毀
                    }
        -->
    </div>
</body>
</html>
<script src="js/vue.js"></script>
<script>
    var app = new Vue({
        el: "#app",
        data:{
            msg:"vue 生命周期",
        },
        methods:{
            changeData(){
                this.msg="vue 生命周期講解";
            }
        },
        computed:{},

        beforeCreate(){ //1.生命周期中第一個函式,該函式在執行時Vue實體僅僅完成了自身事件的系結和生命周期函式的初始化作業,Vue實體中還沒有 Data el methods相關屬性
            console.log("beforeCreate: "+this.msg);
        },
        created(){   //2.生命周期中第二個函式,該函式在執行時Vue實體已經初始化了data屬性和methods中相關方法
            console.log("created: "+this.msg);
        },
        beforeMount(){//3.生命周期中第三個函式,該函式在執行時Vue將El中指定作用范圍作為模板編譯
            console.log("beforeMount: "+document.getElementById("sp").innerText);
        },
        mounted(){    //4.生命周期中第四個函式,該函式在執行程序中,已經將資料渲染到界面中并且已經更新頁面
            console.log("Mounted: "+document.getElementById("sp").innerText);
        },
        beforeUpdate(){//5.生命周期中第五個函式,該函式是data中資料發生變化時執行 這個事件執行時僅僅是Vue實體中data資料變化頁面顯示的依然是原始資料
            console.log("beforeUpdate:"+this.msg);
            console.log("beforeUpdate:"+document.getElementById("sp").innerText);
        },
        updated(){    //6.生命周期中第六個函式,該函式執行時data中資料發生變化,頁面中資料也發生了變化  頁面中資料已經和data中資料一致
            console.log("updated:"+this.msg);
            console.log("updated:"+document.getElementById("sp").innerText);
        },
        beforeDestory(){//7.生命周期第七個函式,該函式執行時,Vue中所有資料 methods componet 都沒銷毀
        },
        destoryed(){ //8.生命周期的第八個函式,該函式執行時,Vue實體徹底銷毀
        }
    });
</script>

在這里插入圖片描述

轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/290928.html

標籤：其他

上一篇：Git 工具，看這篇保姆式的教程就夠了

下一篇：25個 Vue 技巧，開發了5年了，有些竟然還是第一次見！

【萬字長文】 Vue全家桶從入門到實戰，超詳細筆記整理 ( 一 ) （建議收藏）

目錄

1、Vue 引言

2、Vue入門

2.1、下載Vuejs

2.2、Vue第一個入門應用

3、v-text和v-html

3.1、v-text

3.2、v-html

3.3、v-text和v-html對比

4、vue中事件系結(v-on)

4.1、系結事件基本語法

4.2、Vue中事件的簡化語法

4.3、Vue事件函式兩種寫法

4.4、Vue事件引數傳遞

5、v-show v-if v-bind

5.1、v-show、v-if使用

5.2、v-show、v-if小案例

5.3、v-bind

5.4、v-bind 簡化寫法

5.5、v-bind案例

6、v-for的使用

7、v-model 雙向系結

7.1、v-model

7.2、兩個案例

8、計算屬性

9、事件修飾符

9.1 stop事件修飾符

9.2 prevent 事件修飾符

9.3 self 事件修飾符

9.4 once 事件修飾符

10、按鍵修飾符

10.1 enter 回車鍵

10.2 tab 鍵

11、Axios 基本使用

11.1、引言

11.2、Axios 第一個程式

11.2.1、GET方式的請求

11.2.2 POST方式請求

11.2.3 axios并發請求

11.2.4 攔截器

12、Vue 生命周期