元件介紹-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還是無法如期顯現！以下是替代方式：