二临庇、Vue語法基礎(chǔ)
1零截、Vue中的應(yīng)用和組件的基本部分
代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>基礎(chǔ)語法</title>
<!-- 引入Vue庫 -->
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="root"></div>
</body>
<script>
// 創(chuàng)建一個 vue 應(yīng)用實(shí)例麸塞，給這個實(shí)例起一個名字，叫做“app”
// 傳入了一個參數(shù)涧衙，這個參數(shù)使用 {} 括起來哪工，表示最外層應(yīng)該如何展示
// 也就是 vue 應(yīng)用的根組件
// mvvm 設(shè)計(jì)模式：m -> model 數(shù)據(jù) view -> 視圖 vm -> 視圖數(shù)據(jù)連接層
// 下面的 data 就是數(shù)據(jù)奥此，是我們自己定義的
// 下面的 template 就是視圖模板，也是我們自己定義的
// vm 視圖數(shù)據(jù)連接層是 vue 組件做的
const app = Vue.createApp({
data(){
return{
message: 'hello world'
}
},
template: '<div>{{message}}</div>'
});
// 掛載（綁定）到 id 為 root 的標(biāo)簽
// 這行代碼的返回值就是 vue 應(yīng)用的根組件
// 這里的 vm 就是應(yīng)用的根組件
const vm = app.mount('#root');
</script>
</html>
運(yùn)行結(jié)果
image-20210612112626889.png
2雁比、理解Vue的生命周期函數(shù)*
生命周期圖
圖片來自官方文檔稚虎，注釋是本人參考網(wǎng)上解讀和英文含義寫的，不是特別專業(yè)偎捎，僅作參考蠢终！
lifecycle.png
代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>基礎(chǔ)語法</title>
<!-- 引入Vue庫 -->
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="root"></div>
</body>
<script>
const app = Vue.createApp({
data(){
return{
message: 'hello world'
}
},
// 創(chuàng)建實(shí)例之前執(zhí)行的函數(shù)
beforeCreate(){
console.log(this.message, "beforeCreate");
},
// 創(chuàng)建實(shí)例之后執(zhí)行的函數(shù)
created(){
console.log(this.message, "created");
},
// 實(shí)例創(chuàng)建之后，掛載之前執(zhí)行
beforeMount(){
console.log(document.getElementById("root").innerHTML,"beforeMount");
},
// 掛載之后執(zhí)行茴她，此時數(shù)據(jù)已經(jīng)被綁定到視圖上了
mounted(){
console.log(document.getElementById("root").innerHTML,"mounted");
},
// 當(dāng)數(shù)據(jù)發(fā)生變化時寻拂，頁面更新前執(zhí)行的函數(shù)
beforeUpdate(){
console.log(document.getElementById("root").innerHTML,"beforeUpdate");
},
// 當(dāng)數(shù)據(jù)發(fā)生變化時，頁面更新后執(zhí)行的函數(shù)
updated(){
console.log(document.getElementById("root").innerHTML,"updated");
},
// 當(dāng) vue 應(yīng)用失效時丈牢，且在被銷毀前兜喻，執(zhí)行的函數(shù)
beforeUnmount(){
console.log(document.getElementById("root").innerHTML,"updated");
},
// 當(dāng) vue 應(yīng)用失效時，且在被銷毀后赡麦，執(zhí)行的函數(shù)
unmounted(){
console.log(document.getElementById("root").innerHTML,"updated");
},
template: '<div>{{message}}</div>'
});
const vm = app.mount('#root');
</script>
</html>
運(yùn)行結(jié)果
image-20210612132524993.png
關(guān)于模板
參考生命周期圖解的7和8朴皆，如果有模板就去編譯，沒有就將所綁定的標(biāo)簽作為模板泛粹，因此可以這樣寫遂铡！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>基礎(chǔ)語法</title>
<!-- 引入Vue庫 -->
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="root">
<!-- 將頁面內(nèi)容寫到這里 -->
<div>{{message}}</div>
</div>
</body>
<script>
const app = Vue.createApp({
data(){
return{
message: 'hello world'
}
}
// 刪除這里的模板
// template: '<div>{{message}}</div>'
});
const vm = app.mount('#root');
</script>
</html>
Vue3的生命周期函數(shù)圖
de01e730e563406cbf3399861fa23aa4tplv-k3u1fbpfcp-zoom-1.png
Vue3全部的生命周期鉤子與Vue2比較
我們可以看到
beforeCreate和created被setup替換了（但是 Vue3 中仍然可以使用， 因?yàn)?Vue3 是向下兼容的晶姊， 也就是實(shí)際使用的是 vue2 的）扒接。其次，鉤子命名都增加了on; Vue3.x 還新增用于調(diào)試的鉤子函數(shù)onRenderTriggered和onRenderTricked
3eadd1ec0ac94343951ae2453cf41fcetplv-k3u1fbpfcp-zoom-1.png
