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)

Read next

shrsv profile image

How Adam Smith Differentiates Money, Capital, Wealth & Goods

Shrijith Venkatramana -

ryo_suwito profile image

Neuer: The End of Framework Slavery

Ryo Suwito -

fernandosilvot profile image

AWS CLI: Instalación en Windows y Linux, y Uso Básico

Fernando Silva T -

mat7 profile image

Offering help with a project

Mat -