vue中的el是指什麼簡寫

在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。

nbsp;html>

  
    <meta>
    <meta>
    <title>backstage</title>
  
  
    <!-- {el：&#39;#app&#39;} 即把这里的元素作为根实例的挂载对象 -->
    <div></div>
  

列印vm.$el，會發現實例已經被掛載到el對於的元素中：

（學習影片分享： vuejs入門教學、程式設計基礎影片）

以上是vue中的el是指什麼簡寫的詳細內容。更多資訊請關注PHP中文網其他相關文章！