Vue中容器和实例的关系

Love The Way You Lie 2024-04-08 12:54 58阅读 0赞

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title> 初识vue</title>
            
            <script type="text/javascript" src="../js/vue.js"></script> 
        </head>
        <body>
    
    
    
            <div id="root">
                
                <h1>hello,{
       {name}}</h1>
            </div>
    
    
            <script type="text/javascript">
                //阻止vue在启动时生成生产提示
                Vue.config.productionTip=false;
    
                // 创建vue实例
                const x = new Vue({
                    // el: document.getElementById('root')  这样写太笨重，我们不使用
                    el: '#root' ,    //el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串
                    data: {
                       name:'张靖奇'  //data中用于存储数据，数据提供el所指定的容器去使用
                    }
               
                });
                  
    
    
    
            </script>   
        </body>
    </html>

![7bf3a61615454c2db50ee3a6e6bdcd4f.png][]

**直接总结：**

1.想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象

2.root容器里的代码依然符合html规范，只不过混入了一些特殊的Vue语法

3.root容器里面的代码被称为【vue模板】

4.Vue实例和容器是一一对应的

5.真实开发中只有一个Vue实例，并且会配合组件一起使用

6.\{ \{xxx\}\}中xxx要写js表达式，name模板中用到该数据的地方也会自动更新

7.一旦data中的数据发生改变，那么模板中用到该数据的地方也会自动更新

![f2d0a3dcaa0a4cafb2bcbd1286031cbc.png][]

![wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==][wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw]编辑

## 一、容器和实例的关系 ##

**注意！！！！！**

但是我们要把上面的两个容器做成一个样子的，如下面代码：

（两个容器一个实例）

<div class="root">
                
                <h1>hello,{
       {name}}</h1>
            </div>
    
    
            <div class="root">
                
                <h1>hello,{
       {name}}</h1>
            </div>

那么我们会觉得页面上会出现两天一模一样的标题，但是答案显然不是这个样子的

显然第二个div并没有按照我们预想的进行

![bebb15e4496b444a853bc898d115887c.png][]

**原因： 我们第一个容器已经和唯一的实例相结合了，无法再与第二个容器相结合**

**一个容器两个实例**

<div id="root">
                
                <h1>hello,{
       {name}}</h1>
            </div>
    
    
    
            <script type="text/javascript">
                //阻止vue在启动时生成生产提示
                Vue.config.productionTip=false;
    
                // 创建vue实例
                const x = new Vue({
                    // el: document.getElementById('root')  这样写太笨重，我们不使用
                    el: '#root' ,    //el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串
                    data: {
                       name:'张靖奇'  //data中用于存储数据，数据提供el所指定的容器去使用
                    }
               
                });
                // 创建vue实例
                const y = new Vue({
                    // el: document.getElementById('root')  这样写太笨重，我们不使用
                    el: '#root' ,    //el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串
                    data: {
                       name:'张靖奇'  //data中用于存储数据，数据提供el所指定的容器去使用
                    }
               
                });
                  
    
    
    
            </script>

**原因：上面这个做法也是不对的，一个容器对应连个div，显然第二个实例值不会显现出来，第一个容器已经和第一个实例相结合**

**结论：容器和实例一一对应！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！**

[7bf3a61615454c2db50ee3a6e6bdcd4f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/4634613aa5ef4d3998cf610432dec712.png
[f2d0a3dcaa0a4cafb2bcbd1286031cbc.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/bed646f8696f4430bd0303dd013fa50e.png
[wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw]: 
[bebb15e4496b444a853bc898d115887c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/ea3d725227e04d6193f8af80db5f7d6b.png