簡單理解vue中el、template、replace元素
阿新 • • 發佈:2018-12-12
el
型別: String | HTMLElement | Function
限制: 在元件定義中只能是函式。
詳細:
為例項提供掛載元素。值可以是 CSS 選擇符,或實際 HTML 元素,或返回 HTML 元素的函式。注意元素只用作掛載點。如果提供了模板則元素被替換,除非 replace 為 false。元素可以用 vm.$el 訪問。
用在 Vue.extend 中必須是函式值,這樣所有例項不會共享元素。
如果在初始化時指定了這個選項,例項將立即進入編譯過程。否則,需要呼叫 vm.$mount(),手動開始編譯。
template
型別: String
詳細:
例項模板。模板預設替換掛載元素。如果 replace 選項為 false,模板將插入掛載元素內。兩種情況下,掛載元素的內容都將被忽略,除非模板有內容分發 slot。
如果值以 # 開始,則它用作選項符,將使用匹配元素的 innerHTML 作為模板。常用的技巧是用 <script type="x-template"> 包含模板。
注意在一些情況下,例如如模板包含多個頂級元素,或只包含普通文字,例項將變成一個片斷例項,管理多個節點而不是一個節點。片斷例項的掛載元素上的非流程控制指令被忽略。
replace
型別: Boolean
預設值: true
限制: 只能與 template 選項一起用
詳細:
決定是否用模板替換掛載元素。如果設為 true(這是預設值),模板將覆蓋掛載元素,併合並掛載元素和模板根節點的 attributes。如果設為 false 模板將覆蓋掛載元素的內容,不會替換掛載元素自身。
例:
<div id="replace" class="foo"></div>
new Vue({
el: '#replace',
template: '<p class="bar">replaced</p>'
})
結果:
<p class="foo bar" id="replace">replaced</p>
replace 設為 false:
<div id="insert" class="foo"></div>
new Vue({ el: '#insert', replace: false, template: '<p class="bar">inserted</p>' })
結果:
<div id="insert" class="foo">
<p class="bar">inserted</p>
</div>