簡單說說vue中的el屬性
阿新 • • 發佈：2021-01-24
技術標籤：vuevuejavascript
每個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。
<!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對於的元素中：
