One Day Introduction to Vue.js with Hassan Djirdeh [Workshop]

Components & Single-File Components


In this lesson, Hassan teaches about components and single-file components. Students will more specifically be introduced to:

  • Vue Components: self-contained modules that can group markup, logic, and even styles.
  • Global Components: Vue.component( 'name-of-component', { });
  • Component Variables: const nameOfComponentObject = { };
  • Single-File Components: allow us to define HTML/CSS and JS of a component within a single .vue file
  • Props (data): can be passed downwards in a single direction (parent --> child, etc.)
  • Setting up a webpack-based project using the Vue-cli, which can help facilitate the rapid building and developing of Vue applications
Exercise: Refactor

Now that you know how to separate your app into individual components, refactor the Vote Up app from earlier into a module based app and Single File Components!

Don't forget to install the vue-cli! npm install -g @vue/cli

Starter code:


I finished! On to the next chapter