vue component

component template vuejs

by femfoyou

HTML

<div id="app">

<greeting :message="message" :title="title" :author="author" :content="content"
></greeting>

<ul>
<posto :post="post" v-for="post in posts"></posto>
</ul>

</div>

<template id="plantilla">
  <h1>{{message}}</h1>
  <h1>{{ title }}</h1>
	<h4>{{ author }}</h4>
	<p>{{ content }}</p>
  <button v-on:click="counter += 1">{{ counter }}</button>
</template>

<template id="lista">
  <li>{{post.title}} - {{post.votes}}</li>
</template>

JavaScript

var cuenta = { counter: 0 };

Vue.component('greeting', {
	template: '#plantilla',
	props: ['message','title', 'author', 'content','post'],
  data: function () {
    return cuenta
  }
});

Vue.component('posto', {
	template: '#lista',
	props: ['message','title', 'author', 'content','post']
});

var vm = new Vue({
  el: '#app',
  
  data: {
  	message: "Welcome to the VueJs Components Tutorial",
		author: 'Johnnie Walker',
		title: 'Aging Your Own Whisky',
		content: 'A bunch of steps and a whole lot of content',
    posts: [{
				title: "A post for our reddit demo starting at 15 votes",
				votes: 15
			},
			{
				title: "Try out the upvoting, it works, I promise",
				votes: 53
			},
			{
				title: "coligo is the bomb!",
				votes: 10
			}]
	}
  
});