1. 程式人生 > 實用技巧 >Vue筆記

Vue筆記

課程來源:b站搜尋程式設計不良人。

1 vue介紹

# Vue是一款**漸進式**的框架,它致力於用更簡單的API來實現資料的雙向繫結。

# 作者是國內的:**尤餘溪**

# Vue的兩個核心點:
	1: 響應式資料綁定當資料發生變化的時候,檢視自動更新,即雙向資料同步,原理利用了ES6中的 Object.definedProperty 中的setter/getter 代理資料,監控對資料的操作。
	2: 組合的檢視元件即頁面最終對映為一個元件樹,採用樹形資料結構進行設計,方便維護,重用。

2 vue入門案例

2-1 下載

有適用於開發環境和生產環境的兩種檔案(開發環境沒壓縮,更多的提示,生產環境壓縮了,也去除了提示):

開發版,包含了有幫助的命令列警告:
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
生產版,優化了尺寸和速度:
	<script src="https://cdn.jsdelivr.net/npm/vue"></script>

2-2 HelloWorld

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
            <h1>{{ helloMsg }}</h1>
            <h1>{{ helloMsg2 }}</h1>
    </div>    
</body>
<!-- 引入Vue.js,也可以使用CDN引入 -->
<script src="./js/vue.js"></script>
<script>
    const vue = new Vue({
        el: "#app",
        data: {
            helloMsg: "HelloWorld!",
            helloMsg2: "我的第一個Vue程式碼"
        }
    });
</script>
</html>

解釋:

# 我們先是new了一個Vue,代表我們要使用Vue,然後傳入的引數:
	{{}}:插值表示式,Vue渲染頁面以後,會將插值表示式的內容替換成我們的變數名的值。
	屬性el:代表我們需要接管的區域,一般都是一個大的div,裡面可以使用任意選擇器,id選擇器、類選擇器等等都可以。如果我們的插值表示式書寫的地方不在el指向的範圍的話,該插值表示式不會被解析。
	屬性data:我們定義的需要被使用的資料,可以是任意型別。

3 v-text和v-html

3-1 v-text:

v-text的作用是從vue例項的data屬性中取出資料渲染到指定標籤中

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-text的使用</title>
</head>
<body>
    <div id="app">
        {{msg1}}
        <h1 v-text="msg2"></h1>
    </div>
</body>
<script src="./js/vue.js"></script>
<script>
    const vue = new Vue({
        el: "#app",
        data:{
            msg1: "我是資料1哦",
            msg2: "我是資料2哦"
        }
    });
</script>
</html>

解釋:

# v-text直接依附在標籤上,作用就是會將資料覆蓋掉該標籤中的原內容。
# 那麼v-text和{{}}都可以獲取data中的資料並填充,那他們的區別是什麼?
	1: v-text是依附在標籤上,{{}}是隨處都可使用
	2: v-text不會出現閃爍的問題,{{}}會。
		什麼是閃爍問題:
			假如我們的網上很慢,然後網頁開啟後js還沒有下載完,那麼這個時候{{}}這個插值表示式也沒有被解析,那麼在頁面上呈現出來的樣子就是”{{}}“,這樣給使用者的體驗不好,然後當我們使用v-text的時候,哪怕js沒有下載完,也不會在頁面上出現類似於插值表示式這種的東西。
			這個情況也可以模擬,例如谷歌瀏覽器:f12->點選network->點選network下的Online並切換選擇為Slow 3G,這樣網速就會被限制為很慢的3G,然後ctrl+shift+R強制重新整理,這樣你就能看見網速慢的情況下,插值表示式未被渲染的情況了,這就是插值表示式的閃爍問題。

3-2 v-html

v-html和v-text功能一樣,唯一的不同就是v-html可以將資料解析為html

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-html</title>
</head>
<body>
    <div id="app">
        <h1>{{testMsg}}</h1>
        <h1 v-text="testMsg"></h1>
        <h1 v-html="testMsg"></h1>
    </div>
</body>
<script src="./js/vue.js"></script>
<script>
    const vue = new Vue({
        el: "#app",
        data: {
            testMsg: "<a href='https://www.cnblogs.com/daihang2366'>去往部落格</a>"
        }
    });
</script>
</html>

解釋:

# 我們的資料testMsg是一個字串,但是實際的內容是一個a標籤,當我們使用插值表示式和v-text的時候,都是直接將testMsg當作一個普通的值,而v-html卻是將testMsg解析成了html標籤。

4 事件繫結,v-on

v-on繫結事件的基本用法,語法:v-on:事件名=函式名

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-on</title>
</head>
<body>
    <div id="app">
        <!-- 第一種寫法:v-on:事件名=函式名 -->
        <input type="button" value="    -    " v-on:click="changCount(1)"/>
        <br>
        <span v-text="count"></span>
        <br>
        <!-- 第二種寫法:@事件名=函式名 -->
        <input type="button" value="    +    " @click="changCount(-1)"/>
    </div>    
</body>
<script src="js/vue.js"></script>
<script>
    const app = new Vue({
        el:"#app",
        data:{
            count: 0,// 定義了一個數據
        },methods: {
            changCount:function(num){ // 定義了一個方法,vue中我們定義的方法都寫在methods中
                this.count += num;
            },changCount1(num){ // 定義方法的寫法除了上面的這種以外,還有下面的這種

            }
        },
    });
</script>
</html>

解釋:

# vue的事件繫結:
	1、比如在methods下定義方法
    2、書寫事件:第一種方法:v-on:方法名([引數,如果沒有引數大括號可以不加]),第二種寫法:@方法名([引數,如果沒有引數大括號可以不加])。這裡的引數可以是任意表達式。
        注:我們的事件繫結也可以直接書寫表示式。
    3、書寫監聽方法:第一種寫法:方法名:function(引數){方法體},第二種寫法:方法名(引數){方法體}

5 v-show v-if v-bind

5-1 v-show

v-show是用來控制該標籤是否顯示的。底層操作的是標籤的display=none/block

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-show</title>
</head>
<body>
    <div id="app">
        <h1 v-show="false">我被隱藏了,因為v-show的值是false</h1>
        <h1 v-show="isShow">我的顯示決定於isShow的值</h1>
        <input type="button" value="顯示/隱藏" @click="isShow=!isShow">
    </div>
</body>
<script src="./js/vue.js"></script>
<script>
    const vue = new Vue({
        el: "#app",
        data:{
            isShow: false
        },methods: {
            
        },
    });
</script>
</html>

解釋:

# 我們可以f12中檢視標籤的style屬性。

5-2 v-if

v-if也是用來控制標籤是否顯示的,但是和v-show不同的是,v-show是操作的元素的display,而v-if是直接操作dom。

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-if</title>
</head>
<body>
    <div id="app">
        <h1 v-if="false">我直接當場自閉,我沒了</h1>
        <h1 v-if="isShow">我的顯示與否取決於isShow</h1>
        <input type="button" value="切換顯示/隱藏" @click="isShow=!isShow">
    </div>
</body>
<script src="./js/vue.js"></script>
<script>
    const vue = new Vue({
        el: "#app",
        data: {
            isShow: false
        },methods: {
            
        },
    });
</script>
</html>

解釋:

# 我們f12後就會發現,當沒顯示的時候,直接dom元素直接沒了,然後再去對比v-show就能很清晰的知道他們二者的區別了。

5-3 v-bind

用來繫結標籤的屬性,達到快捷的更改屬性的操作,例如繫結元素的class,src等。

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-bind</title>
    <style type="text/css">
        .s1{
           color:red;
           font-size: 25px; 
        }
        .s2{
            color: aqua;
            font-size: 25px;
        }
    </style>
</head>
<body>
    <div id="app">
        <span v-bind:class="spanClass">我是文字,我會被動態的改變樣式,因為我使用v-bind綁定了class屬性</span>
        <span v-bind:class="spanClass">我是文字,我也會被動態的改變樣式,我使用了另一種繫結的語法,:class</span>
        <br>
        <input type="button" value="切換span的樣式" @click="changeSpanStyle">
    </div>
</body>
<script src="./js/vue.js"></script>
<script>
    const vue = new Vue({
        el: "#app",
        data: {
            spanClass: "s1"
        },methods: {
            changeSpanStyle(){
                this.spanClass = this.spanClass=='s1'?'s2':'s1'
            },
        }
    });
</script>
</html>

解釋:

# v-bind的作用就是繫結標籤的屬性,可以很便捷的更改其屬性的值。
    兩種寫法:
    	1> v-bind:屬性名="變數名"
        2> :屬性名="變數名"

6 v-for迴圈

可以遍歷物件、陣列等玩意的。

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-for</title>
</head>
<body>
    <div id="app">
        <h2>測試遍歷物件</h2>
        <ul>
            <li v-for="(value,key,index) in user">
                第:{{index+1}}個,key:{{key}},value:{{value}}
            </li>
        </ul>
        <hr>
        <h2>測試遍歷陣列</h2>
        <ul>
            <li v-for="item,index in arrays">
                第:{{index+1}}個,值為:{{item}}
            </li>
        </ul>
        <hr>
        <h2>測試遍歷陣列(內容為物件)</h2>
        <ul>
            <li v-for="user,index in users">
                第:{{index+1}}個,使用者名稱為:{{user.username}},名稱為:{{user.name}},密碼為:{{user.password}}
            </li>
        </ul>
        <hr>
    </div>
</body>
<script src="./js/vue.js"></script>
<script>
    const app = new Vue({
        el: "#app",
        data: {
            user: {username:"user1",name:"使用者1",password:"密碼1"},
            arrays: ["張三","李四","王麻子"],
            users: [
                {username:"user1",name:"使用者1",password:"密碼1"},
                {username:"user2",name:"使用者2",password:"密碼2"},
                {username:"user3",name:"使用者3",password:"密碼3"},
                {username:"user4",name:"使用者4",password:"密碼4"}
            ]
        },methods: {
            
        },
    });
</script>
</html>

解釋:

# 遍歷物件的時候:
    v-for="每一項的key,每一項的value,當前下標 in 變數名"
# 遍歷其他的時候:
    v-for="每一項的內容,當前下標 in 變數名"

7 v-model雙向繫結

雙向繫結的意思就是,繫結的標籤元素的值與data資料中的保持一致,data中更改後元素值就會更新,元素中值更新後data中資料也會更新,也就是達到他們會保持一致的這個特點,這就是雙向繫結。

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-mode</title>
</head>
<body>
    <div id="app">
        <h2 v-text="content"></h2>
        <input type="text" v-model="content">
    </div>    
</body>
<script src="./js/vue.js"></script>
<script>
    const vue = new Vue({
        el: "#app",
        data: {
            content: "內容"
        },methods: {

        },
    });
</script>
</html>

解釋:

# 1、v-model可以實現表單元素與data資料的雙向繫結。
# 2、v-model雙向繫結只能用於表單元素中。
# 3、直接在表單元素中應用v-model的時候,那麼繫結的就是元素的value屬性值.

7-1 v-model小案例:

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>記事本</title>
</head>
<body>
    <div id="app">
        <input type="text" placeholder="請輸入需要加入的內容" v-model="inputContent"> <input type="button" value="確定" @click="addContent"><br>
        <ul>
            <li v-for="info,index in infoList">{{index+1}} &nbsp;&nbsp;&nbsp; {{info.content}}</li>
        </ul>
        <span>總條數:<span v-text="infoList.length  ">14</span></span> 
        <input type="button" value="刪除所有資訊" @click="clearAllContent" v-show="infoList.length!=0">
    </div>
</body>
<script src="./js/vue.js"></script>
<script>
    const vue = new Vue({
        el: "#app",
        data: {
            infoList:[
                {content:"第一條記錄"},
                {content:"第二條記錄"}
            ],
            inputContent: ""
        },methods: {
            addContent(){
                this.infoList.push({content:this.inputContent});
                this.inputContent = '';
            },
            clearAllContent(){
                this.infoList = [];
            }
        },
    });
</script>
</html>

8 事件修飾符

官方解釋:

​ 在事件處理程式中呼叫 event.preventDefault()event.stopPropagation() 是非常常見的需求。儘管我們可以在方法中輕鬆實現這點,但更好的方式是:方法只有純粹的資料邏輯,而不是去處理 DOM 事件細節。

​ 為了解決這個問題,Vue.js 為 v-on 提供了事件修飾符。之前提過,修飾符是由點開頭的指令字尾來表示的。

大概的意思就是,例如冒泡這種,元素內的元素事件可以會冒泡到外層元素的事件中,或者我們a標籤點選事件的時候,並不想觸發它預設的跳轉的行為,這些在沒有vue之前,都需要自己手動的去設定,有了vue以後,vue提倡的是隻關心程式碼的資料、邏輯實現,而不需要去關心dom事件的繁雜細節,所以vue提供了事件修飾符來進行解決這些事情。

語法:@事件名.修飾符,注意,修飾符可以多個。

8-1 stop修飾符

用來阻止事件的冒泡

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>stop修飾符</title>
</head>
<body>
    <h1>阻止事件的冒泡</h1>
    <div id="app" style="width: 500px;height: 500px;" @click="divClick">
        <input type="button" value="點我呀" style="margin: 30px;" @click.stop="inputClick">
    </div>
</body>
<script src="./js/vue.js"></script>
<script>
    const vue = new Vue({
        el: "#app",
        data: {
        },methods: {
            divClick(){
                console.log("我是div,我被點了!");
            },inputClick(){
                console.log("我是input,我被點了");
            }
        },
    });
</script>
</html>

解釋:

# 如果我們沒有給input的click加上.stop的修飾符,那麼div的click也會被觸發

8-2 prevent修飾符

用來阻止標籤的預設行為的,比如說a標籤,你懂的。。

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>prevent修飾符</title>
</head>
<body>
    <div id="app">
        <a href="https://www.cnblogs.com/daihang2366" @click.prevent="aClick">我是a標籤</a>
    </div>
</body>
<script src="./js/vue.js"></script>
<script>
    const vue = new Vue({
        el: "#app",
        methods: {
            aClick(){
                alert("a標籤的事件被觸發!");
            }
        },
        
    });
</script>
</html>

解釋:

# 我們a標籤本身的行為就是跳轉到href的地址,而我們使用修飾符.prevent以後呢,那麼它的預設行為就會不生效了。

8-3 self修飾符

加了這個修飾符以後,那麼這個事件只會被元素自身觸發,其他的地方觸發是無效的,就比如一個大div和小div,他們都有自己的點選事件,那麼小div事件觸發後會冒泡到大div的事件中,那麼如果大div加上這個self修飾符以後,那麼大div的事件只能夠被大div自己所觸發,小div的冒泡到大div來這種啥情況的就沒用了。

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>self修飾符</title>
</head>
<body>
    <h1>阻止事件的冒泡</h1>
    <div id="app" style="width: 500px;height: 500px;" @click.self="divClick">
        <input type="button" value="點我呀" style="margin: 30px;" @click="inputClick">
    </div>
</body>
<script src="./js/vue.js"></script>
<script>
    const vue = new Vue({
        el: "#app",
        data: {
        },methods: {
            divClick(){
                console.log("我是div,我被點了!");
            },inputClick(){
                console.log("我是input,我被點了");
            }
        },
    });
</script>
</html>

解釋:

# 大的div的事件因為加了self修飾符,所以說它只關心由自己元素本身觸發事件,其他的一概不鳥。

8-4 once修飾符

這個其實最簡單,意思就是加了這個修飾符,那麼該事件就只會被觸發一次。

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>once修飾符</title>
</head>
<body>
    <div id="app">
        <h1><a href="javascript:;" @click.once="aClick">我只會被觸發一次</a></h1>
    </div>
</body>
<script src="./js/vue.js"></script>
<script>
    const vue = new Vue({
        el: "#app",
        data: {

        },methods: {
            aClick(){
                console.log("a標籤被觸發了哦!");
            }
        },
    });
</script>
</html>

解釋:

# 通過點選測試可以發現,我們的aClick方法只會被執行一次,因為我們的a標籤的click事件第一次被觸發後就不能再觸發了。

9 按鍵修飾符

就是現有一個onkeyup事件,然後可以指定哪個按鍵,比如說我們想要當回車鍵按下後觸發事件,當退格鍵按下後觸發事件,那麼這種就可以使用按鍵修飾符。

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>按鍵修飾符</title>
</head>
<body>
    <div id="app">
        <!-- 回車按鍵 -->
        <input type="text" placeholder="測試回車按鍵" @keyup.enter="input1Click">
        <!-- 退格按鍵 -->
        <input type="text" placeholder="測試退格按鍵" @keyup.delete="input2Click">
        <!-- ESC按鍵 -->
        <input type="text" placeholder="ESC退格按鍵" @keyup.esc="input3Click">
    </div>
</body>
<script src="./js/vue.js"></script>
<script>
    const vue = new Vue({
        el: "#app",
        data: {

        },methods: {
            input1Click(){
                console.log("你按下了回車!");
            },input2Click(){
                console.log("你按下了退格!");
            },input3Click(){
                console.log("你按下了ESC!");
            }
        },
    })
</script>
</html>

解釋:

# 按鍵修飾符有很多,常用的有:
    1 .enter
    2 .tab
    3 .delete (捕獲“刪除”和“退格”鍵)
    4 .esc
    5 .space
    6 .up
    7 .down
    8 .left
    9 .right	
當然我們也可以直接用按鍵對應的碼,例如@click.keyup.112="customClick"。
我們也可以自定義xxx碼對應為xxx按鍵,例如:Vue.config.keyCodes.f1 = 112,也可以簡寫為:v-on:keyup.f1 = 112
如果你想了解詳細點,可以看官網:https://cn.vuejs.org/v2/guide/events.html#%E6%8C%89%E9%94%AE%E4%BF%AE%E9%A5%B0%E7%AC%A6

10 Axios使用

Axios是一個非同步請求的庫。Vue的作者推薦使用Axios這個Http請求庫。

使用:

可以使用CDN,也可以直接下載下來後用
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

10-1 GET請求的方式:

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Axios</title>
</head>
<body>
</body>
<script src="./js/axios.min.js"></script>
<script>
    /**
     * axios.get("請求路徑",{請求引數}).then(function(response){請求正常響應資料的時候}).catch(function(error){請求失敗的時候});
     * 注意:
     *  請求引數如果沒有,可以不寫,直接只需要一個請求路徑
     *  
     */ 
    axios.get("http://127.0.0.1:8080/test1",{}).then(function(response){
        // 這裡拿到的response是一個封裝好了的物件,其中它的屬性data才是返回的資料。
        console.log(response);
    }).catch(function(error){
        // 這裡拿到的就是錯誤資訊。
        console.log("請求失敗,失敗資訊:"+error)
    });
    // 我們的回撥方法可以換一種寫法,例如這樣:axios.get("請求路徑",{請求引數}).then(response=>{請求正常響應資料的時候}).catch(error=>{請求失敗的時候})
    axios.get("http://127.0.0.1:8080/test1",{}).then(response=>{
        console.log(response);
    }).catch(error=>{
        console.log("請求失敗,失敗資訊:"+error)
    });
</script>
</html>

10-2 POST請求方式:

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>測試POST</title>
</head>
<body>
    
</body>
<script src="./js/axios.min.js"></script>
<script>
    axios.post("http://127.0.0.1:8080/test2",{
        username: "測試username",
        gender: "男",
        age: 18
    }).then(response=>{
        console.log(response.data);
    }).catch(error=>{
        console.log(error);
    })
</script>
</html>

解釋:

# 語法:
    axios.get/post.(url,param).then(function(response){}).catch(function(error){})
    url:字串,請求路徑
    param:請求引數,{}
	.then:正常情況的回撥
    .catch:正常

10-3 axios併發請求:

可以讓我們先儲存幾個請求,然後再一次性的全都請求出去。

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>併發請求</title>
</head>
<body>
    
</body>
<script src="./js/axios.min.js"></script>
<script>
    /*儲存test1的get請求*/
    function test1(){
        return axios.get("http://127.0.0.1:8080/test1",{});
    }
    /*儲存test2的post請求*/
    function test2(){
        return axios.post("http://127.0.0.1:8080/test2",{username:"測試使用者名稱",age:20});
    }
    /*開始執行併發的請求*/
    axios.all([test1(),test2()]).then(
        axios.spread(function(test1Response,test2Response){
            console.log(test1Response.data);
            console.log(test2Response.data);
        })
    );
</script>
</html>

解釋:

# test1方法返回test1這個請求的資訊,test2方法返回test2這個請求的資訊。
axios.all([需要執行的請求資訊]).then(
    axios.spread(function(響應資訊[有幾個請求則寫幾個引數]..){
        響應回撥方法體
    })
)
最後附上測試的後臺Controller:
package com.cqsw.demo.controller;

import com.cqsw.demo.utils.response.ComResponse;
import org.springframework.web.bind.annotation.*;

import java.util.Date;
import java.util.Map;
import java.util.Set;
/**
 * Vue測試介面哦
 */
@RestController
public class Test1Controller {

    @GetMapping("/test1")
    @CrossOrigin
    public ComResponse test1() {
        return ComResponse.buildSuccess("成功了!", new Date());
    }

    @PostMapping("/test2")
    @CrossOrigin
    public ComResponse test1(@RequestBody Map<String, String> map) {
        Set<String> keySet = map.keySet();
        for (String s : keySet) {
            System.out.println("key:" + s + "====value=" + map.get(s));
        }
        return ComResponse.buildSuccess("成功", null);
    }
}

11 生命週期

所謂生命週期,就是從出生到死亡的這個過程。那麼這裡呢就是說明Vue的生命週期

# 我們可以將這個生命週期拆分為三個階段:
	1- 初始化階段
	2- 執行階段
	3- 銷燬階段
# 那麼就按照這三個階段來說明這三個階段中的回撥方法:
	1- 初始化階段:
		# beforeCreate:Vue例項僅僅是初始化、綁定了事件、還沒有初始化el、data等資料的時候
		# created:完成了el、data等資料庫初始化,但是還沒有將資料渲染到dom中的時候
		# beforeMount:準備將資料渲染到dom中,但是還沒有渲染的時候
		# mounted:已經將資料渲染到dom中的時候
	2- 執行階段:
		# beforeUpdate:data中資料發生改變,重新渲染到dom中之前的時候
		# updated:data中改變的資料已經重新渲染到dom中之後的時候
	3- 銷燬階段:
		# beforeDestroy:例項銷燬之前的時候,在這個方法裡面使用vue完全可以
		# destroyed:例項被銷燬之後的時候,在這個方法裡面vue基本上不可用了
當然還有很多其他的回撥方法:
	例如activated(keep-alive快取元件啟用時)、deactivated(keep-alive快取元件停用時)、errorCaptured(發生錯誤的時候),詳細瞭解可以查詢官網:
	https://cn.vuejs.org/v2/api/#%E9%80%89%E9%A1%B9-%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9FE9%92%A9%E5%AD%90

程式碼示例:

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>測試生命週期</title>
</head>
<body>
    <div id="app">
        <h1 v-text="msg" id="h1Test"></h1>
        <button type="button" @click="changeValue">改變值</button>
    </div>
</body>
<script src="./js/vue.js"></script>
<script>
    const vue = new Vue({
        el: "#app",
        data:{
            msg: "測試Msg"
        },methods: {
            changeValue(){
                this.msg = "改變後的☞"
            }
        },beforeCreate() {
            console.log("beforeCreate:"+this.msg);
        },created() {
            console.log("beforeCreate:"+this.msg);
        },beforeMount() {
            console.log("beforeMount:"+document.getElementById("h1Test").innerText)
        },mounted() {
            console.log("mounted:"+document.getElementById("h1Test").innerText)
        },beforeUpdate() {
            console.log("beforeUpdate-data中的值:"+this.msg);
            console.log("beforeUpdate-標籤的內容:"+document.getElementById("h1Test").innerText)
        },updated() {
            console.log("updated-data中的值:"+this.msg);
            console.log("updated-標籤的內容:"+document.getElementById("h1Test").innerText)
        },beforeDestroy() {
            
        },destroyed() {
            
        },
    })
</script>
</html>

11-1 綜合前面所學vue知識做一個員工管理系統

https://files.cnblogs.com/files/daihang2366/vuedemo1.zip ,下載後匯入sql則可以執行

12 vue中元件(Component)

12-1 元件作用

元件是vue中可複用的例項,我們可以將整個專案劃分為不同的元件,然後多個元件組整一個完整的專案。

12-2 元件使用

12-2-1 全域性元件的註冊

全域性元件註冊後可以在vue例項的任意範圍內使用該元件

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <!-- 2、在vue範圍內使用該元件,該元件的名稱就是標籤名 -->
        <login></login>
        <user-add></user-add>
    </div>
</body>
<script src="./js/vue.js"></script>
<script>
    // 1、書寫全域性元件
    Vue.component('login',{
        template: '<div><h1>使用者登入</h1></div>'
    })
    // 測試駝峰命名
    Vue.component('userAdd',{
        template: '<div><h1>使用者新增</h1></div>'
    })
    const vue = new Vue({
        el: "#app",
        data: {},methods: {},created() {},
    });
</script>
</html>

解釋:

# 1:Vue.component用來開發全域性元件
    引數1:元件的名稱。
    引數2:元件的配置--template:''用來書寫元件的程式碼
    	注意:元件中的程式碼只能有一個根元素,且必須有一個根元素
# 2:使用時需要在Vue例項的範圍內使用,其他地方使用是無效的
# 3:如果元件註冊過程中,使用駝峰命名,例如你的元件名是這樣的:userAdd,那麼你使用的時候,就要變成這樣:user-add

12-2-2 區域性元件的註冊:

通過將元件註冊給Vue例項的一個components屬性來完成註冊,這樣不會對Vue造成累加

第一種開發方式:

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <login></login>
    </div>
</body>
<script src="./js/vue.js"></script>
<script>
    // 宣告元件為一個變數
    let login = {
        template: '<div><h1>登入元件</h1></div>'
    };
    const vue = new Vue({
        el: "#app",
        data:{},
        methods: {},
        components:{
           // 註冊元件到Vue例項的components中
            login:login // 前面的是元件名稱,後面的是元件的內容,我們這裡使用變數login
            // login,如果元件名和變數名一致,那麼只需要寫一個login就可以了。
        },
        created() {},
    });
</script>
</html>

第二種方式:

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <login></login>
    </div>   
    <!-- 使用template,可以定義元件的內容 -->
    <template id="loginCom">
        <div>
            <h1>使用者登入</h1>   
        </div>
    </template>
</body>

<script src="./js/vue.js"></script>
<script>
    // 宣告變數來儲存元件
    let login = {
        template: '#loginCom' // 我們在這裡不僅可以直接書寫html,還可以使用選擇器,例如id選擇器,類選擇器等
    }
    const vue = new Vue({
        el: "#app",
        data:{},methods:{},
        components:{
            login
        }
    });
</script>
</html>

解釋:

# 1:注意我們的元件是在Vue例項的components屬性中進行註冊的。
# 2:我們的元件實際程式碼除了直接在屬性template中書寫,還可以額外在html程式碼中寫一個template標籤,然後template屬性中使用id、class等選擇器指向該tempplate標籤即可。

12-3 Prop的使用

12-4 元件中定義資料和事件的使用

12-5 向子陣列中傳遞事件並在子元件中呼叫改變事件

13 vue中路由(Router)

13-1 路由是什麼

13-2 作用

13-3 使用路由

13-4 router-link使用

13-5 預設路由

13-6 路由中傳遞引數

13-7 巢狀路由

14 vue CLI腳手架

14-1 什麼是CLI

14-2 什麼是Vue CLI

14-3 Vue CLI優勢

14-4 Vue CLI安裝

14-5 第一個腳手架專案

14-6 如何開發腳手架

15 腳手架中安裝axios

15-1 安裝axios

16 vue CLI腳手架專案打包和部署