• 技术文章 >web前端 >前端问答

    vue中的el是指什么简写

    青灯夜游青灯夜游2022-12-13 18:12:25原创72

    在vue中,el是element的缩写,可称之为挂载点。el的作用是提供一个在页面上已存在的DOM元素作为Vue实例的挂载目标,可以是CSS选择器,也可以是一个HTMLElement实例;在实例挂载之后,元素可以用“vm.$el”访问。

    大前端零基础入门到就业:进入学习

    本教程操作环境:windows7系统、vue3版,DELL G3电脑。

    el是element的缩写,可称之为挂载点。原理来自于:MVC架构中,使用一个标签当做容器包住一些标签,使得标签被重新渲染,同时保留一些必要的属性。

    每个vue2.0项目中我们都会看到入口文件(即main.js)中,在生成根实例时会配置el属性,而我们自己创建的组件中则不能配置该属性,下面引用了官方文档中对el属性的说明:

    el

    • 类型string | Element

    • 限制:只在用 new 创建实例时生效。

    • 详细

      提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标。可以是 CSS 选择器,也可以是一个 HTMLElement 实例。【相关推荐:vuejs视频教程web前端开发

      在实例挂载之后,元素可以用 vm.$el 访问。

      如果在实例化时存在这个选项,实例将立即进入编译过程,否则,需要显式调用 vm.$mount() 手动开启编译。

    简单来说el的作用就是表明我们要将当前vue组件生成的实例插入到页面的哪个元素中,el属性的值可以是css选择器的字符串,或者直接就是对应的元素对象。并且只能在使用new生成实例时才能配置el属性,而我们在组件中只是export一个配置对象,如果设置了el则会报错。

    // 错误使用方式,在组件中设置el
    // 提示错误: [Vue warn]: option "el" can only be used during instance creation with the `new` keyword.
    export default {
        el: '#app'
    }
     
    // 正确写法
    var vm = new Vue({
        el: '#app'
    })

    我们再看看项目中的index.html。

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
        <title>backstage</title>
      </head>
      <body>
        <!-- {el:'#app'} 即把这里的元素作为根实例的挂载对象 -->
        <div id="app"></div>
      </body>
    </html>

    打印vm.$el,会发现实例已经被挂载到el对于的元素中:

    (学习视频分享:vuejs入门教程编程基础视频

    以上就是vue中的el是指什么简写的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。

    前端(VUE)零基础到就业课程:点击学习

    清晰的学习路线+老师随时辅导答疑

    自己动手写 PHP MVC 框架:点击学习

    快速了解MVC架构、了解框架底层运行原理

    专题推荐:vue3 Vue vue.js
    上一篇:什么是vue单页面和多页面 下一篇:自己动手写 PHP MVC 框架(40节精讲/巨细/新人进阶必看)

    相关文章推荐

    • ❤️‍🔥共22门课程,总价3725元,会员免费学• ❤️‍🔥接口自动化测试不想写代码?• vue缓存组件是什么意思• 聊聊Vue2为什么能通过this访问各种选项中属性• 详解Vue3+Vite中怎么使用JSX• vscode插件分享: 6个Vue3开发必备插件• 分享一个VUE页面声音+标题闪烁通知的组件(附使用方法)
    1/1

    PHP中文网