vue中的el是指什麼簡寫
- 青灯夜游原創
- 2022-12-13 18:12:257308瀏覽
在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中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
上一篇：什麼是vue單頁和多頁面下一篇：什麼是vue單頁和多頁面