Day 81: My Vue Component

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