Beginning Vue.js

Here is an overview of the second lesson.

Computed properties are data in Vue components that depend on some calculation on other, more primitive data. When this primitive data is reactive, the computed properties are up-to-date and reactive themselves. In this context, primitive is a relative term. We can certainly build computed properties based on other computed properties.   

While functions inside the methods option are executed every time we call them, functions in computed properties are cached based on the dependencies, which in turn are defined by everything reactive found inside the function.

A common pattern is to take a large list of data and turn it into a smaller, more relevant list by filtering unnecessary data. In addition to this, we will also learn about filtering the elements in a list.

Sorting a list with a computed property offers much more flexibility, and we can implement any custom logic for ordering. In this video, we will learn how to create a list with some data within it. We will also learn to sort the list using these values. Let us begin with:

●        Writing Lists

●        Sorting Lists

Formatting currencies is a recurrent pattern in software. In this video, we will explore how we can write some Vue filters to help us in displaying calculations with currency.

Displaying and hiding an element on a web page is fundamental to some designs. We can have a pop-up, a set of elements that you want to display one at a time, or something that shows up only when you click a button. Let us use conditional display and learn about the important v-if and v-show directives. Let us begin with:

●        Displaying and Hiding Elements on a Web Page

●        v-show versus v-if

One great feature of modern web page architecture is the ability to pack tons of display logic in CSS. This means we can have a very clean and expressive HTML and still create impressive interactive pages via CSS. Let us begin with:

●        Building a Text Area to Alert When Reaching Maximum Character Limit

●        Expanding on Conditional Styling

Transitions are effects that can be applied when elements are inserted, updated, and removed from the DOM. In this video, we will build a little riddle. When they want to know the solution, it will appear with a fading transition. Let us begin with:

●        Creating a Riddle

●        Vue Transitions

Sometimes, we need to insert HTML content, such as line breaks (<br>), in our application data. This can be easily achieved with the v-html directive. Let us begin with:

●        Building a Thank You Note

●        Rendering Raw HTML

Let us now summarize our learning from this lesson.

Here is an overview of the third lesson.

Graphical interfaces not only need to be usable and easy to understand. Having transitions can help a great deal by giving cues of how a website works in a fun way. Let us learn about the following topics in detail:

• Integrating with Third-Party CSS Animation Libraries

• Prerequisites

• Building a Taxi Booking App

• Classes References

If your application is rich in animations and you would like to reuse your CSS classes in other projects by mixing and matching them, you need to definitely try these out:

●        Building a Taxi Company Interface

●        FLIP Technique

Let us now create an animation with the help of the simple but powerful tool, Velocity.js. We will also learn:

●        Animating with JavaScript instead of CSS

●        Implementing the Code for Booking a Taxi

●        Hooks for JavaScript Animations

Everything on a web page is an element. You can easily make them appear and disappear, thanks to Vue v-if and v-show directives. With transitions, you can easily control how they appear and even add magic effects. Let us begin with:

●        Transforming a Frog into a Princess

●        Transitioning Between More Than Two Elements

While transitioning between elements, we explored how to make a transition between two elements. The default behavior of Vue is to start the transition of the element that is entering the same time that the first element is leaving; this is not always desirable. Let us learn about this in detail with the following topics:

• Create a Carousel Effect – The Two Elements Problem

• Transition Modes

Let us now build a list of elements that move according to how the list changes.

In computers, everything is a number. In Vue, everything that is a number can be animated in some way or the other. Here you will control a bouncy ball that will smoothly position itself with a tween animation.

In Vue, a constant theme is reactivity and, of course, transitions can be dynamic because of that. Not only the transition themselves, but all their properties can be bound to reactive variables. This gives us a lot of control on which transition to use at any given moment.

Let us now summarize our learning from this lesson.

Here is an overview of the fourth lesson.

The first step in dealing with components is to create one. Once the component is registered, we need to tell a Vue instance about it so that it can use the component. Let us build our first component.

Vue was a game changer mostly because it changed the way to partition responsibilities. It wasn't the first to do that, but it certainly extended on that. Earlier, we used one file for HTML, one for CSS, and one for JavaScript. Little did we know that the three files were all about the same thing, components! Yet, they split several components vertically instead of horizontally. In Vue, we keep components well isolated in a single file with the help of tools such as Webpack. Let us learn to do this.

Composition is a basic principle in software engineering. It allows you to build big and complex systems out of small and self-contained pieces. Let us learn about it in detail.

Since everything is reactive in Vue, with props, we have a direct line of communication with our components, and you will learn how to use this line in this video. Let us begin with:

●        Building a Volume Icon

●        Kebab Case and Camel Case

Let us now leverage some tricks to read a child's state directly. This technique can be useful when two components are tightly coupled by design or when some debugging is needed.

Slots are a way to have a fixed structure in one component and delegate the contents of certain parts of it to the parent. We will also learn how to:

●        Create a Webpage Using Content Distribution with Slots

●        Build an Organization Chart

Making components communicate in Vue can be done in several ways. In this video, we will build two components that communicate through a shared state in a structured manner using Vuex. We will also learn how to:

• Make Components Talk with Vuex

• Create a Looped Conversation Between Actors

• Develop a Video Game

If you are even a little into programming, one of the first things you'll hear is iteration versus recursion. Vue has both, and if you have some tree structured graphics or menus in your application, Vue's got you covered. Let us illustrate this point by building a classification of animals in a recursive fashion. Let us begin with:

●        Classifying Types of Animals

●        Recursive Component and Local Registration

●        Avoiding a Stack Overflow!

Let us now summarize our learning from this lesson.

Here is an overview of the fifth lesson.

Let us begin with sending basic AJAX requests with Axios.

HTML web forms are designed to resemble paper forms or database forms. They usually include checkboxes, radio buttons and text entry fields. Such forms are used for data entry such as credit card information or product information. However, people sometimes make mistakes when filling them in. Let us begin with:

●        Building Forms

●        Adding a Field for a User

●        Creating a Form for One-page Applications

●        Sending Forms Without Axios

●        Creating a Blog Post

Let us learn to recover from an error during a request with the following topics:

●        Latency

●        Building a Website for Ordering Food

Now, let us learn about REST and how to build a REST client. Let us begin with:

●        Building a REST Server Using Feather.Js

●        Creating an App Using REST

●        Verbs

Infinite scrolling is a web-design method that continuously loads content when the user scrolls down a page. It is a fine example of what you can do with Vue and AJAX. It is also quite popular and can improve interaction for different kinds of content. Let us build a random word generator that works with infinite scrolling by:

●        Creating an App that Generates an Infinite List of Random Words

●        Adding Transitions to Lists

This topic teaches us how to use interceptors to edit your request before it goes out to the internet. We will also learn how to:

●        Filter for Curse Words for a Hypothetical Comment System

●        Use Interceptors

Writing applications without thinking about security will inevitably lead to vulnerabilities, especially if it has to run on a web server. Cross-site request forgery (XSRF) is an attack that compels end users to commit unnecessary actions on a web application and is among one of the most popular security issues nowadays. Even if you are not a security expert, you should be aware of how it works and how to prevent it in a Vue application. We will also learn:

●        Cross Site Request Forgery (XSRF)

●        Network Tab Shows Token Information

Let us now summarize our learning from this lesson.

Here is an overview of the sixth lesson.

Let us begin with creating an SPA with Vue-Router.

In the previous version of Vue, we had a dedicated method for fetching data from the internet before changing the route. With the latest version, we have a more general method that will take care of this and possibly other things before switching routes.

Let us learn to manage errors for your routes. Let us begin with:

• Creating a Single-Page Application with Multiple Links

• Making the Error Message Disappear

• Using Variables

Registering all the routes by hand can be time consuming, and, when the routes are not known in advance, it is impossible. Vue-router lets you register routes with an argument so that you can have links for all the objects in a database and cover other use-cases where the user chooses a route, following some pattern that will result in too many routes to be registered by hand. Let us begin with:

• Creating an Online Restaurant Menu to Display Different Dishes

• Creating a Parrot Website

Let us now compose routes hierarchically by:

●        Building an Accounting Website

●        Dividing the Treasure

There are infinite reasons why you may wish to redirect the user. You may want the user to log in before accessing a page, or maybe a page has moved and you want your user to take note of the new link. Let us learn to redirect the user to a new home page as a way to quickly modify the website with the following topics:

●        Building an Online Clothing Shop

●        Modification to the Code

●        Redirecting to 404s

●        Named Redirecting

●        Redirecting with Parameters

●        Dynamic Redirecting

●        Adding a New Link

Let us learn to save the scrolling position when hitting back.

Let us now summarize our learning from this lesson.

Here is an overview of the seventh lesson.

Jasmine is a library for testing. It's very easy to use and it's capable of displaying the results of the tests directly in the browser. Let us build a simple Vue application and test it with Jasmine. Let us begin with:

●        Installing Jasmine in your App

●        Test-Driven Development (TDD)

●        Jasmine Cheat Sheet

●        Creating a Page Header that Displays Welcome Using Test-driven Development

Karma is traditionally used in Vue projects and is present in the official Vue templates as a tool. Learning Karma is a great addition for your JavaScript tool belt, even if you are not working with Vue. In this video, we will need the command line and npm, so be sure to have it installed before moving ahead. Let us begin with:

●        Installing Karma

●        Loading the Firefox Browser

Let us now write a unit test to touch and check the state of our Vue instance directly. Let us begin with:

●        Creating a Translation Button for Italian

●        Command-Line Interface

●        Testing the DOM

●        Making the Test Pass

Let us now test asynchronous DOM updates.

TestCafe is a software that basically mimics a user clicking and typing around on a website. This is probably what we want as an ultimate (automated) verification that the whole system works. Let us begin with:

●        Testing with TestCafe

●        Different Styles of Unit-Testing

●        Unit-testing with Mocha and Chai vue Templates

Let us now stub external API calls with Sinon.JS.

Let us now measure the coverage of your code by:

●        Testing Code Coverage with a Number Guessing Game

●        Number Guessing Game

Let us now summarize our learning from this lesson.

We have now come to the overview of the last lesson. 

Let us learn to extract logic from your components to keep the code tidy. We will also learn:

●        Creating a Clean Webpack Project

●        Building the Compound Interest Calculator

●        Bundling Your Component with Webpack

●        Building a Shaking Component

●        Using a Component in JSFiddle

Webpack is a tool for organizing your code and dependencies. Furthermore, it gives you a way to develop and build with JavaScript files that embed all the dependencies and modules that we pass to them. We'll use this concept to build a small Vue application and bundle everything into a single file. Let us begin with:

●        Organizing Code with Webpack

●        Adding a New Component

Hot reloading is a really useful technology that lets you develop while looking at the results in the browser, without even refreshing the page. It's a very tight loop and can really speed up your development process. In the official Webpack template, hot reloading is installed by default. Let us learn how to install it.

Linting your code drastically reduces small bugs and inefficiencies that accumulate during development. It guarantees that the coding style is consistent across a team or organization, and it makes your code more readable. Instead of running the linter once in a while, it's useful to have it constantly running. Let us do it with Webpack. We will also learn:

●        Running a Code Linter

●        Using Linting

At a certain point, there comes a moment when you want to give back to the community. Maybe you built a "fart button" or maybe you built an automated stock options trader; whatever it is that you've built, the JavaScript and Vue community will be happy to welcome you. There is a big chunk of things to be done on the side of marketing and licensing, but we will concentrate on the more technical aspects.

Let us now summarize our learning from this lesson.