Vue笔记_挂载点(el+$mount)

乖女子@@@

已于 2023-10-10 17:48:38 修改

阅读量1.3k

点赞数 3

分类专栏： # Vue3 文章标签： vue.js javascript 前端

于 2022-09-17 15:55:15 首次发布

本文链接：https://blog.csdn.net/qq_43260366/article/details/126906570

版权

Vue3 专栏收录该内容

11 篇文章 1 订阅

订阅专栏

el挂载点

在Vue中不再和HTML直接进行交互了，而是将其挂载到DOM元素上,当数据发生变化的时候数据变化->操作DOM->更改数据，但是操作DOM->更改数据是通过Vue内部虚拟DOM 完成的，表现是数据驱动视图改变！

作用

告诉vue实例，要将vdom中的数据渲染到哪一个视图上(DOM元素)；

参数

1）可以传入一个 HTMLElement 实例
- 但是这样还需要获取DOM元素，没有必要；
- 使用vue就是要避免dom操作；
2）可以传入css选择器；
- 标签选择器
- 类选择器
- id选择器(推荐使用)
  - id选择器，保证HTML标签唯一性；

注意点

1）若是挂载点选择多个HTML元素，则只会对第一个元素生效；
2）若是希望data中的数据能够对多个元素生效，可以将vue实例挂载到父元素上；
3）html和body不能是挂载点，否则会报错；

若是没有设置挂载点

vue不知道将数据渲染到哪一个视图，数据无法渲染，将插值语法按照普通文本显示；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
       <!-- 1.导入vue.js文件,导入文件之后得到一个全局的构造函数Vue -->
       <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <!-- 2.创见视图 -->
    <div id="app">
        <p>{{person.name}}</p>
        <p>{{person.age}}</p>
        <p>{{person.area}}</p>
    </div>
    <!-- 3.创建视图模型 -->
    <script>
        // [1]此时由于挂载点选择多个HTML元素，则只会对第一个元素生效；
        const mv1=new Vue({
            el:'p',
            // 模型
            data:{
                person:{
                    name:'chaochao',
                    age:'20',
                    area:'中国'
                }
            }
        })
        // [2]没有设置挂载点，vue不知道将数据渲染到哪个视图上，将插值语法按照普通文本显示
        const mv2=new Vue({
            // 模型
            data:{
                person:{
                    name:'chaochao',
                    age:'20',
                    area:'中国'
                }
            }
        })
    </script>
</body>
</html>

[1]结果：

chaochao

[2]结果：

$mount

$mount是vue实例化对象的一个方法，作用也是用来挂载对象的;

如果vue实例化对象没有设置挂载点，可以通过$mount来挂载

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
       <!-- 1.导入vue.js文件,导入文件之后得到一个全局的构造函数Vue -->
       <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <!-- 2.创见视图 -->
    <div id="app">
        <p>{{person.name}}</p>
        <p>{{person.age}}</p>
        <p>{{person.area}}</p>
    </div>
    <!-- 3.创建视图模型 -->
    <script>
        // [1]此时由于挂载点选择多个HTML元素，则只会对第一个元素生效；
        const mv2=new Vue({
            // 模型
            data:{
                person:{
                    name:'chaochao',
                    age:'20',
                    area:'中国'
                }
            }
        })
        console.log('mv2', mv2.$mount)
        mv2.$mount('#app')
    </script>
</body>
</html>

上述代码结果如下

和以下代码结果执行相同

  <!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
         <!-- 1.导入vue.js文件,导入文件之后得到一个全局的构造函数Vue -->
         <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
  <body>
      <!-- 2.创见视图 -->
      <div id="app">
          <p>{{person.name}}</p>
          <p>{{person.age}}</p>
          <p>{{person.area}}</p>
      </div>
      <!-- 3.创建视图模型 -->
      <script>
          // [1]此时由于挂载点选择多个HTML元素，则只会对第一个元素生效；
          const mv2=new Vue({
              el:'#app',
              // 模型
              data:{
                  person:{
                      name:'chaochao',
                      age:'20',
                      area:'中国'
                  }
              }
          })
      </script>
  </body>
  </html>

$el 与 $mount的优先级

在这里插入图片描述
通过上述流程图可以看出$el的优先级高于 $mount，若是同时出现以 $el为准；

乖女子@@@

关注

3
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
Vue笔记_挂载点(el+$mount)

在Vue中不再和HTML直接进行交互了，而是将其挂载到DOM元素上,当数据发生变化的时候数据变化->操作DOM->更改数据，但是操作DOM->更改数据是通过Vue内部虚拟DOM 完成的，表现是数据驱动视图改变！// [2]没有设置挂载点，vue不知道将数据渲染到哪个视图上，将插值语法按照普通文本显示。2）若是希望data中的数据能够对多个元素生效，可以将vue实例挂载到父元素上；// [1]此时由于挂载点选择多个HTML元素，则只会对第一个元素生效；
复制链接

扫一扫