1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121
| <!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>Document</title> </head> <body> <div id="app"> <App></App> </div>
<script src="https://mirrors.idiyrom.com/web/js/vue.mini.js"></script> <script>
let App2 = { data() { return { msg: "ropon", count: 0, timer: null } }, template: ` <div id="app2"> <div id="box">{{ msg }}</div> <p>{{ count }}</p> <button @click="change">修改</button> </div>`, methods: { change() { this.msg = "pengge"; document.querySelector("#box").style.color = "red"; } }, //生命周期的钩子函数 //组件创建之前 beforeCreate() { console.log("组件创建之前", this.msg); }, //组件创建之后 created() { //每隔1s count加1 // this.timer = setInterval(() => { // this.count++; // }, 1000); console.log("组件创建之后", this.msg); }, //装载数据到DOM之前调用 beforeMount() { console.log(document.getElementById("app")); }, //装载数据到DOM之后调用 mounted() { console.log(document.getElementById("app")); }, //更新之前调用此钩子,获取原始的DOM beforeUpdate() { console.log("更新之前原始DOM", document.getElementById("app").innerHTML); }, //更新之后调用此钩子,获取最新的DOM updated() { console.log("更新之后最新DOM", document.getElementById("app").innerHTML); }, beforeDestroy() { console.log("beforeDestroy"); }, //销毁时调用,注意定时器销毁需要在此方法中处理 destroyed() { console.log("destroyed", this.timer); clearInterval(this.timer); }, activated() { console.log("组件被激活"); }, deactivated() { console.log("组件被停用"); } };
let App = { data() { return { isShow: true } }, template: ` <div> <h3>测试生命周期钩子函数</h3> <keep-alive> <App2 v-if="isShow"></App2> </keep-alive> <button @click="handlerClick">改变App2组件的生死</button> </div> `, methods: { handlerClick() { this.isShow = !this.isShow; } }, components: { App2 } };
let vm = new Vue({ el: "#app", data() { return {
} }, components: { App } }); </script> </body> </html>
|