*.vue 文件，这个文件会被 vue-loader（如果你用的是 Webpack 的话）加工处理。
其中 <template> 部分会被 vue-template-compiler 编译成 render 函数，并插入到export default { render() }中被导出的 JS 对象中；<style> 部分会被转换成样式函数或提取为独立 CSS 文件（取决于你的 Webpack 配置）。所以在尽管<template>、<style>不在export default中仍然会被导出。
？？？为什么不可以用export 代替export default：
vue-loader 只会处理 <script> 部分默认导出的内容（也就是 export default 出来的内容）。所以你修改了导出的类型变成export就不可以。
1.Vue的生命周期可以划分为四个阶段：
create 阶段： vue实例被创建；
mount 阶段： vue实例被挂载到真是的DOM节点；
update 阶段：当vue实例里面的data数据变化时，触发组件的重新渲染；
destroy 阶段：vue实例被销毁。
beforeCreate - 加入loading事件
created - 结束loading
beforemount - 发起服务端请求，取数据
mounted - 根据请求数据，对页面DOM做些什么操作
2.生命周期小结
我们对上面的分析结果做个小结，此处的表格会多考虑两个方法（当有<keep-alive></keep-alive>组件时，生命周期会多出现一个activate阶段）。
created 组件实例创建完成。属性已绑定，但DOM还未产生。 data有值了，$el属性还是undefined。
beforeMount 模板编译/挂载前。 $el是虚拟DOM。
mounted 模板编译/挂载后。 “虚拟”的dom节点被真实的dom节点替换，并将其插入到dom树中。此时可以获取到$el为真实的dom元素。
beforeUpdate 组件更新之前。 $el、data 的值都为新数据。
updated 组件更新之后。 $el、data 的值都为新数据。
activated for kepp-alive，组件被激活时调用。
deactivated for kepp-alive，组件被移除时调用。
beforeDestroy 组件销毁前嗲用。此时实例仍可用。 $el、data 都有值。实例绑定的事件还存在。
destroyed 组件销毁后调用。 $el、data 虽然都有值。但实例绑定的事件和子组件都没有了。
vue3.页面模板
-
vscode内选择首选项>用户代码片段
image.png -
打出vue.json>并将以下代码复制进去就可以了
image.png
vue.json内代码
// {
// // 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"
// // }
// }
// 自己可以编写的vue模板格式（用""引住，一行一个逗号，）
// {
// "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"
}
}
// // 出来后
// <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中打出一个vue就可以出来你所设定的模板
image.png
