簡(jiǎn)單理解vue中el、template、replace元素
本文實(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 訪問(wèn)。
用在 Vue.extend 中必須是函數(shù)值，這樣所有實(shí)例不會(huì)共享元素。
如果在初始化時(shí)指定了這個(gè)選項(xiàng)，實(shí)例將立即進(jìn)入編譯過(guò)程。否則，需要調(diào)用 vm.$mount()，手動(dòng)開(kāi)始編譯。
template
類型： String
詳細(xì)：
實(shí)例模板。模板默認(rèn)替換掛載元素。如果 replace 選項(xiàng)為 false，模板將插入掛載元素內(nèi)。兩種情況下，掛載元素的內(nèi)容都將被忽略，除非模板有內(nèi)容分發(fā) slot。
如果值以 # 開(kāi)始，則它用作選項(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>
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
當(dāng)我們?cè)赩ue.js項(xiàng)目中引用圖片時(shí)，關(guān)于圖片路徑有以下幾種情形,下面通過(guò)本文給大家分享Vue.js中的圖片引用路徑的方式，感興趣的朋友一起看看吧2017-07-07
Vue在自定義指令綁定的處理函數(shù)中傳遞參數(shù)
這篇文章主要介紹了Vue在自定義指令綁定的處理函數(shù)中傳遞參數(shù)方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-03-03
ElementUI多個(gè)子組件表單的校驗(yàn)管理實(shí)現(xiàn)
這篇文章主要介紹了ElementUI多個(gè)子組件表單實(shí)現(xiàn)方法,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
vue如何實(shí)現(xiàn)pc和移動(dòng)端布局詳細(xì)代碼
這篇文章主要給大家介紹了關(guān)于vue如何實(shí)現(xiàn)pc和移動(dòng)端布局的相關(guān)資料, Vue響應(yīng)式布局適配是一種根據(jù)設(shè)備特性自動(dòng)調(diào)整布局的方法,文中通過(guò)代碼以及圖文介紹的非常詳細(xì),需要的朋友可以參考下2023-10-10
vue.js學(xué)習(xí)之vue-cli定制腳手架詳解
這篇文章主要給大家介紹了vue.js學(xué)習(xí)之vue-cli定制腳手架的相關(guān)資料，文中介紹的非常詳細(xì)，對(duì)大家具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面跟著小編一起來(lái)學(xué)習(xí)學(xué)習(xí)吧。2017-07-07
這篇文章主要介紹了bpmn-js在vue中的基本使用及操作功能,本文通過(guò)示例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友跟隨小編一起看看吧2024-02-02
vue學(xué)習(xí)筆記之vue1.0和vue2.0的區(qū)別介紹
今天我們來(lái)說(shuō)一說(shuō)vue1.0和vue2.0的主要變化有哪些？對(duì)vue相關(guān)知識(shí)感興趣的朋友一起學(xué)習(xí)吧2017-05-05
這篇文章主要介紹了vue3常用的API使用簡(jiǎn)介，幫助大家更好的理解和學(xué)習(xí)使用vue，感興趣的朋友可以了解下2021-03-03
Vue的export?default和帶返回值的data()及@符號(hào)的用法說(shuō)明
這篇文章主要介紹了Vue的export?default和帶返回值的data()及@符號(hào)的用法說(shuō)明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-03-03
vue+electron 自動(dòng)更新的實(shí)現(xiàn)代碼
這篇文章主要介紹了vue+electron 自動(dòng)更新的實(shí)現(xiàn)代碼,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2024-02-02