模板与实例的关系

 首先确定一个问题：实例与模板只能一一对应，不存在一对多的关系

 一个容器对应多个实例

一个容器只能对应一个实例，若是多个实例接管了同一个容器，只有第一个实例中的数据渲染 ，且容器中用到的其他实例中的数据不会展示，控制台也会输出错误

<!-- 创建容器 -->
<div id="root">
  <h1>hello,{{name}}</h1>
  <h1>我的年龄是,{{age}}</h1>
</div>

<script>
  Vue.config.productionTip = false

  new Vue({
    el: '#root', // 用于指定当前Vue实例为那个容器服务，通常为css选择器,也可以使用class
    // el: document.getElementById('#root'), // 也可以通过document点出来
    data: { // 用于存储数据，供el所指定的容器去使用值，我们先写成一个对象
      name: 'al111',
    }
  })

  new Vue({
    el: '#root', // 用于指定当前Vue实例为那个容器服务，通常为css选择器,也可以使用class
    // el: document.getElementById('#root'), // 也可以通过document点出来
    data: { // 用于存储数据，供el所指定的容器去使用值，我们先写成一个对象
      age: '2222'
    }
  })
</script>

 

 

 多个容器对应一个实例

从页面效果可以看出，只有第一个容器正确的渲染出了数据，第二个容器虽然展示了，但是其中的Vue语法并没有执行 

<!-- 创建容器 -->
<div class="root">
  <h1>hello,{{name}}</h1>
  <h1>我的年龄是,{{age}}</h1>
</div>

<div class="root">
  <h1>hello,{{name}}</h1>
  <h1>我的年龄是,{{age}}</h1>
</div>

<script>
  Vue.config.productionTip = false

  new Vue({
    el: '.root', // 用于指定当前Vue实例为那个容器服务，通常为css选择器,也可以使用class
    // el: document.getElementById('#root'), // 也可以通过document点出来
    data: { // 用于存储数据，供el所指定的容器去使用值，我们先写成一个对象
      name: 'al',
      age: '1111'
    }
  })
</script>