lovecoding
/
W250913


			
				
					
						
						
							1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374
							<!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">
        <div>{{num}}</div>
        <!-- 如果事件可以用一条js语句执行 可以直接写在事件中 不用定义事件处理函数 -->
        <button @click="num++">按钮</button>
        <button @click="destroyFun">销毁按钮</button>
    </div>
    <script src="./js/vue.js"></script>
    <script>
        let vm = new Vue({
            el: "#app",
            data: {
                num: 10
            },
            // 生命周期函数 每一个vue的页面都是会经历一个完整生命过程 在这个过程一些特定节点vue会自动调用一些函数来通知我们是否需要一些操作

            // 实例化vue之前调用
            beforeCreate() {
                console.log("beforeCreate")
            },
            // 实例化vue之后调用
            // created 一般用作于 刚进入页面从服务端获取数据
            created() {
                console.log("created")
            },
            // 挂载之前调用
            beforeMount() {
                console.log("beforeMount")
            },
            // 挂载之后调用
            // mounted 一般用作于 挂载完成后 对dom元素进行操作
            mounted() {
                console.log("mounted")
            },
            // beforeCreate created beforeMount mounted 这四个函数都是在实例化vue的时候调用的 只要刷新页面 这四个函数就会调用一次
            // 更新之前调用 当data中的数据发生改变时 会调用beforeUpdate函数
            beforeUpdate() {
                console.log("beforeUpdate")
            },
            // 更新之后调用 当data中的数据发生改变时 会调用updated函数
            updated() {
                console.log("updated")
            },
            // 销毁之前调用 当调用vm.$destroy()方法时 会调用beforeDestroy函数
            // 一般情况 离开当前页面会自动销毁当前vue实例 
            // beforeDestroy 离开页面前做的一些操作 比如 清除定时器 清除事件监听 清除dom元素等
            beforeDestroy() {
                console.log("beforeDestroy")
            },
            // 销毁之后调用 当调用vm.$destroy()方法时 会调用destroyed函数
            destroyed() {
                console.log("destroyed")
            },
            // 自定义方法
            methods: {
                destroyFun() {
                    vm.$destroy()
                }
            }
        })
    </script>
</body>

</html>