Getting Started with Vue JS 2 [Video]

Preview in Mapt
Code Files

Getting Started with Vue JS 2 [Video]

Sachin Bhatnagar

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

Quick links: > What will you learn?> Table of content

Mapt Subscription
FREE
$29.99/m after trial
Video
$42.50
RRP $49.99
Save 14%
What do I get with a Mapt Pro subscription?
  • Unlimited access to all Packt’s 5,000+ eBooks and Videos
  • Early Access content, Progress Tracking, and Assessments
  • 1 Free eBook or Video to download and keep every month after trial
What do I get with an eBook?
  • Download this book in EPUB, PDF, MOBI formats
  • DRM FREE - read and interact with your content when you want, where you want, and how you want
  • Access this title in the Mapt reader
What do I get with Print & eBook?
  • Get a paperback copy of the book delivered to you
  • Download this book in EPUB, PDF, MOBI formats
  • DRM FREE - read and interact with your content when you want, where you want, and how you want
  • Access this title in the Mapt reader
What do I get with a Video?
  • Download this Video course in MP4 format
  • DRM FREE - read and interact with your content when you want, where you want, and how you want
  • Access this title in the Mapt reader
$0.00
$42.50
$29.99 p/m after trial
RRP $49.99
Subscription
Video
Start 14 Day Trial

Frequently bought together


Getting Started with Vue JS 2 [Video] Book Cover
Getting Started with Vue JS 2 [Video]
$ 49.99
$ 42.50
Web development with Vue.js 2 [Video] Book Cover
Web development with Vue.js 2 [Video]
$ 124.99
$ 106.25
Buy 2 for $35.00
Save $139.98
Add to Cart

Video Details

ISBN 139781789133721
Course Length11 hours and 37 minutes

Video Description

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.

Style and Approach

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

Prologue
A Warm Welcome
What is VueJS ?
Anatomy of an app
Setting up for development
Hello Vue | First Steps
Hello Vue | Form Input
olleH euV | v-model and filter
The Virtual DOM
Reactive Data and The State
Discovering Templates
Introduction to Templates
Using Strings
Using String Literals
Using Inline Templates
Using X-Templates
Using Render Functions
Using JSX
Summary
Rendering Lists and More
Colored Boxes
A Simple Shopping Cart
A List Widget
Summary
Data flow and components
One way data flow
Two way data binding
A Sales Request Form | Chapter One
A Sales Request Form | Chapter Two
A Sales Request Form | Chapter Three
A Sales Request Form | Chapter Four
Super Button
Rating Meter Reloaded
Lifecycle Methods and lots more...
A Notification utility
An Image Carousel
An Image Carousel | Conclusion
A Weather App | Introduction & First Steps
A Weather App | Continued
A Weather App | Conclusion
Currency Converter
Currency Converter | Conclusion
Understanding Lifecycle Methods
Summary
Introduction to Single File Components
Introduction to Single File Components
Introduction to Module Bundlers & Task Runners
Using Webpack - The Basics
Using Webpack - Setup | Part 1
Using Webpack - Setup | Part 2
Using Webpack - Palindrome App | Code
Getting back to Vue.js and Single File Components
The VUE-CLI and Getting Started with Eatsapp
Understanding the template structure
Downloading assets for this project
The core app component
Getting data from an API
The Data Object
The ListItem Shell
The ListItemPhoto component
The ListItemText component
The RatingMeter component
Listening to events
The InfoCard component
Building for production
Deploying the app
Summary
Building an Address Book using Firebase
Introduction to the project
Setting up a Vue App
Downloading Assets
Understanding routing in a single page app
Implementing routing using the vue-router
The app shell
The Home component
The ContactListItem component
The AddContact component
The UserInput component: Input fields
The UserInput component: Social IDs
The UserInput component: Conditional styling
The UserInput component: Props & events
The AddContact component: v-model
Basic validation
The AddContact component: Clearing out the form
Setting up Firebase Realtime Database
Saving data to Firebase
Offline notification
Preloader and more
The ContactDetail component: Route parameters
The ContactDetail component: Template design
The ContactDetail component: Displaying data
The ContactDetail component: Watchers
The UserResponse component: Using slots
Deleting a contact
Deploying on Firebase
Summary
Address Book | Adding Authentication
Introduction
The AuthUI component
Firebase authentication
Securing routes
Login and Logout
Getting the user's UID
Revisiting the database structure
Signup
Reset password
Displaying errors and messages
Deployment and Summary
Epilogue or is it?
Yay!
BONUS LECTURE: Beyond the Basics & Facebook Group

What You Will Learn

  • Build Webapps using JavaScript
  • Master concepts such as directives, templates, methods, watchers and more.
  • Master Vue with over 20 hands-on projects
  • Build and Integrate Vue apps into existing sites
  • Build complete data driven single page web apps
  • Fetch data from third party APIs
  • Understand build systems and webpack for use with Vue
  • Use Vue's Single File Component architecture for building large apps
  • Incorporate routing for multi-page apps using Vue Router
  • Use Google's Firebase Realtime Database in a Vue app
  • Secure your Vue apps with Firebase Authentication
  • Deploy Vue apps on the web

Authors

Table of Contents

Prologue
A Warm Welcome
What is VueJS ?
Anatomy of an app
Setting up for development
Hello Vue | First Steps
Hello Vue | Form Input
olleH euV | v-model and filter
The Virtual DOM
Reactive Data and The State
Discovering Templates
Introduction to Templates
Using Strings
Using String Literals
Using Inline Templates
Using X-Templates
Using Render Functions
Using JSX
Summary
Rendering Lists and More
Colored Boxes
A Simple Shopping Cart
A List Widget
Summary
Data flow and components
One way data flow
Two way data binding
A Sales Request Form | Chapter One
A Sales Request Form | Chapter Two
A Sales Request Form | Chapter Three
A Sales Request Form | Chapter Four
Super Button
Rating Meter Reloaded
Lifecycle Methods and lots more...
A Notification utility
An Image Carousel
An Image Carousel | Conclusion
A Weather App | Introduction & First Steps
A Weather App | Continued
A Weather App | Conclusion
Currency Converter
Currency Converter | Conclusion
Understanding Lifecycle Methods
Summary
Introduction to Single File Components
Introduction to Single File Components
Introduction to Module Bundlers & Task Runners
Using Webpack - The Basics
Using Webpack - Setup | Part 1
Using Webpack - Setup | Part 2
Using Webpack - Palindrome App | Code
Getting back to Vue.js and Single File Components
The VUE-CLI and Getting Started with Eatsapp
Understanding the template structure
Downloading assets for this project
The core app component
Getting data from an API
The Data Object
The ListItem Shell
The ListItemPhoto component
The ListItemText component
The RatingMeter component
Listening to events
The InfoCard component
Building for production
Deploying the app
Summary
Building an Address Book using Firebase
Introduction to the project
Setting up a Vue App
Downloading Assets
Understanding routing in a single page app
Implementing routing using the vue-router
The app shell
The Home component
The ContactListItem component
The AddContact component
The UserInput component: Input fields
The UserInput component: Social IDs
The UserInput component: Conditional styling
The UserInput component: Props & events
The AddContact component: v-model
Basic validation
The AddContact component: Clearing out the form
Setting up Firebase Realtime Database
Saving data to Firebase
Offline notification
Preloader and more
The ContactDetail component: Route parameters
The ContactDetail component: Template design
The ContactDetail component: Displaying data
The ContactDetail component: Watchers
The UserResponse component: Using slots
Deleting a contact
Deploying on Firebase
Summary
Address Book | Adding Authentication
Introduction
The AuthUI component
Firebase authentication
Securing routes
Login and Logout
Getting the user's UID
Revisiting the database structure
Signup
Reset password
Displaying errors and messages
Deployment and Summary
Epilogue or is it?
Yay!
BONUS LECTURE: Beyond the Basics & Facebook Group

Video Details

ISBN 139781789133721
Course Length11 hours and 37 minutes
Read More

Read More Reviews

Recommended for You

Web development with Vue.js 2 [Video] Book Cover
Web development with Vue.js 2 [Video]
$ 124.99
$ 106.25
Vue.js 2 Recipes [Video] Book Cover
Vue.js 2 Recipes [Video]
$ 124.99
$ 106.25
Full-Stack Vue.js 2 and Laravel 5 Book Cover
Full-Stack Vue.js 2 and Laravel 5
$ 35.99
$ 25.20
Vue.js 2.x by Example Book Cover
Vue.js 2.x by Example
$ 39.99
$ 28.00
Getting Started with C++ Programming [Video] Book Cover
Getting Started with C++ Programming [Video]
$ 124.99
$ 106.25
Getting Started with Machine Learning for Developers [Video] Book Cover
Getting Started with Machine Learning for Developers [Video]
$ 124.99
$ 106.25