O'Reilly logo

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Getting Started with Vue JS 2

Video Description

Master VueJS 2 for building super cool user interfaces and high performance web apps!

About This Video

  • Build and Integrate Vue micro apps into existing websites.
  • Build complete data-driven single page web applications.
  • Fetch data from third-party APIs.
  • Use Vue’s Single File Component architecture for building large-scale apps.
  • Incorporate routing in your single page Vue apps.
  • Power your Vue apps using Google’s Firebase Realtime Database.
  • Secure your Vue apps using Firebase Authentication.
  • Deploy Vue apps on the web.

In Detail

Once upon a time, JavaScript could only be used for simple form validators. Well, time has changed and if you’re a web designer or developer, chances are that your next big project requires a cutting edge web application framework that offers state of the art features such as a Virtual DOM, Reactivity, Superhero performance, all with a feather light footprint. That is where Vue JS comes in. Vue JS is an amazing JavaScript framework for building high performance user interfaces but has enough ammo to power your next killer web application. In this beginner’s course on VueJS, we will go from the absolute basics of a framework, including concepts such as DOM and setting up a development environment, to understanding core Vue features, essential workflows and best practices. You will work through 20+ hands-on exercises to solidify your command on essential Vue concepts. Vue offers the best of Angular and React and features a component based architecture that lets you break down your app or even an interface into manageable and scalable functional units. VueJS apps offer incredible performance that is neck to neck and even better than some of the leading web app frameworks in use today. Vue features a Virtual DOM that is lighter than the rest and delivers impeccable performance. If you’re a web designer, developer or even a project manager with a goal to master or pick a web application framework for your project, but are too afraid to begin, then this is your chance to finally realize your dream. Vue is surprisingly simple to learn, which makes it a winner and enables existing production grade projects and teams to incrementally bring it into their ecosystem.

Table of Contents

  1. Chapter 1 : Prologue
    1. A Warm Welcome 00:00:35
    2. What is VueJS ? 00:04:53
    3. Anatomy of an app 00:08:04
    4. Setting up for development 00:07:55
    5. Hello Vue | First Steps 00:11:17
    6. Hello Vue | Form Input 00:09:03
    7. olleH euV | v-model and filter 00:08:24
    8. The Virtual DOM 00:07:04
    9. Reactive Data and The State 00:12:09
  2. Chapter 2 : Discovering Templates
    1. Introduction to Templates 00:05:13
    2. Using Strings 00:06:02
    3. Using String Literals 00:02:52
    4. Using Inline Templates 00:03:12
    5. Using X-Templates 00:02:53
    6. Using Render Functions 00:10:50
    7. Using JSX 00:06:54
    8. Summary 00:01:42
  3. Chapter 3 : Rendering Lists and Mor
    1. Colored Boxes 00:07:36
    2. A Simple Shopping Cart 00:14:05
    3. A List Widget 00:13:23
    4. Summary 00:03:33
  4. Chapter 4 : Data flow and components
    1. One way data flow 00:10:31
    2. Two way data binding 00:10:27
    3. A Sales Request Form | Chapter One 00:10:34
    4. A Sales Request Form | Chapter Two 00:09:57
    5. A Sales Request Form | Chapter Three 00:05:13
    6. A Sales Request Form | Chapter Four 00:06:48
    7. Super Button 00:07:07
    8. Rating Meter Reloaded 00:02:39
  5. Chapter 5 : Lifecycle Methods and lots more...
    1. A Notification utility 00:11:02
    2. An Image Carousel 00:12:24
    3. An Image Carousel | Conclusion 00:06:08
    4. A Weather App | Introduction & First Steps 00:14:56
    5. A Weather App | Continued 00:08:14
    6. A Weather App | Conclusion 00:08:07
    7. Currency Converter 00:05:48
    8. Currency Converter | Conclusion 00:10:41
    9. Understanding Lifecycle Methods 00:06:25
    10. Summary 00:02:26
  6. Chapter 6 : Introduction to Single File Components
    1. Introduction to Single File Components 00:10:08
    2. Introduction to Module Bundlers & Task Runners 00:06:20
    3. Using Webpack - The Basics 00:03:46
    4. Using Webpack - Setup | Part 1 00:13:22
    5. Using Webpack - Setup | Part 2 00:08:30
    6. Using Webpack - Palindrome App | Code 00:11:41
    7. Getting back to Vue.js and Single File Components 00:03:09
    8. The VUE-CLI and Getting Started with Eatsapp 00:10:21
    9. Understanding the template structure 00:14:06
    10. Downloading assets for this project 00:01:32
    11. The core app component 00:10:06
    12. Getting data from an API 00:11:34
    13. The Data Object 00:05:47
    14. The ListItem Shell 00:07:29
    15. The ListItemPhoto component 00:09:31
    16. The ListItemText component 00:07:48
    17. The RatingMeter component 00:09:14
    18. Listening to events 00:08:00
    19. The InfoCard component 00:11:20
    20. Building for production 00:02:24
    21. Deploying the app 00:03:24
    22. Summary 00:02:33
  7. Chapter 7 : Building an Address Book using Firebase
    1. Introduction to the project 00:02:20
    2. Setting up a Vue App 00:03:58
    3. Downloading Assets 00:02:21
    4. Understanding routing in a single page app 00:06:38
    5. Implementing routing using the vue-router 00:10:28
    6. The app shell 00:06:00
    7. The Home component 00:04:55
    8. The ContactListItem component 00:07:19
    9. The AddContact component 00:06:28
    10. The UserInput component: Input fields 00:10:21
    11. The UserInput component: Social IDs 00:03:55
    12. The UserInput component: Conditional styling 00:08:18
    13. The UserInput component: Props & events 00:03:26
    14. The AddContact component: v-model 00:07:52
    15. Basic validation 00:05:27
    16. The AddContact component: Clearing out the form 00:03:02
    17. Setting up Firebase Realtime Database 00:09:19
    18. Saving data to Firebase 00:09:32
    19. Offline notification 00:09:54
    20. Preloader and more 00:02:46
    21. The ContactDetail component: Route parameters 00:06:47
    22. The ContactDetail component: Template design 00:04:48
    23. The ContactDetail component: Displaying data 00:08:43
    24. The ContactDetail component: Watchers 00:06:37
    25. The UserResponse component: Using slots 00:05:19
    26. Deleting a contact 00:04:59
    27. Deploying on Firebase 00:05:35
    28. Summary 00:01:47
  8. Chapter 8 : Address Book | Adding Authentication
    1. Introduction 00:01:27
    2. The AuthUI component 00:03:32
    3. Firebase authentication 00:05:10
    4. Securing routes 00:07:27
    5. Login and Logout 00:06:44
    6. Getting the user's UID 00:03:27
    7. Revisiting the database structure 00:08:20
    8. Signup 00:04:25
    9. Reset password 00:05:12
    10. Displaying errors and messages 00:08:47
    11. Deployment and Summary 00:03:37
  9. Chapter 9 : Epilogue or is it?
    1. Yay! 00:00:41
    2. BONUS LECTURE: Beyond the Basics & Facebook Group 00:00:48