Vue.JS Crash Course + Guide
Front-end Frameworks are extremely popular because they give great User Experience we know from Mobile Apps – but now in the Browser! And thus the Jobs requiring Front-end Framework Skills like Vue JS are among the best paid ones in the Industry!
Vue JS has emerged as the most popular JavaScript Framework in the World of JavaScript Frameworks, especially in the Laravel community – it is simply amazing! It is a progressive framework for building user interfaces. Unlike other monolithic frameworks, Vue is designed from the ground up to be incrementally adoptable. The core library is focused on the view layer only, and is easy to pick up and integrate with other libraries or existing projects. On the other hand, Vue is also perfectly capable of powering sophisticated Single-Page Applications when used in combination with modern tooling and supporting libraries. With Vue you can be up and running within 3 minutes. We can link to a local Vue script, use a CDN or just use the amazing CLI to create single file applications with ease. And it is extremely light weight too.
We no longer need to rely on jQuery to create really cool functionalities since Vue makes it a lot easier to play around with the DOM and create really amazing functionalities in our app with less code. Learning to use this Javascript framework has become important since developers are always in need of fast, flexible and easy to implement Frameworks..
Vue JS combines the Best of Angular 2 and React JS as well as it has incorporated several features of frameworks like Ember. It makes building anything from small Widgets to big, Enterprise-Level Apps a Breeze and a whole lot of Fun! This Course does not expect any knowledge of any other Frontend Framework!
*** This Course is Designed to Get You Working With Vue JS As Soon As Possible ***
We will dive straight into building an awesome Vue JS app. Don’t worry if you don’t understand some of it or most of it, we will cover everything in detail little by little at a later stage. Our first goal is to get your hands dirty. We will walk you through building a basic app while explaining the concepts in brief, show you where to find the help and the references. Then we will build a slightly more complex app. By this time you will be able to show off your vue js skills. The rest of the course will then cover the concepts one by one.
If you prefer learning basics first you may skill the first section and come back to it later.
Here’s what you’ll learn in this Course:
- Build amazing Vue.js Applications – all the Way from Small and Simple Ones up to Large Enterprise-level Ones
- Understand the Theory behind Vue.js and use it in Real Projects
- Leverage Vue.js in both Multi- and Single-Page-Applications (MPAs and SPAs)
- What is Vue JS and Why would you use it?
- Setting up a Development Environment and Workflow
- The Basics (including the basic Syntax, Understanding Templates and much more!)
- Interacting with DOM (Rendering Lists, Conditionally attaching/ detaching Elements …)
- Using Components (and what Components are to begin with)
- Binding to Form Inputs
- All about Directives, Filters and Mixins
- How to make your App more Beautiful with Animations and Transitions
- How to create an awesome Single-Page-Application (SPA) with Routing
- And much more …
And all the accompanied with many Exercises and multiple Course Projects – because it isn’t just about seeing Code, it’s about using and practicing it!
### Is this Course for you? ###
Now that you know what this Course is about, let’s see if this Course is for you!
- This Course is for Everyone interested in Frontend Development and Major JavaScript Frameworks
- This Course is for you if you want to create Reactive Applications, which run in the Browser
- This Course also targets Students who prefer a native JavaScript Framework which makes Getting Started much simpler than Angular 2
- Displeased with Angular 2? Vue JS is for you!
- Looking for a light weight, easy to use framework? Vue Js is for you.
Are there any course requirements or prerequisites?
- Basic JavaScript Knowledge is Required
- ES6 Knowledge is a Plus but not a Must
- Basic HTML and CSS Knowledge is assumed throughout the Course
Let’s dive into VueJS right now!
Getting Started: Core Concepts Explained While Creating An Awesome Storefront
-
1
Why Vue?In this section we discuss some of the key features of Vue. With the help of this lesson student will be able to understand about JavaScript Frameworks and the key features of Vue such as component based Architecture, Approachable, Versatile, Performant, powerful, and feature rich.
Link to medium stories refereed in the video
- https://medium.com/js-dojo/awesome-vue-js-open-source-projects-3e5a745b1865
- https://medium.com/js-dojo/why-vue-js-b4f33ac314e6
-
2
Who The Course is Designed For?
You are coming to this page looking for an awesome vue.js course, that means this course is designed for you. You may be just getting started with vue js are already have some experience, you will find this course helpful.
-
3
Creating Our Very First Vue App: Creating The Vue Instance and Data Binding
Key Takeaways:
How we created Vue instance - passing in an object with el and data Fields
The mustache syntax == {{}} - the declarative rendering
Accessing fields of data object from right within HTML
v-model -- the two way data binding
Accessing Vue instance from browser console
-
4
Creating Todo List App: v-model, v-on directives, methods, v-for, class binding
Key Takeaways:
Using v-model to get user input
Creating methods for the Vue instance or Vue Model
Handling events with v-on directive and the shorthand @
Accessing variables in data object using this keyword inside methods (or more specifically functions within the methods object)
Using console for debug - Vue developer tools will be introduced soon
Using v-for for list rendering (also using key)
Class binding with v-bind to conditionally apply styling
Resources:
Starting and ending code (l4_start.html ; l4_end.html)
Link to an Article: Creating a Simple Todo App With Vue: List Rendering, And Class Binding - https://medium.com/js-dojo/creating-a-simple-todo-app-with-vue-list-rendering-and-class-binding-f9519462107
-
5
Creating Native App Like UI/UX: Using prebuilt designs, themes and libraries
This is really a super short crash course where we learn and use a good portion of Vue js concepts.
Key Takeaways:
Conditional rendering v-if and v-show
Taking advantage of pre-built libraries & projects
Vue.use() to make Vue aware of the library that we are using -- somewhat similar to requires in node.js
Difference between adding script in head and at the end of body
Customizing prebuilt components -- the basics of components will be covered later
Showing Prompts and Dialogues
Exposure to custom events
Appreciate the complexity involved in creating real world projects and the advantage of code editor
-
6
Adding Persistant Storage: watchers, persistant storage, Improving Design
-
7
Using Computed Properties, list rendering and conditional rendering
Using Computed Properties
Use of v-for, v-if
-
8
Add links in navigation -
9
Vue Components: The Single Most Selling Feature For Many Developers
Key Takeaways
Vue uses Component based architecture and its design and efficiency is many times the single most important selling point for many developers coming from other frameworks
It’s an abstraction that allows us to build large-scale applications composed of small, self-contained, and often reusable components
Almost any type of application interface can be abstracted into a tree of components
In Vue, a component is essentially a Vue instance with pre-defined options
It is a kind of reusable vue instance
Registering component is straight-forward: Vue.component('name', {})
More details like local and global registration etc. will be discussed later
-
10
Course Features and Outline -
11
Make The Most Out of This Course
-
12
Section 1 Quiz
Test your understanding of basic concepts of Vue.js
Composing With Reusable Vue Components
-
13
Section Introduction
-
14
Setting Up Coding Environment
-
15
Declarative Rendering: Vue Expressions and The {{Moustache}} Syntax
Key Takeaways
Expressions can be written right within HTML template by using {{}} syntax
Expressions are reactive
Vue internally sets watchers for all the variables (from within data object) that we used within expressions
-
16
Attribute Binding: The v-bind Directive
-
17
Conditional Rendering: v-if, v-else, and v-show Directives
-
18
Event Handling and v-on Directive
-
19
Two Way Data Binding: v-model Directive
-
20
Style And Class Binding (v-bind)
-
21
List Rendering: v-for Directive
-
22
Vue Instance Methods; Style Binding Revisited With ES6
-
23
Section 2 Quiz
Put your newly acquired skills to a test
Animations in Vue js
-
24
Vue Components: Local and Global Registration
-
25
Vue Props: Communicating Data To Child Component
-
26
One Way Data Flow
Key Takeaways:
We can pass props as an object with key set to prop name and value set to Type
This is a good documentation as well as Vue will throw a warning if someone tries to pass in different type to the prop
One Way Data Flow: Any modifications to props inside components will be overwritten as soon as parent is re-rendered
Mutations to props should be avoided
-
27
Prop Validation, Casing And Special Cases
-
28
Mutating Props
-
29
Custom Events: Communicating To Parent
-
30
Custom v-model And Listening for Native Events
-
31
:) Refactoring Code :)
-
32
Adding Tabs, Interacting With Forms & v-on: Event Modifiers
-
33
Communication Between Components
-
34
Vue Filters
-
35
The Vue Instance: Lifecycle Hooks
-
36
Do It Yourself!
-
37
Template Syntax & Directives With Dynamic Arguments
-
38
Using Slots And Named Slots
-
39
Refractoring Our App With Slots; Slot Defaults
-
40
Refractoring App: Using Slots And Dynamic Components
-
41
v-for: Rendering Object Fields And Number Lists
-
42
Putting Slot to Action & Adding Persistant Storage
-
43
keep-alive: Keep Dynamic Component in Cache; Difference between v-if & v-show
-
44
Improve Design Using Mobile First Approach
-
45
Keyboard Events
-
46
Adding Cart
-
47
An Important Limitation of Computed Properties And Watchers
-
48
Create Purchase Flow Mockup
-
49
Forcing Update: $forceUpdate()
-
50
Add Remove Items From Cart Functionality And Navigation Drawer
Handling Edge Cases
-
51
Introduction
-
52
Transition Classes
-
53
Transition During Initial Render | Animating Drawer
-
54
Transition With CSS animation
-
55
Custom Transition Classes | Explicit Transition Durations
-
56
JavaScript Hooks
-
57
Transitioning Between Elements & Transition Modes
-
58
List Transitions
-
59
State Transitions
-
60
Add Watcher to Update Animated Ratings When New Review is Added
Vue CLI 4: Installing and Setting Up Tools
Vue CLI 4: Getting Started
-
68
Section Introduction
This section is all about setting up tools for web-development using Vue.
If you are familiar with node.js, webpack, installing node packages, setting up code editor, etc. you might want to skip this section
If you are just looking for crash course or quick brush up or hands on only - please skip this section
Note: Towards the end I said Single Component Vue Files -- It's actually Single File Vue Components
-
69
Creating and Deploying Vue Apps/Websites
-
70
Installing Node.js, Vue and Vue Cli
1. Install Node.js from https://nodejs.org/en/download/
2. Install vue by typing npm i -g vue in command prompt and hitting enter
3. Install vue cli -- npm i -g @vue/cli
-
71
Installing and Configuring Webpack (Optional)
Key takeaways
The legacy syntax of vue-cli 2._._ is no longer available in @vue/cli 3+
Need to install @vue/cli-init bridge to use the legacy syntaxt
Use npm i -g <packagename> for installing any node package globally
-
72
Setting Up Code Editor (VS Code) -- Optional But Recommended
Make sure to check "Add to Context Menu" and "Add to Path" Check boxes
Install Vueter Extension
-
73
Setting Up Vue DevTools
