关于vue中的el属性

Moon__T

于 2024-03-21 17:59:39 发布

阅读量316

点赞数 3

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/moon_zq/article/details/136916139

版权

什么是el

el是vue中的一个重要属性，存在于根实例或者需要被挂载的父组件中，用于指定vue实例将要管理的DOM元素。这意味着当我们创建vue的根实例时，我们可以通过el属性来告诉vue哪个DOM元素应该被实例接管。

示例：

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>Vue Example</title>  
</head>  
<body>  
    <div id="app">  
        {{ message }}  
    </div>  
  
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>  
    <script src="main.js"></script>  
</body>  
</html>

在main.js文件中，我们创建一个新的Vue实例，并使用el属性将其与ID为app的<div>元素进行绑定

// main.js  
new Vue({  
    el: '#app',  
    data: {  
        message: 'Hello, Vue!'  
    }  
});

在这个例子中，el: '#app'告诉Vue实例去查找页面中ID为app的元素，并将它作为Vue实例管理的DOM元素。然后，Vue实例会将{{ message }}占位符替换为data对象中的message属性的值，即Hello, Vue!。

需要注意的是：我们通常不会在组件选项中直接设置el属性

// MyComponent.vue   假设这是一个简单的vue组件
<template>  
    <div>  
        <h1>{{ title }}</h1>  
    </div>  
</template>  
  
<script>  
export default {  
    data() {  
        return {  
            title: 'This is My Component'  
        };  
    }  
};  
</script>

在父组件或根实例中，我们会这样使用这个组件：

<!-- 在父组件或根实例的模板中 -->  
<div id="app">  
    <my-component></my-component>  
</div>

// 在父组件或根实例的脚本中  
import MyComponent from './MyComponent.vue';  
  
new Vue({  
    el: '#app',  
    components: {  
        'my-component': MyComponent  
    }  
});

在这个例子中，虽然我们没有在MyComponent组件中设置el属性，但是当我们在父组件或根实例中注册并使用<my-component></my-component>标签时，Vue会自动处理组件的挂载。Vue会查找匹配的<my-component></my-component>标签，并将其替换为组件的模板内容。组件的data、methods等选项会应用于这个模板，就像它们在Vue实例中一样。

总结来说，el属性在Vue实例中用于指定Vue将要管理的DOM元素。在组件中，虽然不直接设置el属性，但组件的模板和选项会由父组件或根实例来管理和挂载到相应的DOM位置。

Moon__T

关注

3
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
关于vue中的el属性

el是vue中的一个重要属性，存在于根实例或者需要被挂载的父组件中，用于指定vue实例将要管理的DOM元素。这意味着当我们创建vue的根实例时，我们可以通过el属性来告诉vue哪个DOM元素应该被实例接管。
复制链接

扫一扫