vue实例和容器的一夫一制——04

//准备容器

<div class='app'>

<h1>{{mag}}</h1>

</div>

//准备容器

<div class='app'>

<h1>{{mag}}</h1>

</div>

//准备容器

<div class='app2'>

<h1>{{name}}</h1>

</div>

<script>

// 验证：一个vue实例可以接管多个容器？不行，一个vue实例只能接管一个容器，一旦接管到容器之后，即使后面有相同的容器，vue也是不管的，因为vue实例已经“娶到媳妇”

new Vue ({

el : 'app',

data : {

msg: ' Hello Vue '

}

})

new Vue ({

el: '#app2',

data :{

name: 'zs'

}

})

//这个vue实例想去接管 id= ‘APP’的容器，但是这个容器已经被上面那个Vue接管了。他只能“打光棍”

new Vue ({

el: '#app2',

data :{

name: 'ls '

}

})

</script>