Vue_el挂载点

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>Documenttitle>
       
       <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
head>
<body>
    
    <div id="app">
        <p>{{person.name}}p>
        <p>{{person.age}}p>
        <p>{{person.area}}p>
    div>
    
    <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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

[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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

上述代码结果如下

和以下代码结果执行相同

  <!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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

$el 与 $mount的优先级

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

相关阅读:
java反射全面复习
Verilog 代码规范
【云原生 | Docker】腾讯云部署Django项目（服务器选型、git配置、docker三分钟部署）
如何理解张量、张量索引、切片、张量维度变换
双绞线连接网卡和集线器时的制作步骤
记一次排查：接口返回值写入excel后，从单元格copy出来的数据会带有多重引号的问题
参加 KubeCon+CloudNativeCon+Open Source Summit China 2023 的 N 个理由
Effective C++ 阅读笔记 05：实现
面试突击61：说一下MySQL事务隔离级别？
nginx重写与防盗链

原文地址：https://blog.csdn.net/qq_43260366/article/details/126906570

Vue_el挂载点

目录

el挂载点

作用

参数

注意点

$mount

$el 与 $mount的优先级