Vue配置项之el

el

首先说明一下，本人是前端小学生级别的菜鸡，吐槽的话请口下留情，在评论区指出错误或者补充不足，我会很喜欢，互喷不会进步，相互指点才会。。。。谢谢大家啦

目录

• el
  • 目录
  • 示例
  • 原理

📌Vue.js 中的 el（Element）属性是 Vue 实例的一个配置选项。它用于指定 Vue 应用程序挂载到哪个DOM元素上。当一个Vue实例被创建时，el 属性告诉Vue应该将生成的视图（即由模板或render函数渲染出的DOM内容）附加到哪个实际存在的HTML元素内。强烈建议不要挂载body

示例

• 在全局 Vue 实例（如通常在应用入口文件中定义的应用根组件）中，el 可以是一个 CSS 选择器字符串或者直接是一个 HTMLElement 对象。在实例挂载之后，元素可以用 vm.$el 访问。
• 在组件定义中，由于组件通常是作为整体嵌入到其他组件中的，所以组件的 el 选项只能是一个返回 HTMLElement 的函数，并且仅在 Vue 2.x 版本的自定义元素和某些特定高级场景下使用；对于常规的单文件组件（.vue 文件），无需也并不允许设置 el 属性。
• 限制： 只在用 new 创建实例时生效。

1. new Vue时候配置el属性。

   // 页面 HTML 部分
   <div id="app">{{ message }}</div>
   
   // 全局 Vue 实例
   new Vue({
     el: '#app', // 这里 'app' 是页面中某个元素的id //el:'#root'
     data: {
       message: 'Hello, world!'
     }
   })
   

   在上面的例子中，Vue 实例通过 el: '#app' 指定了要挂载的 DOM 元素，即具有 id="app" 的 <div> 元素。当创建 Vue 实例时，Vue 将会在这个元素上建立实例与 DOM 的关联，并开始进行模板的编译和挂载操作。
2. 先创建**Vue实例，随后再通过vm.$mount('#root')指定el**的值。

   const vm = new Vue({
   data:{
     name:'赵新坤'
   }
   })
   console.log(v)
   //第二种写法，必须有变量接收实例才可以用，更灵活一点
   //可以用定时器包裹等。 
   vm.$mount('#root') 
   

   在整个过程中，Vue 通过虚拟 DOM 和响应式数据系统，实现了高效的页面渲染。Vue 会在数据发生变化时，重新计算虚拟 DOM，然后通过差异比对算法将变化的部分更新到实际的 DOM 上，从而实现数据驱动的视图更新。

原理

📌在Vue.js中，el属性用于指定一个已存在的 DOM 元素，Vue 将会在这个元素上挂载实例，从而建立起 Vue 实例与 DOM 之间的联系。这个过程是通过 Vue.js 的挂载（mounting）阶段来实现的。

• 选择元素： Vue首先会通过el选项获取到要挂载的DOM元素。
• 模板编译： 如果提供了template选项，Vue 会将模板进行编译，生成渲染函数。
• 挂载阶段： Vue 将渲染函数(render函数或者template编译后的渲染函数)与实例关联，然后将其挂载到指定的DOM元素上。
• 渲染： Vue 在挂载后会触发初始渲染，将虚拟 DOM 转换为真实 DOM，显示在页面上。