vue-選項(xiàng) / DOM

el

類型:string | Element

限制:只在用?new?創(chuàng)建實(shí)例時(shí)生效。

詳細(xì)

提供一個(gè)在頁(yè)面上已存在的 DOM 元素作為 Vue 實(shí)例的掛載目標(biāo)。可以是 CSS 選擇器,也可以是一個(gè) HTMLElement 實(shí)例。

在實(shí)例掛載之后,元素可以用?vm.$el?訪問。

如果在實(shí)例化時(shí)存在這個(gè)選項(xiàng),實(shí)例將立即進(jìn)入編譯過(guò)程,否則,需要顯式調(diào)用?vm.$mount()手動(dòng)開啟編譯。

提供的元素只能作為掛載點(diǎn)。不同于 Vue 1.x,所有的掛載元素會(huì)被 Vue 生成的 DOM 替換。因此不推薦掛載 root 實(shí)例到?<html>?或者?<body>?上。

如果?render?函數(shù)和?template?屬性都不存在,掛載 DOM 元素的 HTML 會(huì)被提取出來(lái)用作模板,此時(shí),必須使用 Runtime + Compiler 構(gòu)建的 Vue 庫(kù)。

參考

生命周期圖示

運(yùn)行時(shí) + 編譯器 vs. 只包含運(yùn)行時(shí)

template

類型:string

詳細(xì)

一個(gè)字符串模板作為 Vue 實(shí)例的標(biāo)識(shí)使用。模板將會(huì)?替換?掛載的元素。掛載元素的內(nèi)容都將被忽略,除非模板的內(nèi)容有分發(fā)插槽。

如果值以?#?開始,則它將被用作選擇符,并使用匹配元素的 innerHTML 作為模板。常用的技巧是用?<script type="x-template">?包含模板。

出于安全考慮,你應(yīng)該只使用你信任的 Vue 模板。避免使用其他人生成的內(nèi)容作為你的模板。

如果 Vue 選項(xiàng)中包含渲染函數(shù),該模板將被忽略。

參考

生命周期圖示

通過(guò)插槽分發(fā)內(nèi)容

render

類型:(createElement: () => VNode) => VNode

詳細(xì)

字符串模板的代替方案,允許你發(fā)揮 JavaScript 最大的編程能力。該渲染函數(shù)接收一個(gè)?createElement?方法作為第一個(gè)參數(shù)用來(lái)創(chuàng)建?VNode。

如果組件是一個(gè)函數(shù)組件,渲染函數(shù)還會(huì)接收一個(gè)額外的?context?參數(shù),為沒有實(shí)例的函數(shù)組件提供上下文信息。

Vue 選項(xiàng)中的?render?函數(shù)若存在,則 Vue 構(gòu)造函數(shù)不會(huì)從?template?選項(xiàng)或通過(guò)?el選項(xiàng)指定的掛載元素中提取出的 HTML 模板編譯渲染函數(shù)。

參考渲染函數(shù)

renderError

2.2.0 新增

類型:(createElement: () => VNode, error: Error) => VNode

詳細(xì)

只在開發(fā)者環(huán)境下工作。

當(dāng)?render?函數(shù)遭遇錯(cuò)誤時(shí),提供另外一種渲染輸出。其錯(cuò)誤將會(huì)作為第二個(gè)參數(shù)傳遞到?renderError。這個(gè)功能配合 hot-reload 非常實(shí)用。

示例

newVue({? render (h) {thrownewError('oops')? },? renderError (h, err) {returnh('pre', {style: {color:'red'}}, err.stack)? }}).$mount('#app')

參考渲染函數(shù)

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容