Vue中el的两种写法

PleaSure乐事

于 2024-07-24 08:30:00 发布

阅读量282

点赞数 6

分类专栏：前端知识大赏文章标签： vue.js 前端 javascript vue 前端框架

本文链接：https://blog.csdn.net/m0_75262255/article/details/140649251

版权

前端知识大赏专栏收录该内容

7 篇文章 0 订阅

订阅专栏

大家好我是前端寄术区博主PleaSure乐事。今天了解到了Vue当中有关el的两种写法，记录下来与大家分享，希望对大家有所帮助。

方法一

解释

第一种方法我们直接用new创建并初始化一个新的 Vue 实例，并定义了 Vue 实例的数据对象，在给出的例子当中我们将message的值指定为pleasure。当message数据改变时，Vue 将自动更新页面上与这些数据相关的元素。比如我改成csdn，那么在网页中也会将显示hello，csdn的字样。

在Vue实例的构造函数中直接指定el选项时，Vue会在实例创建完成后立即查找并挂载到指定的Dom元素上。这种方式简洁明了，适用于大多数情况，特别是在单页面应用（SPA）中

代码与效果

<body>
    <div id="root">
        <h1>hello,{{message}}</h1>
    </div>
    <script src="node_modules/vue/dist/vue.js"></script>
    <script>
        new Vue({
            el:'#root',
            data(){
                return {
                    message:'pleasure'
                }
            }
        })
    </script>
</body>

方法二

解释

如果我们不使用el与new的vue实例进行配合，那么我们应该怎么做呢？此时如果我们删除el，会出现这样的效果：

此时我们就需要拿出mount方法进行对el的等效替代。使用mount方法允许延迟挂载 Vue 实例。这意味着可以在实例创建之后，根据应用的逻辑或条件来决定何时以及挂载到何处。代码实例如下：

代码与效果

<body>
    <div id="root">
        <h1>hello,{{message}}</h1>
    </div>
    <script src="node_modules/vue/dist/vue.js"></script>
    <script>
       const v = new Vue({
            //el:'#root',
            data(){
                return {
                    message:'pleasure'
                }
            }
        })
        v.$mount('#root')
    </script>
</body>

使用mount方法可以在以下方面提供更多优势：

动态决定挂载点：如果挂载点是动态生成的或是依赖于某些条件，使用mount可以提供更多的灵活性。
异步加载或延迟加载：在某些情况下，你可能希望等到某些异步操作完成后再挂载实例，比如数据预加载完成，或者在服务器端渲染（SSR）环境中，等待服务器响应后再挂载到客户端。
可复用的组件：如果你正在开发一个可复用的 Vue 组件，使用mount可以让使用者决定如何以及何时挂载这个组件。

此时我们甚至可以配合其他代码进行书写，比如我们可以让代码延迟1秒再发生，如下：

    <script>
       const v = new Vue({
            //el:'#root',
            data(){
                return {
                    message:'pleasure'
                }
            }
        })
        setTimeout(()=>{
            v.$mount('#root')
        },1000)
    </script>

这样，代码在1秒后才会显示pleasure，而非一开始就直接显示pleasure。

今天对vue当中el的两种书写方式的分享就到这里，希望对大家有所帮助，如果对您有帮助，希望您可以留下点赞投币与收藏，这对我真的很重要，非常感谢！