index.html
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://unpkg.com/vue"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!--vue-app是根容器-->
<div id="vue-app">
<h1>Vue多实例</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 v-on:click="changeTitle">
Change app title
</button>
</div>
</div>
<script src="app.js"></script>
</body>
</html>
app.js
var one=new Vue({
el:"#vue-app-one",
data:{
title:"这是one的title"
},
methods:{
},
computed:{
greet:function () {
return "hello App one"
}
}
});
var two=new Vue({
el:"#vue-app-two",
data:{
title:"这是tow的title"
},
methods:{
//改变one vue实例中的title
changeTitle:function () {
one.title="已经改名了"
}
},
computed:{
greet:function () {
return "hello App two"
}
}
});
//改变第二个的话也可以在外面改
two.title="也放生变化了";