应用和组件基础概念
<body>
<div id="root"></div>
</body>
<script>
// createApp表示创建一个Vue应用,存储到app变量中
// 传入的参数表示应用最外层的组件应该如何展示
// vue面向对象编程参考了mvvm设计模式,m->moddle数据,v->view 视图,vm->viewModel 视图数据连接层
const app= Vue.createApp({
data(){
return{
message:'hello'
}
},
template:"<div>{{message}}</div>"
});
// vm代表的就是vue应用的根组件
const vm = app.mount('#root');
</script>
生命周期函数
生命周期函数:在某一时刻会自动执行的函数
- beforeCreate() 在实例生成之前会自动执行函数
- created() 在实例生成之后会自动执行函数
- beforeMount() 在组件内容被渲染到页面之前自动执行的函数
- mounted()在组件内容被渲染到页面之后自动执行的函数
- beforeUpdate() 当数据发生变化时自动执行的函数
- updated()当数据发生变化时,同时页面更新后,自动执行的函数
- beforeUnmount() 当vue应用失效时,自动执行的函数
- unmounted() 当vue应用失效,且dom完全销毁之后,自动执行的函数
整体代码如下:
<body>
<div id="root"></div>
</body>
<script>
const app= Vue.createApp({
data(){
return{
message:'hello'
}
},
// 在实例生成之前会自动执行函数
beforeCreate() {
console.log('beforeCreate');
},
// 在实例生成之后会自动执行函数
created() {
console.log('created');
},
// 在组件内容被渲染到页面之前自动执行的函数
beforeMount() {
console.log(document.getElementById('root').innerHTML,'beforeMount')
},
// 在组件内容被渲染到页面之后自动执行的函数
mounted() {
console.log(document.getElementById('root').innerHTML,'mounted')
},
// 当数据发生变化时自动执行的函数(可在控制台修改vm.$data.message数据进行测试)
beforeUpdate() {
console.log(document.getElementById('root').innerHTML,'beforeUpdate')
},
// 当数据发生变化时,同时页面更新后,自动执行的函数
updated() {
console.log(document.getElementById('root').innerHTML,'updated')
},
// 当vue应用失效时,自动执行的函数(可在控制台输入app.unmount()使vue失效进行测试)
beforeUnmount() {
console.log(document.getElementById('root').innerHTML,"beforeUnmount")
},
// 当vue应用失效,且dom完全销毁之后,自动执行的函数
unmounted() {
console.log(document.getElementById('root').innerHTML,"unmounted")
},
template:`
<div>
{{message}}
</div>
`
});
const vm = app.mount('#root');
</script>
输出结果1:
执行beforeMount()函数,组件内容未被渲染到页面上,页面内容(document.getElementById(‘root’).innerHTML)为空
执行mounted() 函数,组件内容已被渲染到页面上,页面内容(document.getElementById(‘root’).innerHTML)正常显示hello
输出结果2:
在控制台输入vm.$data.message = “ABC” ,将页面显示的数据 hello修改为 ABC
输出结果3:
在控制台输入app.unmount()使vue失效