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}} {{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標籤即可。