簡單理解vue中el、template、replace元素
本文實例為大家解析了vue中el、template、replace的元素,供大家參考,具體內(nèi)容如下
api: http://cn.vuejs.org/api/#el
el
類型: String | HTMLElement | Function
限制: 在組件定義中只能是函數(shù)。
詳細(xì):
為實例提供掛載元素。值可以是 CSS 選擇符,或?qū)嶋H HTML 元素,或返回 HTML 元素的函數(shù)。注意元素只用作掛載點。如果提供了模板則元素被替換,除非 replace 為 false。元素可以用 vm.$el 訪問。
用在 Vue.extend 中必須是函數(shù)值,這樣所有實例不會共享元素。
如果在初始化時指定了這個選項,實例將立即進入編譯過程。否則,需要調(diào)用 vm.$mount(),手動開始編譯。
template
類型: String
詳細(xì):
實例模板。模板默認(rèn)替換掛載元素。如果 replace 選項為 false,模板將插入掛載元素內(nèi)。兩種情況下,掛載元素的內(nèi)容都將被忽略,除非模板有內(nèi)容分發(fā) slot。
如果值以 # 開始,則它用作選項符,將使用匹配元素的 innerHTML 作為模板。常用的技巧是用 <script type="x-template"> 包含模板。
注意在一些情況下,例如如模板包含多個頂級元素,或只包含普通文本,實例將變成一個片斷實例,管理多個節(jié)點而不是一個節(jié)點。片斷實例的掛載元素上的非流程控制指令被忽略。
replace
類型: Boolean
默認(rèn)值: true
限制: 只能與 template 選項一起用
詳細(xì):
決定是否用模板替換掛載元素。如果設(shè)為 true(這是默認(rèn)值),模板將覆蓋掛載元素,并合并掛載元素和模板根節(jié)點的 attributes。如果設(shè)為 false 模板將覆蓋掛載元素的內(nèi)容,不會替換掛載元素自身。
示例:
<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)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
Vue在自定義指令綁定的處理函數(shù)中傳遞參數(shù)
這篇文章主要介紹了Vue在自定義指令綁定的處理函數(shù)中傳遞參數(shù)方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-03-03vue.js學(xué)習(xí)之vue-cli定制腳手架詳解
這篇文章主要給大家介紹了vue.js學(xué)習(xí)之vue-cli定制腳手架的相關(guān)資料,文中介紹的非常詳細(xì),對大家具有一定的參考學(xué)習(xí)價值,需要的朋友們下面跟著小編一起來學(xué)習(xí)學(xué)習(xí)吧。2017-07-07vue學(xué)習(xí)筆記之vue1.0和vue2.0的區(qū)別介紹
今天我們來說一說vue1.0和vue2.0的主要變化有哪些?對vue相關(guān)知識感興趣的朋友一起學(xué)習(xí)吧2017-05-05Vue的export?default和帶返回值的data()及@符號的用法說明
這篇文章主要介紹了Vue的export?default和帶返回值的data()及@符號的用法說明,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-03-03