Vue

by Samuel Fullman

HTML

<div id="app">
        Main app stats:
        {{ stats }} - {{ count }}
        <br>
        <my-component></my-component>
        <br>
        
    </div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

Vue

/**
     * This script allows you to pause and see the progression of app being compiled.  After testing I have found that Firefox's rendering, compared to the console output, is as I would expect; the page is updated to the degree that I'd expect on each alert().  For Chrome this is not the case.  Whether Chrome is just lagging on the rendering, or accelerating the alerts, I'm not sure.
     */
    var app;     //this is not needed as long as we don't need an external reference to the app

    //the component method alone will not call any of these hooks; Vue apparently stores these in memory and they only get called when Vue sees it has a match in a parent component and needs to render one of them.
    Vue.component('my-component', {
    	template: '<span>My component: {{ stats }} - {{ count }} <my-sub-component></my-sub-component></span>',
        data: function(){
    		return {
    			stats: 'component stats here',
                count: 0,
            }
        },
        beforeCreate: function(){
        	console.log('(my component beforeCreate)');
        },
		created: function(){
			console.log('(my component created)');
		},
		beforeMount: function(){
			console.log('(my component beforeMount)');
		},
		mounted: function(){
			console.log('(my component mounted)');
		},
		beforeUpdate: function(){
			console.log('(my component beforeUpdate)');
		},
		updated: function(){
			console.log('(my component updated)');
		},
    });

	Vue.component('my-sub-component', {
		template: '<div><strong>sub-component here</strong></div>',
		data: function(){
			return {
			}
		},
		beforeCreate: function(){
			console.log('(my sub-component beforeCreate)');
		},
		created: function(){
			console.log('(my sub-component created)');
		},
		beforeMount: function(){
			console.log('(my sub-component beforeMount)');
		},
		mounted: function(){
			console.log('(my sub-component mounted)');
		},
		beforeUpdate: function(){
			console.log('(my sub-component...