本文實(shí)例為大家解析了vue中el、template、replace的元素，供大家參考，具體內(nèi)容如下

api: http://cn.vuejs.org/api/#el

el

類型： String | HTMLElement | Function

限制： 在組件定義中只能是函數(shù)。

詳細(xì)：

為實(shí)例提供掛載元素。值可以是 CSS 選擇符，或?qū)嶋H HTML 元素，或返回 HTML 元素的函數(shù)。注意元素只用作掛載點(diǎn)。如果提供了模板則元素被替換，除非 replace 為 false。元素可以用 vm.$el 訪問。

用在 Vue.extend 中必須是函數(shù)值，這樣所有實(shí)例不會(huì)共享元素。

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

template

類型： String

詳細(xì)：

實(shí)例模板。模板默認(rèn)替換掛載元素。如果 replace 選項(xiàng)為 false，模板將插入掛載元素內(nèi)。兩種情況下，掛載元素的內(nèi)容都將被忽略，除非模板有內(nèi)容分發(fā) slot。

如果值以 # 開始，則它用作選項(xiàng)符，將使用匹配元素的 innerHTML 作為模板。常用的技巧是用 <script type="x-template"> 包含模板。

注意在一些情況下，例如如模板包含多個(gè)頂級(jí)元素，或只包含普通文本，實(shí)例將變成一個(gè)片斷實(shí)例，管理多個(gè)節(jié)點(diǎn)而不是一個(gè)節(jié)點(diǎn)。片斷實(shí)例的掛載元素上的非流程控制指令被忽略。

replace

類型： Boolean

默認(rèn)值： true

限制： 只能與 template 選項(xiàng)一起用

詳細(xì)：

決定是否用模板替換掛載元素。如果設(shè)為 true（這是默認(rèn)值），模板將覆蓋掛載元素，并合并掛載元素和模板根節(jié)點(diǎn)的 attributes。如果設(shè)為 false 模板將覆蓋掛載元素的內(nèi)容，不會(huì)替換掛載元素自身。

示例：

<div id="replace" class="foo"></div>

new Vue({
 el: '#replace',
 template: '<p class="bar">replaced</p>'
})

結(jié)果：

<p class="foo bar" id="replace">replaced</p>

replace 設(shè)為 false：

<div id="insert" class="foo"></div>

new Vue({
 el: '#insert',
 replace: false,
 template: '<p class="bar">inserted</p>'
})

結(jié)果：

<div id="insert" class="foo">
 <p class="bar">inserted</p>
</div>

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論