//实例化vue对象
var one = new Vue({
el:"#app-one",
data:{
characters:["ddd","34","df"],
users:[
{name:"mischen",age:30},
{name:"mischen1",age:33},
{name:"mischen2",age:35},
{name:"mischen3",age:36}
],
success:false,
title:"app one 的内容!"
},
methods:{
},
computed:{
greeet:function(){
return "Hello world one";
}
}
});
var two = new Vue({
el:"#app-two",
data:{
characters:["ddd","34","df"],
users:[
{name:"luke1",age:10},
{name:"luke2",age:20},
{name:"luke3",age:30},
{name:"luke4",age:40}
],
success:false,
title:"app two 的内容!"
},
methods:{
changeTitle:function(){
one.title="已经修改名字了!";
}
},
computed:{
greeet:function(){
return "Hello world two";
}
}
});
two.title ="app two的title也发生了变化";
/*
*
**
*/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue.js 学习</title>
<link rel="stylesheet" href="styles.css">
<script src="https://unpkg.com/vue"></script>
</head>
<body>
<!--app是根容器 -->
<h1> 初始化多个vue实例对象 </h1>
<div id="app-one">
<h2>{{title}}</h2>
<p>{{greeet}}</p>
<template v-for="(user,index) in users">
<h3>{{index+1}} .{{user.name}}</h3>
<p>Age -{{user.age}}</p>
</template>
</div>
<div id="app-two">
<h2>{{title}}</h2>
<p>{{greeet}}</p>
<template v-for="(user,index) in users">
<h3>{{index+1}} .{{user.name}}</h3>
<p>Age -{{user.age}}</p>
</template>
<button v-on:click="changeTitle">change title one</button>
</div>
<script src="app.js"></script>
</body>
</html>