VueJs 2.x Components Explained Easiest way

By: Thad Mertz
4 years ago
<!DOCTYPE html>
<html>
<head>
	<title>Vue Project</title>
	<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
	<meta content="utf-8" http-equiv="encoding">
	<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
	<script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
	<div class="container">
		<div id="app" style="margin-bottom:100px;	">
			
			<name></name>
			<name></name>
			<name></name>


		</div>
	</div>
	
</body>
<script type="text/javascript">


	Vue.component('name',{
		data(){
			return {
				name:'Roger Smith'
			}
		},
		methods:{
		  	getAlert(){
		  		alert('success');
		  	}
		},
		template:`
		<div v-on:click="getAlert()">{name}</div>
		`,
	});




	
	


	const app1 = new Vue({
		  el:"#app"
	});




</script>
</html>
Her is the guide