Vue.js 2 Academy: Learn Vue Step by Step

Vue.js 2 Academy: Learn Vue Step by Step

by Chris Dixon
Released October 2019
Publisher(s): Packt Publishing
ISBN: 9781838985455

Read it now on the O’Reilly learning platform with a 10-day free trial.

O’Reilly members get unlimited access to books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial

Video description

Vue.js is a fun and easy-to-use JavaScript framework for building user interfaces. From easily adding it to an existing website or application to just control a part of it, such as adding new components, through to using it for medium or large single-page applications, you can improve productivity in several ways.

The course will guide you through building two challenging yet exciting projects, which will help you apply everything you learn.

You’ll begin with a guest list app where users can add their name to an event guest list. Although this is a simple app, you’ll learn several Vue.js essentials while building it such as two-way data binding, event handling, templates and the Virtual DOM, and instance properties - data, computed, watchers, methods, and filters.

You will then build on your knowledge by creating a greeting card application where users can create and edit their custom greeting card. They will be able to add their text and images to create a personalised card. This project will get you up to speed with components (local, global, and single file), installing Node and NPM, passing data with $emit, and storing and retrieving images from Firebase. In addition to this, you’ll make use of Vue CLI to scaffold your projects with build tools such as Webpack and Babel.

By the end of this course, you will be well-versed with Vue.js and have gained hands-on experience in applying it effectively in your projects.

What You Will Learn

  • Understand the Vue.js framework and how to integrate services such as Firebase storage
  • Explore core Vue concepts such as instance methods, looping, Virtual DOM, data binding and event handling
  • Discover tools such as the Vue CLI and other build tools
  • Apply Vue.js to existing web sites or apps
  • Learn how to build complex, scalable single-page applications
  • Gain insights into props and prop validation
  • Explore slots and slot-scope
  • Bind to menu options to change fonts and styles
  • Delve into EventBus and Mixins

Audience

This course is for beginners to Vue.js or front-end frameworks. It will also be a great introduction if you’re coming from a different framework or library such as React or Angular and want to understand how Vue compares to them. Although this course is aimed at beginner-level Vue developers, you should have at least basic knowledge of JavaScript and web design/development to get the most out of this course.

About The Author

Chris Dixon: Chris Dixon is a self-employed web developer teaching others through training courses. Chris offers freelance web development and training workshops on various topics, including HTML, CSS, JavaScript, Vue.js, NUXT.js, WordPress (custom theme development), Mongo/Mongoose, PostgreSQL, Express, Firebase, and Supabase. Chris is also involved in building Shopify ecommerce solutions, including custom apps and theme development. Chris has vast experience in GraphQL, Keystone CMS, and many other front-end/full-stack skills. He is additionally a regular Shopify user in creating and managing online stores and editing/creating custom liquid templates.

Table of contents

  1. Chapter 1 : Introduction Getting Started
    1. Welcome
    2. What is Vue why should I learn it?
    3. Visual Studio installation
  2. Chapter 2 : Vue Basics: Guest List App
    1. Section intro
    2. Download project starter
    3. Installing Vue.js
    4. The Vue instance the data object
    5. Templates the virtual DOM
    6. Two-way data binding with v-model
    7. Event handling methods
    8. List rendering
    9. Conditional rendering in Vue
    10. Binding attributes to elements
    11. Binding styles
    12. Vue shorthand syntax
    13. Outputting text HTML
    14. V-if vs v-show
    15. Using JavaScript expressions
    16. Section outro
  3. Chapter 3 : A deeper look at Vue: Guest list app
    1. Section intro
    2. Adding a progress bar
    3. Computed properties
    4. Watchers
    5. Key events and modifiers
    6. Filters
    7. More on looping: keys index numbers
    8. Using multiple Vue instances
    9. Looping with objects
    10. Adding our navigation links keys
    11. Accessing Vue instances externally
    12. Vue instance properties methods
    13. Referencing elements with ref
    14. Using string templates
    15. The Vue lifecycle
    16. Vue lifecycle hooks in action
    17. Section outro
  4. Chapter 4 : Build Tools Workflow: Creative Cards App
    1. Section intro
    2. Installing Node NPM
    3. Scaffolding projects with the Vue-cli
    4. Exploring our project layout build tools
    5. Using the data object with single file templates
    6. Section outro
  5. Chapter 5 : Introduction to Components: Creative Cards App
    1. Section intro
    2. What are components?
    3. Registering global components
    4. Registering local components
    5. Creating single file components
    6. Adding the card front component
    7. Emit data to parent components
    8. Dynamic components
    9. Creating the additional card components
    10. Creating the text input component
    11. Receiving data from the text input
    12. Creating the text output component
    13. Passing data with props
    14. Keeping components alive
    15. Scoping CSS styles
    16. Prop validation
    17. Passing prop data to a style object
    18. Introduction to slots
    19. Slot scope fallback content
    20. Named slots
    21. Section outro
  6. Chapter 6 : Components Continued Firebase Storage: Creative Cards App
    1. Section intro
    2. Setting up Firebase
    3. Creating the Image Upload component
    4. Uploading images to Firebase
    5. Image preview thumbnail
    6. Upload progress bar $emit file data
    7. Image Output component
    8. Downloading images from Firebase
    9. Set image button
    10. Text options menu: font sizes
    11. Text options menu: text alignment
    12. Text options menu: font style weight
    13. Remove image button
    14. Passing data with callbacks
    15. Making images draggable
    16. Finishing the CardInsideLeft component
    17. Finishing the CardInsideRight component
    18. Finishing the CardBack component
    19. Introduction to the event bus
    20. Sending events to the event bus
    21. Receiving events from the event bus
    22. Adding mixins
    23. Section outro
  7. Chapter 7 : Transitions Animations
    1. Section intro
    2. Transition classes
    3. Adding CSS transitions
    4. Adding CSS animations
    5. Component transitions transition modes
    6. JavaScript hooks introduction
    7. JavaScript hooks in action
    8. Mixing animations transitions
    9. Custom transition classes
    10. Initial render transitions
    11. Element transitions keys
    12. Group transitions
    13. V-move class dynamic transition names
    14. Section outro
  8. Chapter 8 : Thank You
    1. Thank you

Product information

  • Title: Vue.js 2 Academy: Learn Vue Step by Step
  • Author(s): Chris Dixon
  • Release date: October 2019
  • Publisher(s): Packt Publishing
  • ISBN: 9781838985455