VueJs 2.x Components Explained Easiest way
<!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