溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

vue的el是什么及有什么作用

發(fā)布時(shí)間：2022-12-14 09:34:00 來源：億速云 閱讀：158 作者：iii 欄目：web開發(fā)

本篇內(nèi)容介紹了“vue的el是什么及有什么作用”的有關(guān)知識(shí)，在實(shí)際案例的操作過程中，不少人都會(huì)遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

在vue中，el是element的縮寫，可稱之為掛載點(diǎn)。el的作用是提供一個(gè)在頁(yè)面上已存在的DOM元素作為Vue實(shí)例的掛載目標(biāo)，可以是CSS選擇器，也可以是一個(gè)HTMLElement實(shí)例；在實(shí)例掛載之后，元素可以用“vm.$el”訪問。

el是element的縮寫，可稱之為掛載點(diǎn)。原理來自于：MVC架構(gòu)中，使用一個(gè)標(biāo)簽當(dāng)做容器包住一些標(biāo)簽，使得標(biāo)簽被重新渲染，同時(shí)保留一些必要的屬性。

每個(gè)vue2.0項(xiàng)目中我們都會(huì)看到入口文件(即main.js)中，在生成根實(shí)例時(shí)會(huì)配置el屬性，而我們自己創(chuàng)建的組件中則不能配置該屬性，下面引用了官方文檔中對(duì)el屬性的說明：

el

  • 類型：string | Element

  • 限制：只在用 new 創(chuàng)建實(shí)例時(shí)生效。

  • 詳細(xì)：

    提供一個(gè)在頁(yè)面上已存在的 DOM 元素作為 Vue 實(shí)例的掛載目標(biāo)?？梢允?CSS 選擇器，也可以是一個(gè) HTMLElement 實(shí)例。

    在實(shí)例掛載之后，元素可以用 vm.$el 訪問。

    如果在實(shí)例化時(shí)存在這個(gè)選項(xiàng)，實(shí)例將立即進(jìn)入編譯過程，否則，需要顯式調(diào)用 vm.$mount() 手動(dòng)開啟編譯。

簡(jiǎn)單來說el的作用就是表明我們要將當(dāng)前vue組件生成的實(shí)例插入到頁(yè)面的哪個(gè)元素中，el屬性的值可以是css選擇器的字符串，或者直接就是對(duì)應(yīng)的元素對(duì)象。并且只能在使用new生成實(shí)例時(shí)才能配置el屬性，而我們?cè)诮M件中只是export一個(gè)配置對(duì)象，如果設(shè)置了el則會(huì)報(bào)錯(cuò)。

// 錯(cuò)誤使用方式，在組件中設(shè)置el
// 提示錯(cuò)誤： [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'
})

我們?cè)倏纯错?xiàng)目中的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'} 即把這里的元素作為根實(shí)例的掛載對(duì)象 -->
    <div id="app"></div>
  </body>
</html>

打印vm.$el，會(huì)發(fā)現(xiàn)實(shí)例已經(jīng)被掛載到el對(duì)于的元素中：

vue的el是什么及有什么作用

“vue的el是什么及有什么作用”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

vue
AI
助
手