VueJS2 Net Ninja Part 8

by hlim188

HTML

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>VueJS2 Tutorials</title>
	<link href="style.css" rel="stylesheet">
	<script src="http://unpkg.com/vue"></script>
</head>
<body>
	<h1>Multiple Vue Instances</h1>
	<div id="vue-app-one">
		<h2>{{ title }}</h2>
		<p>{{ greet }}</p>
	</div>
  
	<div id="vue-app-two"> 
		<h2>{{ title }}</h2>
		<p>{{ greet }}</p>
		<button @click="changeTitle">Change App 1 title</button>
	</div> 
    
	<script src="app.js"></script>
</body>
</html>

Vue

var one = new Vue({
 	el: '#vue-app-one',
 	data:{
	  title: 'Vue App 1'
  },
	computed:{
	  greet: function(){
	    return 'Hello from app 1'
		}
 	}
});

var two = new Vue({
 	el: '#vue-app-two',
 	data:{
	  title: 'Vue App 2'
  },
	methods:{
	  changeTitle: function(){
	    one.title = 'title changed'
	  }
	},
	computed:{
	  greet: function(){
	    return 'Hello from app 2 !!!'
		}
 	}
});

two.title = 'changed from outside!';