|
|
@@ -0,0 +1,71 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html lang="en">
|
|
|
+<head>
|
|
|
+ <meta charset="UTF-8">
|
|
|
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
+ <title>Document</title>
|
|
|
+</head>
|
|
|
+<body>
|
|
|
+ <div id="app">
|
|
|
+
|
|
|
+ vue diff 算法 DOM虚拟树 DOM真实树
|
|
|
+ 生命周期 => 生命周期钩子
|
|
|
+ 三个阶段
|
|
|
+ 1.初始阶段
|
|
|
+ 创建前 beforeCreate 方法和数据是无法被使用的
|
|
|
+ 创建后 created 方法和数据可以使用
|
|
|
+ 2.运行阶段
|
|
|
+ 挂载前 beforeMount 方法和数据是没有被挂载到页面上
|
|
|
+ 挂载后 mounted 方法和数据是被挂载到页面上
|
|
|
+ 更新前 beforeUpdate 方法和数据是没有被更新到页面上
|
|
|
+ 更新后 updated 方法和数据是被更新到页面上
|
|
|
+ 3.销毁阶段
|
|
|
+ 销毁前 beforeDestroy 方法和数据是没有被销毁
|
|
|
+ 销毁后 destroyed 方法和数据是被销毁
|
|
|
+ -->
|
|
|
+ <h1>{{msg}}</h1>
|
|
|
+ <button v-on:click="getMsg">修改</button>
|
|
|
+ <button v-on:click="getShow">展示</button>
|
|
|
+ </div>
|
|
|
+ <script src="../vue初阶/vue.js"></script>
|
|
|
+ <script>
|
|
|
+ var app = new Vue({
|
|
|
+ el:"#app",
|
|
|
+ data:{
|
|
|
+ msg:"你好"
|
|
|
+ },
|
|
|
+ methods:{
|
|
|
+ getMsg() {
|
|
|
+ this.msg = "世界";
|
|
|
+ },
|
|
|
+ getShow() {
|
|
|
+ }
|
|
|
+ },
|
|
|
+ beforeCreate() {
|
|
|
+ // console.log(this.msg,this.$el,this.getMsg(),'1')
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ // console.log(this.msg,this.$el,this.getMsg(),'2')
|
|
|
+ },
|
|
|
+ beforeMount() {
|
|
|
+ console.log(this.msg,this.$el,'3')
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ console.log(this.msg,this.$el,'4')
|
|
|
+ },
|
|
|
+ beforeUpdate() {
|
|
|
+ console.log(this.msg,document.querySelector("h1").innerHTML,'5')
|
|
|
+ },
|
|
|
+ updated() {
|
|
|
+ console.log(this.msg,document.querySelector("h1").innerHTML,'6')
|
|
|
+ },
|
|
|
+ beforeDestroy() {
|
|
|
+ console.log(this.$el,'7')
|
|
|
+ },
|
|
|
+ destroyed() {
|
|
|
+ console.log(this.$el,'8')
|
|
|
+ },
|
|
|
+ })
|
|
|
+ </script>
|
|
|
+</body>
|
|
|
+</html>
|
e