自定義元素

2022-09-19 05:15:15 字數 1252 閱讀 5232

自定義元素白名單

vue3中自定義元素檢測發生在模板編譯時,如果要新增一些vue之外的自定義元素,需要在編譯器選項中設定iscustomelement選項

使用vue-cli構建工具時,模板都會用vue-loader預編譯,設定它提供的compileroptions選項: vue.config.js

我們在vue.config.js檔案中配置白名單

module.exports=

return options})}

}

此時就不會彈出警告

使用vite,在vite.config.js中配置vuecompileroptions

module.exports=

}

如果採用是是執行時編譯版本的vue,可通過全域性配置iscustomelement 

注意:執行時配置只會影響執行時模板編譯,它不會影響預編譯的模板

is屬性僅限於用在component標籤上

vue3中設定動態元件時,is屬性僅僅能用於component標籤上

在保留的上使用時,它的行為與vue2.x中是完全相同

在普通元件上使用時,它的行為將類似於普通的prop

vue2.x行為:渲染ren元件

vue3.x行為:通過is prop渲染demo元件

在普通元素上使用時,它將作為is選項傳遞給createelement呼叫,並作為原生attribute渲染,這支援使用自定義的內建元素

點選
vue2.x行為:渲染barchart元件

vue3.x行為:通過**渲染原生的button

dom內模板解析使用v-is指令代替

案例: 

建立tablerow.vue

v-is像乙個動態的vue2.x中的 :is繫結 ,因此要按註冊名稱渲染元件,其值應為j**ascript字串文字

v-is="'tablerow'" v-for="(item,index) in items" :key="index" :data="item">

polymer 自定義元素學習

這是一篇 polymer 學習教程 關於polymer 自定義元素 的css詳解。有什麼不對的歡迎拍磚。css樣式優先規則 但同乙個元素有定義多個css樣式時優先規則是,使用權重值最高的那個樣式!css權值相等將使用最後的那條定義 style 權值為1000。d選擇器 id 權值為100。class...

簡易處理自定義QListWidget元素

2013年10月14日10 13 47 後來經過測試修改,使用起來可以了,不存在後面那行選不中的情況。整理符合要求 在操作的時候建議使用鍊錶的 qlist 的形式存起來,更加可以封裝好對應的資料結構,當在上面修改的時候可以跟著進行資料處理。畢竟介面不互動就沒有它的意義了 by again 2013 ...

取出頁面元素自定義屬性

此文是在閱讀了司徒正美的部落格內容,總結部分內容而得 html delete 自定義了名為aa的屬性 js function loadevent 我們會發現,瀏覽器彈出的是undefined,即我們無法通過該方法取出自定義的屬性aa的值。若想取出自定義的值,可以如下方式 function loade...