I made a component in Vue that does nothing important. The steps in summarry:
- Created an Vue instance in
index.js
new Vue({
el: '#app',
data: {
days: ['Mon', 'Tue', 'Wed', 'Thur']
}
});
- Defined a component in
index.js
Vue.component('card', {})
Side note: Single word component names are not a good practice.
- Defined a template in
index.html
<script type="text/x-template" id="card-template" >
<div class="card">
<p id="nextDay"> {{day}} </p>
<div class="innerCard"></div>
</div>
</script>
- Used a CSS selector to access the template in
index.js
Vue.component('card', {
template:'#card-template'
})
- Created a prop in
index.js
props: {
day: {
type: String,
required: true
}
}
- Looped through the data in the Vue instance in
index.html
<div id="app">
<card v-for="day in days" :day="day">
</card>
</div>
Output
Day 81 Done and dusted
Top comments (0)