lovecoding
/
Web1020


			
				
					
						
						
							12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/vue.js"></script>
</head>
<body>
    <div id="app">
        {{num}}
        <button @click="changeFun">change</button>
    </div>
    <script>
        let app = new Vue({
            el: '#app',
            data:{
                num:1
            },
            methods:{
                changeFun:function(){
                    this.num++
                }
            },
            // 生命周期函数
            // beforeCreate 表示vue实例刚被创建，还没有初始化数据
            beforeCreate:function(){
                console.log('beforeCreate')
            },
            // created 表示vue实例已经创建完成，数据已经初始化完成
            created:function(){
                console.log('created')
            },
            // beforeMount 表示vue实例已经创建完成，但是还没有挂载到页面上
            beforeMount:function() {
                console.log('beforeMount')
            },
            // mounted 表示vue实例已经挂载到页面上
            mounted:function() {
                console.log('mounted')
            },
            // beforeUpdate 表示vue实例的数据已经更新完成，但是页面还没有更新
            beforeUpdate:function() {
                console.log('beforeUpdate');
            },
            // updated 表示vue实例的数据已经更新完成，页面也更新完成
            updated:function(){
                console.log('updated');
            },
            // beforeDestroy 表示vue实例即将被销毁
            beforeDestroy:function(){
                console.log('beforeDestroy');
            },
            // destroyed 表示vue实例已经被销毁
            destroyed:function(){
                console.log('destroyed');
            }
        })
    </script>
</body>
</html>