在vue中,el是element的縮寫,可稱為掛載點。 el的作用是提供一個在頁面上已存在的DOM元素作為Vue實例的掛載目標,可以是CSS選擇器,也可以是一個HTMLElement實例;在實例掛載之後,元素可以用“vm.$el”訪問。
本教學操作環境:windows7系統、vue3版,DELL G3電腦。
el是element的縮寫,可稱為掛載點。原理來自於:MVC架構中,使用一個標籤當做容器包住一些標籤,使得標籤被重新渲染,同時保留一些必要的屬性。
每個vue2.0專案中我們都會看到入口檔案(即main.js)中,在產生根實例時會配置el屬性,而我們自己建立的元件中則無法配置該屬性,下面引用了官方文件中對el屬性的說明:
el
簡單來說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對於的元素中:
以上是vue中的el是指什麼簡寫的詳細內容。更多資訊請關注PHP中文網其他相關文章!