Vue框架学习笔记——创建Vue实例、实例与容器对应关系

深碍√TFBOYSˉ_ 2024-02-18 13:05 52阅读 0赞

#### 文章目录 ####

*  创建Vue实例
 *  容器和Vue实例绑定
 *  容器中标签体的数据和实例中的数据动态绑定
 *  容器和实例一一对应

--------------------

## 创建Vue实例 ##

HTML文件中写下述代码，可以消除生产提示，创建Vue实例

Vue中大括号内的是配置对象，也可以写成js表达式（表达式会产生一个值，例如函数，因为函数具有返回值），如`Date.now()`

## 容器和Vue实例绑定 ##

<div class="box" id="box">
        <h1>
          hello,world
        </h1>
      </div>
      <script type="text/javascript">
        Vue.config.productionTip = false
    
        new Vue({
          
          el: '#box'
        })
      </script>

可以通过配置el加上css选择器的字符串（通常为选择器字符串，也可以写为`el:document.getElementById('box')`，使用css选择器字符串是推荐的，而且建议使用id选择器），将div的容器和Vue实例建立关联。

## 容器中标签体的数据和实例中的数据动态绑定 ##

将其改为：

<div class="box" id="box">
        <h1>
          hello,world{
       {name}}
        </h1>
      </div>
      <script type="text/javascript">
        Vue.config.productionTip = false
    
        new Vue({
          
          el: '#box',
          data: {
          
            name: "这里是name的值"
          }
        })
      </script>

现在将data写成对象（之后会写成函数）。这样即可使用制定语法建立数据关联，改变data中name的，即可将Vue实例链接的容器中的name的数值。  
data中可以使用逗号分隔。  
同名的数据以后声明的为主，也就是会覆盖，可以写为层级结构

root容器中的代码被称为Vue模版，模版经过Vue实例解析变为正常的html代码

## 容器和实例一一对应 ##

如果使用类选择器的el来选择容器，一个实例无法解析多个容器，选择排在代码前方的容器

多个实例选择同一容器，但一个容器无法连接多个实例，容器对应的实例先到先得

--------------------

![c1d08b31498f411bb89f439aa61f15ff.png][]  
可以在开发者工具这里查看创建的Vue实例，Root就是创建的那个Vue实例

--------------------

至此，结束。

`如果你觉得这篇文章写的不错，多多点赞~收藏吧！`

[c1d08b31498f411bb89f439aa61f15ff.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/18/34242d35cec94087ba4fe064b8c76b7a.png