vue.js - An introduction to components

by Rodwyn Moreno

HTML

<script src="https://unpkg.com/vue/dist/vue.js"></script>

<div id="app">
  <my-cmp></my-cmp>
  <hr>
  <my-cmp></my-cmp>
</div>

JavaScript

Vue.component('my-cmp', {
	data: function() {
  	return {
    	status: 'Critical'
    }
  },
  template: '<p>Server Status: {{ status }} <button @click="changeStatus">change</button></p>',
  methods: {
  	changeStatus: function() {
    	this.status = 'Normal';
    }
  }
});

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