vue 中的 el


限制: 在組件定義中只能是函數。

詳細:

為實例提供掛載元素。值可以是 CSS 選擇符,或實際 HTML 元素,或返回 HTML 元素的函數。注意元素只用作掛載點。如果提供了模板則元素被替換,除非 replace 為 false。元素可以用 vm.$el 訪問。

用在 Vue.extend 中必須是函數值,這樣所有實例不會共享元素。

如果在初始化時指定了這個選項,實例將立即進入編譯過程。否則,需要調用 vm.$mount(),手動開始編譯。

提供的元素只能作為掛載點。不同於 Vue 1.x,所有的掛載元素會被 Vue 生成的 DOM 替換。因此不推薦掛載 root 實例到 <html> 或者 <body> 上。

如果 render 函數和 template 屬性都不存在,掛載 DOM 元素的 HTML 會被提取出來用作模板,此時,必須使用 Runtime + Compiler 構建的 Vue 庫。

el 的作用大家都知道,用於指明 Vue 實例的掛載目標。我們重點關注上面兩個部分,總結一下就是:如果存在 render 函數或 template 屬性,則掛載元素會被 Vue 生成的 DOM 替換;否則,掛載元素所在的 HTML 會被提取出來用作模版

1

2

3

4

5

6

7

8

9

10

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title></title>

    </head>

    <body>

        <div id="ppp"></div>

    </body>

</html>

例:render 函數渲染的 DOM 替換 <div id="ppp"></div>

1

2

3

4

5

6

new Vue({

    el: '#ppp',

    router,

    store,

    render: h => h(App)

})


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM