Vue笔记整理，让你快速入门Vue.js：02_2.Vue基础：el 挂载点

最新推荐文章于 2023-05-09 04:06:16 发布

被开发耽误的大厨

最新推荐文章于 2023-05-09 04:06:16 发布

阅读量465

点赞数

分类专栏： web前端（H5）

本文为博主原创文章，不得随意转载，转载请注明出处！！！

本文链接：https://blog.csdn.net/YuDBL/article/details/104996657

版权

web前端（H5）专栏收录该内容

83 篇文章 15 订阅

订阅专栏

上一节咱们学习了如何跑起来第一个Vue程序，在创建Vue实例的时候有两个属性分别是：el 和 data，接下来我们来学习下这两个属性

一、el挂载点

el属性的意思是设置挂载点，通过css选择器，设置vue实例管理的元素。

设置完毕之后，el命中的元素内部，使用两个大括号修饰的部分，就会被data中同名属性的数据所替换，

如下图：左边的message 被替换为黑马程序员

不知道大家是否一样，在这里我有几个疑问：

Vue实例的作用范围是什么呢？

Vue是否支持其他的选择器？

Vue是否可以设置其他的dom元素呢？

二、Vue实例的作用范围是什么呢？

1、实例代码测试

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>02_Vue实例的作用范围</title>
</head>

<body>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <!-- 外部元素，不起作用 -->
    {{ message }}
    <div id="app">
        {{ message }}
        <!-- 内部多层嵌套元素，起作用 -->
        <span>{{ message }}</span> 
        <span><h2>{{ message }}</h2></span>
    </div>

    <script>
        var app = new Vue({
                el: '#app',
                data: {
                    message: '你好程序员！'
                }
            })
    </script>

</body>

</html>

2、效果展示

3、结论

外部元素，不起作用；内部多层嵌套元素，都起作用

三、是否支持其他的选择器？

1、实例代码测试

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>03_是否支持其他的选择器</title>
</head>

<body>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <!-- 1、id选择器 -->
    <!-- <div id="app"> -->
    <!-- 2、类(class)选择器 -->
    <!-- <div class="app"> -->
    <!-- 3、标签选择器 -->
    <div>
        {{ message }}
    </div>

    <script>
        var app = new Vue({
                //el: '#app',//id选择器
                //el:'.app',//类(class)选择器
                el:"div",//标签选择器
                data: {
                    message: '你好程序员'
                }
            })
    </script>

</body>

</html>

2、效果展示

3、结论

支持其他选择器。

这里就演示三个选择器，还有其他的选择器就不一一演示了，因为实际开发中一般我们建议使用id选择器。那么为什么呢？

因为id选择器在开发的时候，一般我们会约定它是唯一的，而类选择器和标签选择器，都可以命中多个元素，会造成语义上的不清晰，所以我们建议使用的是id选择器。

四、是否可以设置其他的dom元素呢？

1、实例代码测试

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>04_是否可以设置其他的dom元素</title>
</head>

<body>
<!-- 4、不能挂载到body标签上面 -->
<!-- <body id="body"> -->

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <!-- 1、div标签 -->
    <!-- <div id="app">
        {{ message }}
    </div> -->

    <!-- 2、p标签 -->
    <!-- <p id="app">
        {{ message }}
    </p> -->

    <!-- 3、h2标签 -->
    <h2 id="app">
        {{ message }}
    </h2>

    <script>
        var app = new Vue({
                el: '#app',
                // el: "#body",//不行，会报错
                data: {
                    message: '你好程序员'
                }
            })
    </script>

</body>

</html>

2、效果展示

当挂载 body标签上面报如下警告：

Do not mount Vue to <html> or <body> - mount to normal elements instead.

意思就是：不要把Vue挂载到html标签或body标签上，挂载到其他的普通元素上

3、结论

不要把Vue挂载到html标签或body标签上，挂载到其他的普通元素上

支持大部分标签，只支持双标签不支持单标签，如单标签没办法在内部写{{ message }}。

这里我们建议使用div作为挂载的元素，为什么呢？

因为div它没有什么额外的样式，但像p标签、h2标签等它们都有独有的样式，所以不建议使用

五、内容-总结

被开发耽误的大厨

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
Vue笔记整理，让你快速入门Vue.js：02_2.Vue基础：el 挂载点

目录一、el挂载点二、Vue实例的作用范围是什么呢？1、实例代码测试2、效果展示3、结论三、是否支持其他的选择器？1、实例代码测试2、效果展示3、结论四、是否可以设置其他的dom元素呢？1、实例代码测试2、效果展示3、结论五、内容-总结上一节咱们学习了如何跑起来第一个Vue程序，在创建Vue实例的时候有两个属性分别是：el 和 data，...
复制链接

扫一扫