元件介紹-Day03 #元件樣板及綁定方法


  • 樣板 -> 就是html

樣板建立方式

方法1- template

  • 渲染後:

方法2- x-template



方法3- 單文件元件(單一檔案包含html,css,js)

  • 在vue cli會介紹

元件運用

  • 當我們建立元件之後,有哪幾種元件運用的形式呢?
    ### 標籤綁定-建立/註冊元件時的“元件名稱”直接作為html樣板中的“標籤名稱”做使用
  • 意思是你只要建立一個元件叫做“alert”之後,你可以在html樣板中任意使用這個作為標籤名<alert><alert>,他會將你所寫入的template或是x-template的內容渲染在畫面中

標籤綁定 + 搭配v-for 也沒有問題


使用v-is作為綁定

  • 這個綁定方式就不限制外面的html標籤一定要使用“元件名稱”,可以使用htm現有的任何標籤名:
    <div v-is="'元件名稱'"></div>
  • 在使用v-is作為屬性時,要先加“雙引號”,裡面再加入'單引號',然後元件名稱再插入到這個'單引號裡面'
    <div v-is="'alert'"></div>

使用v-is作為綁定+動態屬性(任何標籤均可搭配v-is 進行動態切換)



  • v-is也可以縮寫但是要搭配,component這個標籤(不建議使用v-is縮寫)

動態標籤實戰技巧

  • 當我們把一個元件table-row註冊好,並綁定在table中的tbody標籤內,會發現結果想像不同

  • 這是因為在table標籤中,tbody這個標籤裡面只能接tr這個標籤,否則無效,因此在實際渲染時,即使table-row標籤內的內容是tr但tbody還是無法如期顯現!以下是替代方式:
#元件樣板







你可能感興趣的文章

F2E合作社|select下拉選單|Bootstrap 5網頁框架開發入門

F2E合作社|select下拉選單|Bootstrap 5網頁框架開發入門

# JavaScript Immutable ( 不可變 ) 概念

# JavaScript Immutable ( 不可變 ) 概念

JS 的浮點數精準度問題 & 十進位小數轉二進位小數

JS 的浮點數精準度問題 & 十進位小數轉二進位小數






留言討論