DEV Community 👩‍💻👨‍💻

Margaret W.N
Margaret W.N

Posted on • Updated on

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']
  }
});
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)

Stop sifting through your feed.

Find the content you want to see.

Change your feed algorithm by adjusting your experience level and give weights to the tags you follow.