<header></header>
<aside><sidebar-item v-for="item in items"></sidebar-item>
</aside>
<main><blogpost v-for="post in posts"></blogpost>
</main>
<footer></footer>

app.$mount('#app');var app = new Vue({el: 'hello',template: '<h1>Hello World!</h1>'
});

Vue.component('child', {props: ['text'],template: `<div>{{ text }}<div>`
});new Vue({el: "#app",data() {return {message: 'hello mr. magoo'}}
});

<div id="app"><child :text="message"></child>
</div>

<div id="app"><child :text="message"></child><child :text="message"></child>
</div>

Vue.component('child', {props: {text: {type: String,required: true}},template: `<div>{{ text }}<div>`
});

Vue.component('child', {props: {text: {type: Boolean,required: true}},template: `<div>{{ text }}<div>`
});

Vue.component('child', {props: { count: {type: Number,required: true}},template: `<div class="num">{{ count }}</div>`
})new Vue({el: '#app',data() {return {count: 0    }},methods: {increment() {this.count++;},decrement() {this.count--;}}
})

<div id="app"><h3><button @click="increment">+</button>Adjust the state<button @click="decrement">-</button></h3><h2>This is the app state: <span class="num">{{ count }}</span></h2><hr><h4><child count="1"></child></h4> <p>This is a child counter that is using a static integer as props</p><hr><h4><child :count="count"></child></h4><p>This is the same child counter and it is using the state as props</p>
</div>

Vue.component('individual-comment', {template: `<li> {{ commentpost }} </li>`,props: ['commentpost']
});new Vue({el: '#app',data: {newComment: '',comments: ['Looks great Julianne!','I love the sea','Where are you at?']},methods: {addComment: function () {this.comments.push(this.newComment)this.newComment = ''}}
});

<ul><liis="individual-comment"v-for="comment in comments"v-bind:commentpost="comment"></li></ul><inputv-model="newComment"v-on:keyup.enter="addComment"placeholder="Add a comment">

<!-- This is the Individual Comment Component -->
<script type="text/x-template" id="comment-template">
<li> <img class="post-img" :src="commentpost.authorImg" /> <small>{{ commentpost.author }}</small><p class="post-comment">"{{ commentpost.text }}"</p>
</li>
</script>

Vue.component('individual-comment', {template: '#comment-template',props: ['commentpost']
});

<script type="text/x-template" id="childarea"><div class="child"><slot></slot><p>It's a veritable slot machine!<br> Ha ha aw</p></div>
</script>

<div id="app"><h2>We can use slots to populate content</h2><app-child><h3>This is slot number one</h3></app-child><app-child><h3>This is slot number two</h3><small>I can put more info in, too!</small></app-child>
</div>

<div id="post"><main><slot name="header"></slot><slot></slot></main>
</div>

<app-post><h1 slot="header">This is the main title</h1><p>I will go in the unnamed slot!</p>
</app-post>

<main><h1>This is the main title</h1><p>I will go in the unnamed slot!</p>
</main>

const app = new Vue({...components: {'appBlack': {template: '#black'}}
});

  <component :is="selected">...<path class="label" d="M12,295.9s56.5,5,137.6,0V409S78.1,423.6,12,409Z" transform="translate(-12 -13.8)" :style="{ fill: labelColor }"/>...</component><h4>Color</h4><button @click="selected ='appBlack', labelColor = '#000000'">Black Label</button><button @click="selected ='appWhite', labelColor = '#ffffff'">White Label</button><input type="color" v-model="labelColor" defaultValue="#ff0000">

<script type="text/x-template" id="white"><div class="white"><slot></slot></div>
</script>

<!-- main vue app instance -->
<app-comment><p slot="comment">{{ comment.text }}</p>
</app-comment><!-- individual component -->
<script type="text/x-template" id="comment-template"><div><slot name="comment"></slot></div>
</script>

<keep-alive><component :is="selected">...</component>
</keep-alive>