README.MD

Sample code for create Vue.js Component

app.js

Vue.component('row1', {
  template: '<div class="ro1" >A custom component!</div>'
})

var data  = {counter : 0 }

new Vue({
  el: '#app',
  data: {
    i: 1,
    message: 'Hello Vue.js!',
    
  },
  
  components: {
    'local1': {
      props: ['tx'],
      template: '<div class="lo1"  v-on:click="increment" >  lo1: i={{tx}}  counter={{counter}} </div>'
      ,data : function(){
      		return {counter : 0 }
      }
      ,methods: {
        increment: function() {
          this.counter += 1				/* this component local */
          this.$emit('increment')
        }
      }
    }
  }
})

index.html

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<link rel="stylesheet" type="text/css" href="theme.css">

<div id="app">
  <p>{{ message }}</p>
  <row1>
    <</row1>
      <table width="50%">
        <tr is="local1" tx="ABC "></tr>
        <tr is="local1" :tx="i"></tr>
        <tr is="local1" :tx="i+1"></tr>
        <tr is="local1" :tx="i+2"></tr>
        <tr is="local1" :tx="i+3"></tr>
        <tr is="local1" :tx="i+4"></tr>
      </table>
</div>
  
<!-- code must run below HTML -->
<script src="app.js"></script>
  
  

theme.css

.lo1 {
  border: 1px solid silver;
  background-color: lightyellow;
  padding-left: 5px;
  pointer: hand;
}