vue DOM模板解析


當使用 DOM 作為模板時 (例如,使用 el 選項來把 Vue 實例掛載到一個已有內容的元素上),你會受到 HTML 本身的一些限制,因為 Vue 只有在瀏覽器解析、規范化模板之后才能獲取其內容。尤其要注意,像 <ul><ol><table><select> 這樣的元素里允許包含的元素有限制,而另一些像 <option> 這樣的元素只能出現在某些特定元素的內部。

在自定義組件中使用這些受限制的元素時會導致一些問題,例如:

<table>
  <my-row>...</my-row>
</table>

自定義組件 <my-row> 會被當作無效的內容,因此會導致錯誤的渲染結果

變通的方案是使用特殊的 is 特性:

<table>
  <tr is="my-row"></tr>
</table>

應當注意,如果使用來自以下來源之一的字符串模板,則沒有這些限制:

  • <script type="text/x-template">
  • JavaScript 內聯模板字符串
  • .vue 組件


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM