DEV Community

Margaret W.N
Margaret W.N

Posted on • Edited on

Day 81: My Vue Component

#100daysofcode #vue

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'] } });
Enter fullscreen mode Exit fullscreen mode
  • Defined a component in index.js 
Vue.component('card', {})
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode
  • Used a CSS selector to access the template in index.js 
Vue.component('card', { template:'#card-template' })
Enter fullscreen mode Exit fullscreen mode
  • Created a prop in index.js 
 props: { day: { type: String, required: true } }
Enter fullscreen mode Exit fullscreen mode
  • Looped through the data in the Vue instance in index.html 
 <div id="app"> <card v-for="day in days" :day="day"> </card>  </div>
Enter fullscreen mode Exit fullscreen mode

Output
Alt Text

Day 81 Done and dusted

Top comments (0)