srkama/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <script src="https://unpkg.com/vue"></script>
</head>
<body>
  <div id="app">
    <user-name v-bind:username="'kamala'" v-on:userclicked="printUser($event)"></user-name>
    <user-name v-bind:username="'kamalak'"></user-name>
    <user-name v-bind:username="'kamal'"></user-name>
    <user-name v-bind:username="'kamalaka'"></user-name>

    <span>{{name}}</span>
    <div v-if="name != 'kamal'">this got changed</div>
    <button v-on:click="changeName">Change</button>
    <button v-on:click="addElement">New</button>
    <ul>
      <li v-for="element in elements" v-bind:id="'el' + element" v-bind:style="{backgroundColor:'Green'}"> {{ element }} </li>
    </ul>

  </div>
<script id="jsbin-javascript">
Vue.component('user-name', {
  props: ['username'],
  data: function(){
    return {
    }
  },
  template:"<h1 v-on:click='usernameClicked'>{{ username}} </h1>",
  methods: {
    usernameClicked: function() {
      this.$emit('userclicked', this.username);
    }
  }
});
new Vue({
  el:"#app",
  data: {
    name:"kamal",
    elements: []
  },
  methods: {
    changeName: function() {
      this.name = "kannan";
    },
    addElement: function() {
      this.elements.push(this.elements.length+1)
    },
    printUser: function(data) {
      console.log(data);
    }
  }
});
</script>


<script id="jsbin-source-javascript" type="text/javascript">Vue.component('user-name', {
  props: ['username'],
  data: function(){
    return {
    }
  },
  template:"<h1 v-on:click='usernameClicked'>{{ username}} </h1>",
  methods: {
    usernameClicked: function() {
      this.$emit('userclicked', this.username);
    }
  }
});
new Vue({
  el:"#app",
  data: {
    name:"kamal",
    elements: []
  },
  methods: {
    changeName: function() {
      this.name = "kannan";
    },
    addElement: function() {
      this.elements.push(this.elements.length+1)
    },
    printUser: function(data) {
      console.log(data);
    }
  }
});</script></body>
</html>

## jsbin.yidoseh.js
Vue.component('user-name', {
  props: ['username'],
  data: function(){
    return {
    }
  },
  template:"<h1 v-on:click='usernameClicked'>{{ username}} </h1>",
  methods: {
    usernameClicked: function() {
      this.$emit('userclicked', this.username);
    }
  }
});
new Vue({
  el:"#app",
  data: {
    name:"kamal",
    elements: []
  },
  methods: {
    changeName: function() {
      this.name = "kannan";
    },
    addElement: function() {
      this.elements.push(this.elements.length+1)
    },
    printUser: function(data) {
      console.log(data);
    }
  }
});
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>JS Bin</title>
	<script src="https://unpkg.com/vue"></script>
	</head>
	<body>
	<div id="app">
	<user-name v-bind:username="'kamala'" v-on:userclicked="printUser($event)"></user-name>
	<user-name v-bind:username="'kamalak'"></user-name>
	<user-name v-bind:username="'kamal'"></user-name>
	<user-name v-bind:username="'kamalaka'"></user-name>

	<span>{{name}}</span>
	<div v-if="name != 'kamal'">this got changed</div>
	<button v-on:click="changeName">Change</button>
	<button v-on:click="addElement">New</button>
	<ul>
	<li v-for="element in elements" v-bind:id="'el' + element" v-bind:style="{backgroundColor:'Green'}"> {{ element }} </li>
	</ul>

	</div>
	<script id="jsbin-javascript">
	Vue.component('user-name', {
	props: ['username'],
	data: function(){
	return {
	}
	},
	template:"<h1 v-on:click='usernameClicked'>{{ username}} </h1>",
	methods: {
	usernameClicked: function() {
	this.$emit('userclicked', this.username);
	}
	}
	});
	new Vue({
	el:"#app",
	data: {
	name:"kamal",
	elements: []
	},
	methods: {
	changeName: function() {
	this.name = "kannan";
	},
	addElement: function() {
	this.elements.push(this.elements.length+1)
	},
	printUser: function(data) {
	console.log(data);
	}
	}
	});
	</script>



	<script id="jsbin-source-javascript" type="text/javascript">Vue.component('user-name', {
	props: ['username'],
	data: function(){
	return {
	}
	},
	template:"<h1 v-on:click='usernameClicked'>{{ username}} </h1>",
	methods: {
	usernameClicked: function() {
	this.$emit('userclicked', this.username);
	}
	}
	});
	new Vue({
	el:"#app",
	data: {
	name:"kamal",
	elements: []
	},
	methods: {
	changeName: function() {
	this.name = "kannan";
	},
	addElement: function() {
	this.elements.push(this.elements.length+1)
	},
	printUser: function(data) {
	console.log(data);
	}
	}
	});</script></body>
	</html>