Vue – Vue.component 組件教學 – 使用 v-bind、v-for、x-template

2017-06-04 / JSN / 4 Comments / 8,582 次瀏覽

剛學到 Vue.component 這部分的參數傳遞，覺得繞來繞去真的不是很好理解。重複寫了約 5 次左右才弄清楚一些步驟與參數的關係。下面就依照建立的順序來解說。

官方教學點我。

影片教學

1. 先建構 HTML 框架

<ol> 底下將會是放置我們需要循環的列表

2. 設定好 Vue 與即將輸入的 JSON 資料

data 中放置自訂參數 cart，內容需要 JSON 數據

3. 擺放準備讓資料循環的的模板位置

我們看增加的這行。這裡開始的數據傳遞一開始比較不好理解，我在底部有附圖可以參考

• 我自訂組件名稱為 c-cart (component-cart 簡寫)，標籤寫法就寫成 <c-cart> 即可。注意，不可與 HTML 標籤相同，例如取名 <menu> <header> … 否則無法作用。
• v-for 的屬性也就是 for loop 的意思。val 從 cart 中逐一取出
• v-bind 綁定的接口名稱，我們自訂名稱為 item
• 接口 item 代入的值為 val，這個 val 由 cart 取出

4. 製作組件，並將組建位置放在 new Vue 初始之前。

• c-cart 也就是對應 <c-cart>
• 接口承接的名稱 ‘item’，將被模板當成物件

5. 完成

6. 關係圖

我將上方的建立步驟，分成 1 ~ 3 並搭配箭頭，應該就好懂多了。

模版也改使用 text/x-template

如果不要將模版寫在 Vue 內部的話，可以參考。

1. 將模版用 <script type=”text/x-template”> 包圍後，增加 ID
2. component 的部分，將參數 template 指定為 ID

<script type=”text/x-template”> 我自己測試，也可以使用 <template> 包圍。最後程式碼就變成