vue中的el是指什么简写-前端问答-PHP中文网

vue中的el是指什么简写

青灯夜游

发布： 2022-12-13 18:12:25

原创

9984人浏览过

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

vue中的el是指什么简写

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

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

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

el

类型：string | Element

立即学习“前端免费学习笔记（深入）”；

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

详细：

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

Perl Lwp 文档 chm版
LWP是Library for Web access in Perl的缩写，用途说得很清楚，就是一个访问Web服务器的Perl包。利用LWP这个包，我们可以很方便的在我们的perl脚本里面访问外部的Web服务器上面的资源。为什么要用LWP？现在的网站应用越做越复杂，要想简单的写一个Sockettelnet去用GET指令获取资源简直是不可能的，特别是一些需要用口令登陆的网站。如果你只想简单获取一些资源而不想写太多比较复杂的代码的话，那么就应该选用一个合适的封装起来的HTTPD模块。这些文件的确国内

0

查看详情

在实例挂载之后，元素可以用 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对于的元素中：