*.vue 文件，這個(gè)文件會(huì)被 vue-loader（如果你用的是 Webpack 的話(huà)）加工處理液兽。
其中 <template> 部分會(huì)被 vue-template-compiler 編譯成 render 函數(shù)脸秽，并插入到export default { render() }中被導(dǎo)出的 JS 對(duì)象中儒老；<style> 部分會(huì)被轉(zhuǎn)換成樣式函數(shù)或提取為獨(dú)立 CSS 文件（取決于你的 Webpack 配置）。所以在盡管<template>记餐、<style>不在export default中仍然會(huì)被導(dǎo)出驮樊。
？片酝？囚衔？為什么不可以用export 代替export default：
vue-loader 只會(huì)處理 <script> 部分默認(rèn)導(dǎo)出的內(nèi)容（也就是 export default 出來(lái)的內(nèi)容）。所以你修改了導(dǎo)出的類(lèi)型變成export就不可以雕沿。
1.Vue的生命周期可以劃分為四個(gè)階段：
create 階段： vue實(shí)例被創(chuàng)建练湿；
mount 階段： vue實(shí)例被掛載到真是的DOM節(jié)點(diǎn)；
update 階段：當(dāng)vue實(shí)例里面的data數(shù)據(jù)變化時(shí)晦炊，觸發(fā)組件的重新渲染鞠鲜；
destroy 階段：vue實(shí)例被銷(xiāo)毀宁脊。
beforeCreate - 加入loading事件
created - 結(jié)束loading
beforemount - 發(fā)起服務(wù)端請(qǐng)求，取數(shù)據(jù)
mounted - 根據(jù)請(qǐng)求數(shù)據(jù)贤姆，對(duì)頁(yè)面DOM做些什么操作
2.生命周期小結(jié)
我們對(duì)上面的分析結(jié)果做個(gè)小結(jié)榆苞，此處的表格會(huì)多考慮兩個(gè)方法（當(dāng)有<keep-alive></keep-alive>組件時(shí)，生命周期會(huì)多出現(xiàn)一個(gè)activate階段）霞捡。
created 組件實(shí)例創(chuàng)建完成坐漏。屬性已綁定，但DOM還未產(chǎn)生碧信。 data有值了赊琳，$el屬性還是undefined。
beforeMount 模板編譯/掛載前砰碴。 $el是虛擬DOM躏筏。
mounted 模板編譯/掛載后。 “虛擬”的dom節(jié)點(diǎn)被真實(shí)的dom節(jié)點(diǎn)替換呈枉，并將其插入到dom樹(shù)中趁尼。此時(shí)可以獲取到$el為真實(shí)的dom元素。
beforeUpdate 組件更新之前猖辫。 $el酥泞、data 的值都為新數(shù)據(jù)。
updated 組件更新之后啃憎。 $el芝囤、data 的值都為新數(shù)據(jù)。
activated for kepp-alive辛萍，組件被激活時(shí)調(diào)用悯姊。
deactivated for kepp-alive，組件被移除時(shí)調(diào)用叹阔。
beforeDestroy 組件銷(xiāo)毀前嗲用挠轴。此時(shí)實(shí)例仍可用。 $el耳幢、data 都有值。實(shí)例綁定的事件還存在欧啤。
destroyed 組件銷(xiāo)毀后調(diào)用睛藻。 $el、data 雖然都有值邢隧。但實(shí)例綁定的事件和子組件都沒(méi)有了店印。
vue3.頁(yè)面模板
-
vscode內(nèi)選擇首選項(xiàng)>用戶(hù)代碼片段
image.png -
打出vue.json>并將以下代碼復(fù)制進(jìn)去就可以了
image.png
vue.json內(nèi)代碼
// {
// // Place your snippets for vue here. Each snippet is defined under a snippet name and has a prefix, body and
// // description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
// // $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the
// // same ids are connected.
// // Example:
// // "Print to console": {
// // "prefix": "log",
// // "body": [
// // "console.log('$1');",
// // "$2"
// // ],
// // "description": "Log output to console"
// // }
// }
// 自己可以編寫(xiě)的vue模板格式（用""引住，一行一個(gè)逗號(hào)倒慧，）
// {
// "Print to console": {
// "prefix": "vue",
// "body": [
// "<template>",
// " <div></div>",
// "</template>",
// "",
// "<script>",
// "export default {",
// " components :{",
// "},",
// " name: '',",
// " data() {",
// " return {",
// " };",
// " },",
// " computed:{",
// " },",
// " watch:{",
// " },",
// " methods: {},",
// "};",
// "</script>",
// "",
// "<style scoped>",
// "",
// "</style>",
// "",
// ],
// "description": "Log output to console"
// }
//}
{
"Print to console": {
"prefix": "vue",
"body": [
"<template>",
"<div>",
"",
"</div>",
"</template>",
"",
"<script>",
"export default {",
"components :{",
"},",
"name:'',",
"data(){",
"return{",
"",
"}",
"},",
"computed:{",
"",
"},",
"watch:{ ",
"",
"},",
"methods:{",
"",
"},",
"beforeCreate(){",
"",
"},",
"created(){",
"",
"},",
"beforeMount(){",
"",
"},",
"mounted(){",
"",
"},",
"beforeUpdate(){",
"",
"},",
"updated(){",
"",
"},",
"beforeDestroy(){",
"",
"},",
"distroyed(){",
"",
"}",
"}",
"</script>",
"",
"<style lang='' scoped>",
"",
"</style>",
],
"description": "Log output to console"
}
}
// // 出來(lái)后
// <template>
// <div>
// </div>
// </template>
// <script>
// export default {
// components: {},
// name: "",
// data() {
// return {};
// },
// computed: {},
// watch: {},
// methods: {},
// beforeCreate() {},
// created() {},
// beforeMount() {},
// mounted() {},
// beforeUpdate() {},
// updated() {},
// beforeDestroy() {},
// distroyed() {}
// };
// </script>
// <style lang='' scoped>
// </style>
-
這樣在.vue中打出一個(gè)vue就可以出來(lái)你所設(shè)定的模板
image.png
