<!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 id="app" class="container">
<div class="col-md-6 col-md-offset-3 mb-9" style="margin-bottom:100px; ">
{appNameOne}
{processValues()}
</div>
</div>
<hr>
<div id="app2" class="container">
<div class="col-md-6 col-md-offset-3 mb-9" style="margin-bottom:100px; ">
{appNameTwo}
</div>
</div>
</body>
<script type="text/javascript">
let number = '12';
const app2 =new Vue({
el:'#app2',
data: {
appNameTwo:'SecondApp'
},
methods:{
}
});
const app = new Vue({
el:'#app',
data: {
appNameOne:'FirstApp'
},
methods:{
processValues(){
alert(number);
console.log(app2.appNameTwo);
}
}
});
setTimeout(()=>{
app.appNameOne = 'First App Updated';
console.log(app.appNameOne);
},1000);
</script>
</html>
Check Video Guide Here