学习资源：https://www.bilibili.com/video/BV1qb41187fZ?p=16
实例化多个Vue对象
多个vue对象操控不同的对象（el是不同的值），可以同时存在，相互影响。
在下面的例子中，有两个div，demo_one与demo_two；对应是两个vue，one与two。
然后第二个vue对象可以在methods中定义函数来改变第一个vue对象的属性，one.title=“a new title”。
第二种修改vue对象的方法是，在vue外部修改，two.title=“a new title”
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>初始化多个Vue实例对象</h1>
<div id="demo_one">
<h2>{
{title}}</h2>
<p>{
{greet}}</p>
</div>
<div id="demo_two">
<h2>{
{title}}</h2>
<p>{
{greet}}</p>
<button @click="changeTitle()">change Demo_one's title</button>
</div>
<script src="../vue.js"></script>
<script>
var one = new Vue({
el:'#demo_one',
data:{
title:'demo one的内容',
},
methods:{
},
computed:{
greet:function(){
return "hello demo_one"
}
}
});
var two = new Vue({
el:'#demo_two',
data:{
title:'demo two的内容',
},
methods:{
changeTitle:function(){
one.title="DEMO ONE"
}
},
computed:{
greet:function(){
return "hello demo_two"
}
}
});
two.title="DEMO TWO";
</script>
</body>
</html>
初始vue组件
在很多 Vue 项目中，我们使用 Vue.component 来定义全局组件，紧接着用 new Vue({ el: '#demo '})在每个页面内指定一个容器元素。
在这个例子中，网页上会显示两段话和两个按钮，点击按钮，即可修改data中的name属性（从shelley变成leslie，再从leslie变成shelley）
其中要特别注意的是，template里面只能放一个标签，如果要放多个标签就要先放一个根标签，比如例子中最外面的<p>
<body>
<div id="demo_one">
<greeting></greeting>
</div>
<script src="../vue.js"></script>
<script>
Vue.component("greeting",{
template:`
<p>
{
{name}}: hello stranger
<button @click="changeName()">更改姓名</button>
</p>
`,
data:function(){
return{
name:"shelley"
}
},
methods:{
changeName:function(){
this.name=(this.name=="shelley"? "leslie":"shelley");
}
}
})
new Vue({
el:"#demo_one",
});
</script>
</body>
上面在data中用了函数return一个对象，其实也可以用外部设置变量data来return 一个对象，但是使用这个方法时会让两个div都同时发生改变。
用上面的方法可以只改变单个div，这样更好。
<body>
<div id="demo_one">
<greeting></greeting>
</div>
<div id="demo_two">
<greeting></greeting>
</div>
<script src="../vue.js"></script>
<script>
var data={
name:"oliver"
}
Vue.component("greeting",{
template:`
<p>
{
{name}}: hello stranger
<button @click="changeName()">更改姓名</button>
</p>
`,
data:function(){
return data;
},
methods:{
changeName:function(){
this.name=(this.name=="shelley"? "leslie":"shelley");
}
}
})
new Vue({
el:"#demo_one",
});
new Vue({
el:"#demo_two",
})
</script>
</body>
（开始水博客…）