容器和实例对应

因为ID选择器在html中可以出现一次，所以Vue的实例和容器可以使用类选择器class。

<!-- 这上面可以理解准备了一个容器 -->
        <div class="app">
        <!-- //容器里的这一部分被称为Vue模版 -->
            <p> {{ message }}</p>
        </div>
        <!-- //通过el匹配容器 -->
        <script >
            var vm = new Vue ({
                el:".app",
                data : {
                    message: "我是data里面的message"
                }
            })
        </script>

如果我们有一个实例，但是准备两个容器会出现什么问题呢？

<div class="app">
            <p> {{ message }}</p>
        </div>


        <div class="app">
            <p> {{ message }}</p>
        </div>

        <!-- //通过el匹配容器 -->
        <script >
            var vm = new Vue ({
                el:".app",
                data : {
                    message: "我是data里面的message"
                }
            })
        </script>

下图为页面显示结果。

图片显示的结果说明一个Vue实例只能匹配一个容器