新聞中心
#概覽

創(chuàng)新互聯(lián)建站云計(jì)算的互聯(lián)網(wǎng)服務(wù)提供商,擁有超過13年的服務(wù)器租用、多線服務(wù)器托管、云服務(wù)器、虛擬主機(jī)、網(wǎng)站系統(tǒng)開發(fā)經(jīng)驗(yàn),已先后獲得國(guó)家工業(yè)和信息化部頒發(fā)的互聯(lián)網(wǎng)數(shù)據(jù)中心業(yè)務(wù)許可證。專業(yè)提供云主機(jī)、虛擬主機(jī)、域名注冊(cè)、VPS主機(jī)、云服務(wù)器、香港云服務(wù)器、免備案服務(wù)器等。
- 非兼容:自定義元素白名單現(xiàn)在在模板編譯期間執(zhí)行,應(yīng)該通過編譯器選項(xiàng)而不是運(yùn)行時(shí)配置來(lái)配置。
- 非兼容:特定
isprop 用法僅限于保留的標(biāo)記。 - 新增:有了新的
v-is指令來(lái)支持 2.x 用例,其中在原生元素上使用了v-is來(lái)處理原生 HTML 解析限制。
#自主定制元素
如果我們想添加在 Vue 外部定義的自定義元素 (例如使用 Web 組件 API),我們需要“指示”Vue 將其視為自定義元素。讓我們以下面的模板為例。
#2.x 語(yǔ)法
在 Vue 2.x 中,將標(biāo)記作為自定義元素白名單是通過 Vue.config.ignoredElements:
// 這將使Vue忽略在Vue外部定義的自定義元素
// (例如:使用 Web Components API)
Vue.config.ignoredElements = ['plastic-button']#3.x 語(yǔ)法
在 Vue 3.0 中,此檢查在模板編譯期間執(zhí)行指示編譯器將 視為自定義元素:
- 如果使用生成步驟:將
isCustomElement傳遞給 Vue 模板編譯器,如果使用vue-loader,則應(yīng)通過vue-loader的compilerOptions選項(xiàng)傳遞:
// webpack 中的配置
rules: [
{
test: /\.vue$/,
use: 'vue-loader',
options: {
compilerOptions: {
isCustomElement: tag => tag === 'plastic-button'
}
}
}
// ...
]- 如果使用動(dòng)態(tài)模板編譯,請(qǐng)通過
app.config.isCustomElement傳遞:
const app = Vue.createApp({})
app.config.isCustomElement = tag => tag === 'plastic-button'需要注意的是,運(yùn)行時(shí)配置只會(huì)影響運(yùn)行時(shí)模板編譯——它不會(huì)影響預(yù)編譯的模板。
#定制內(nèi)置元素
自定義元素規(guī)范提供了一種將自定義元素用作自定義內(nèi)置模板的方法,方法是向內(nèi)置元素添加 is 屬性:
Vue 對(duì) is 特殊 prop 的使用是在模擬 native attribute 在瀏覽器中普遍可用之前的作用。但是,在 2.x 中,它被解釋為渲染一個(gè)名為 plastic-button 的 Vue 組件,這將阻止上面提到的自定義內(nèi)置元素的原生使用。
在 3.0 中,我們僅將 Vue 對(duì) is 屬性的特殊處理限制到 tag。
- 在保留的
tag 上使用時(shí),它的行為將與 2.x 中完全相同;
- 在普通組件上使用時(shí),它的行為將類似于普通 prop:
- 2.x 行為:渲染
bar組件。 - 3.x 行為:通過
isprop 渲染foo組件。
- 在普通元素上使用時(shí),它將作為
is選項(xiàng)傳遞給createElement調(diào)用,并作為原生 attribute 渲染,這支持使用自定義的內(nèi)置元素。
- 2.x 行為:渲染
plastic-button組件。
- 3.x 行為:通過回調(diào)渲染原生的 button。
document.createElement('button', { is: 'plastic-button' })
#v-is 用于 DOM 內(nèi)模板解析解決方案
提示:本節(jié)僅影響直接在頁(yè)面的 HTML 中寫入 Vue 模板的情況。 在 DOM 模板中使用時(shí),模板受原生 HTML 解析規(guī)則的約束。一些 HTML 元素,例如
,
,
和


咨詢
建站咨詢