<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Vue实例生命周期函数(自动执行)</title> <script src="vue.js"></script> </head> <body> <div id="app"></div> <script> var vm = new Vue({ el: '#app', template: "<div>{{test}}</div>", data: { test: "hello world" }, beforeCreate: function () { console.log('beforeCreate');//初始化之前自动调用 }, created: function () { console.log('created');//初始化完成自动调用 }, beforeMount: function () { console.log(this.$el);//没有渲染页面之前执行 console.log('beforeMount'); }, mounted: function () { console.log(this.$el);//进行页面渲染之后执行 console.log('mounted'); }, beforeDestroy: function () { console.log('beforeDestroy');//只有调用 vm.$destory() 时候才会执行 }, destroyed: function () { console.log('destroyed');//完成 vm.$destory() 时候才会执行 }, beforeUpdate: function () { console.log('beforeUpdate');//修改数据之前执行 }, updated: function () { console.log('updated');//修改数据完成之后执行 } }) </script> </body> </html>
Vue实例生命周期函数
最新推荐文章于 2022-09-24 03:56:13 发布