vue 生命周期
作者:互联网
<!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>Document</title> <script src="https://unpkg.com/vue@next"></script> </head> <body> <div id="app"></div> </body> <script> //生命周期函数 在某一时刻会自动执行的函数 const app = Vue.createApp({ data () { return { message:'ding.com'//1.在这里定义了一个数据,也就是model } }, methods: { handleItemClick(){ this.message= this.message=='ding.com'?'丁焕轩':'ding.com' } }, beforeCreate () {//在实例生成之前会自动执行的函数 console.log('beforeCreate') }, created () {//在实例生成之后会自动执行的函数 console.log('created') }, beforeMount () {//在模板渲染完成之前执行函数 console.log('beforeMount') }, mounted () {//在模板渲染完成之后执行的函数 console.log('mounted') }, beforeUpdate () {//当data中数据变更时,会立即自动执行函数 console.log('beforeUpdate') console.log(document.getElementById('app').innerHTML) }, updated () {//当data中数据变更时,页面重新渲染完成后,会立即自动执行函数 console.log('updated') console.log(document.getElementById('app').innerHTML) }, beforeUnmount() {//当vue应用失效时,会自动执行的函数 console.log('beforeUnmount') console.log(document.getElementById('app').innerHTML) }, unmounted(){//当Vue应用失效时,且DOM完全销毁之后执行 console.log('Unmounted') console.log(document.getElementById('app').innerHTML) }, created() { console.log('components created') }, template:"<h2 v-on:click='handleItemClick'>{{message}}</h2>"//2.模板,view //定义后,vue自动关联,vm }) const vm = app.mount("#app") // console.log(vm)//mvvm m:model v:view vm:ViewModel </script> </html>
标签:生命周期,console,log,app,innerHTML,vue,执行,函数 来源: https://www.cnblogs.com/xbding/p/16249376.html