console 命令行工具 X clear

console

var login = {
    template: '<h1>{{childMsg}}</h1>',
    data() {
        return {
            childMsg: 'child'
        }
    },
    beforeCreate: function () {
        debugger;
        console.log("子组件的beforeCreate")
    },
    created: function () {
        debugger
        console.log("子组件的created")
    },
    beforeMount: function () {
        debugger
        console.log("子组件的beforeMount")
    },
    mounted: function () {
        debugger
        console.log("子组件的mounted")
    }
}

var vm = new Vue({
    el: '#app',
    template: `<div>
        <h1>{{fatherMsg}}</h1>
        <login />
    </div>`,
    data: {
        fatherMsg: "father"
    },
    methods: {},
    components: {
        login
    },
    beforeCreate: function () {
        console.log("父组件的beforeCreate")
    },
    created: function () {
        console.log("父组件的created")
    },
    beforeMount: function () {
        console.log("父组件的beforeMount")
    },
    mounted: function () {
        console.log("父组件的mounted")
    },
});

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Document</title>
	<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.min.js">

	</script>
</head>

<body>
	<div id="app">
	</div>
</body>

</html>