模板与实例的关系

向右看齐 2022-09-14 00:07 110阅读 0赞

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

>  一个容器对应多个实例

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

<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>

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6ams5YWL55qE5Zu-5biD_size_20_color_FFFFFF_t_70_g_se_x_16][]

>  多个容器对应一个实例

从页面效果可以看出，只有第一个容器正确的渲染出了数据，第二个容器虽然展示了，但是其中的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>

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6ams5YWL55qE5Zu-5biD_size_20_color_FFFFFF_t_70_g_se_x_16 1][]

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6ams5YWL55qE5Zu-5biD_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/aaa9c8747c224c12a2875d400a8a97d6.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6ams5YWL55qE5Zu-5biD_size_20_color_FFFFFF_t_70_g_se_x_16 1]: /images/20220828/b3cff89c3f4c45288cc9e84f3f9571f1.png