在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 实例。【相关推荐:官方文档、官方文档】
在实例挂载之后,元素可以用 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。
backstage
登录后复制
打印vm.$el,会发现实例已经被挂载到el对于的元素中:
(学习视频分享:官方文档、官方文档)
以上就是vue中的el是指什么简写的详细内容,更多请关注【创想鸟】其它相关文章!
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。
发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2924238.html