Vue – Vue.component 組件教學– 使用v-bind、v | Vue component vbind
2017-06-04/JSN/4Comments/8,518次瀏覽 剛學到Vue.component這部分的參數傳遞,覺得繞來繞去真的不是很好理解。重複寫了約5次左右才弄清楚一些步驟與參數的關係。下面就依照建立的順序來解說。官方教學點我[1]。影片教學1.先建構HTML框架
- 底下將會是放置我們需要循環的列表
剛學到 Vue.component 這部分的參數傳遞,覺得繞來繞去真的不是很好理解。重複寫了約 5 次左右才弄清楚一些步驟與參數的關係。下面就依照建立的順序來解說。
官方教學點我[1]。
影片教學 1. 先建構 HTML 框架<ol> 底下將會是放置我們需要循環的列表
<div class="app">
<ol><ol>
</div>
2. 設定好 Vue 與即將輸入的 JSON 資料
data 中放置自訂參數 cart,內容需要 JSON 數據
var app = new Vue({
el: .app, // 綁定的元素
data: { // 自訂資料
cart: [ //我們有一台購物車,裡面有這些商品
{title: Coffee},
{title: Apple},
]
}
})
3. 擺放準備讓資料循環的的模板位置
我們看增加的這行。這裡開始的數據傳遞一開始比較不好理解,我在底部有附圖可以參考
我自訂組件名稱為 c-cart (component-cart 簡寫),標籤寫法就寫成 <c-cart> 即可。注意,不可與 HTML 標籤相同,例如取名 <menu> <header> … 否則無法作用。 v-for 的屬性也...