VueJS Components (new docs)

by PlĂ­nio Naves

HTML

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<div id="app">
  <button-counter></button-counter>
	<button-counter></button-counter>
	<button-counter></button-counter>
	<button-counter></button-counter>
	<table>
		<button-counter id="test"></button-counter>
		<tr>
			<td>My Table</td>
		</tr>
	</table>
</div>

JavaScript

const data = {
  counter: 0
};

Vue.component('blog-post', {
	template: '<p>My custom element</p>'
});

Vue.component('button-counter', {
  data: function() {
    return data;
  },
  template: `
		<div>
			<button @click="counter++">You clicked me {{ counter }} times.</button>
			<table>
				<blog-post></blog-post>
			</table>
		</div>
	`
});

new Vue({
  el: '#app'
});