11Vue的生命周期(钩子函数)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>v-text,v-html指令</title> <script src="node_modules/vue/dist/vue.js"></script> <link href="node_modules/layui-src/src/css/layui.css" rel="stylesheet"> <script src="node_modules/jquery/dist/jquery.js"></script> </head> <body> <div id="app"> <span id="name" v-text="name">李四</span> </div> <!--过滤器的使用 过滤器仅限使用{{}}渲染--> <script> var vm = new Vue({ el: '#app', data: { name:"张三", },beforeCreate() { //实例被创建出来还没有methods和data等数据，会执行它 alert("预创建Vue函数此时页面的name为"+ $("#name").html() +"此时Vue的name值"+this.name); },created() { //Vue实例创建完成，methods，data，filter等已经挂载到Vue实例上，使用data最早只能在这里操作 alert("预创建Vue函数此时页面的name为"+ $("#name").html()+"此时Vue的name值"+this.name); },beforeMount() { //Vue实例创建完毕尚未重新渲染 alert("预创建Vue函数此时页面的name"+ $("#name").html()+"此时Vue的name值"+this.name); },mounted() { //页面渲染完毕 alert("预创建Vue函数此时页面的name"+ $("#name").html()+"此时Vue的name值"+this.name); },beforeDestroy() { //Vue实例被销毁前执行的钩子函数 alert("Vue要销毁了"); },destroyed() { //Vue实例销毁后执行的钩子函数 alert("Vue销毁完成了"); }, }) </script> </body> </html>
另附Vue生命周期图一张
所需依赖：
1.npm i vue
2.npm i layui-src
3.npm i jquery
浙公网安备 33010602011771号