Vue.js is one of the latest new frameworks to have piqued the interest of web developers due to its reactivity, reusable components, and ease of use. This video course shows developers how to leverage its features to build high-performing, reactive web interfaces with Vue.js. From the initial structuring to full deployment, this video provides step-by-step guidance to developing an interactive web interface from scratch with Vue.js.
You will start by building a simple application in Vue.js so you can observe its features in action. Delving into more complex concepts, you’ll learn about reactive data binding, reusable components, plugins, filters, and state management with Vuex. It will also teach you how to bring reactivity to an existing static application using Vue.js. By the time you finish this video, you will have built, tested, and deployed a complete reactive application in Vue.js from scratch.
About The Author
Olga Filipova took her master's degree in Computer Science in Portugal, at Coimbra University. She worked as a software engineer at Feedzai and as a tutor for professional web development course at a training center in Coimbra.
This video is an introduction to the terminology used in this course and for Vue, which will enable you to understand Vue better.
In this video, we will learn the importance of Vue and create a shopping list application using Vue.
Using Vue.js in a project is simple. In this video, we will see how to avoid any extra work with other frameworks and use Vue.js
Vue.js was made better with the release of Vue.js 2.0. In this video, we will look at the release of Vue.js 2.0 and the projects that were made using Vue.js 2.0.
After learning about Vue, we will get started with creating an application. In this video, we will create an application, Pomodoro timer.
In this video, we will learn about the MVVM (Model View View Model) pattern, which helps in binding Model to the view and vice versa.
All Vue properties go through the DefineProperty method, which assigns getters and setters to them. This is what makes the binding so strong. Let’s learn about them!
Whenever you try a new tool, you want to compare it with other tools. In this video, we will compare Vue with other frameworks.
Before putting our hands into the code and starting to enhance our applications with components, plugins, mixins, templates, and other things, let's overview the main Vue features.
In this video, we will analyze all possible ways to install Vue.js. We will also learn debugging and testing our application
Debugging is necessary for a Vue application. In this video, we will debug our application.
Scaffolding our applications is necessary so that the reusable components can be used in them. In this video, we will scaffold the application
Components are an important part of any Vue Application. So, we will create and use a component in our application
Now that we have learnt about components, we will use them to rewrite our application.
Single-file components are better to work with. Vue provides a lot of features with single-file components. In this video, we will learn about single file components.
In this video, we will rewrite our application using single-file components, about which we learnt in the previous video.
As we rewrote our shopping list application, similarly, we will rewrite our Pomodoro application using single-file components.
With Vue, you can use the special transition wrapper component to specify the CSS transition to use on data changing. We will learn about that here.
Data binding is a mechanism of propagating changes from the data to the visible layer and vice versa. We will revisit all the different ways of data binding and apply them to our applications.
V-bind directive allows binding an element's attribute or a component property to an expression. The v-if directive allows to conditionally render the whole element.
In this video, we will change the title component using events.
In this video, we will learn the importance of the global state store. We will understand Vuex and its store.
Greetings are important to users who use your application. In this video, we are going to create a greetings example to see Vuex in action.
In this video, we will install Vuex and import the store to our application.
In this video, we are going to take a look at changing the title, finding shopping lists by ID with the help of the Vuex store.
In this video, we are going to animate our pause, stop, and run buttons, and improving the time interface of the Pomodoro timer using the Vuex store. We will also add a few changes to make the timer fun.
Plugins written for Vue can provide various functionalities, starting from the definition of some global Vue methods or even the instance methods. Let’s use the existing resource plugin for Vue.
Now that we know how to use thye existing plugins with our Vue application, why not create our own plugin? We already have a little bit of animation in our Pomodoro application. It would be nice to add some sounds to our Pomodoro!
Before we start writing unit tests, let's try to understand what we're trying to achieve by writing them. Why is unit testing so important?
Let's check on some particularities of unit testing our Vue application and its components. In order to be able to write tests for the component instance, first of all, it should be instantiated!
Before starting the actual writing of our unit tests, let's establish some rules. For each of our .js or .vue files, there will exist a corresponding test spec file, which will have the same name and a .spec.js extension
In this video, we will write unit tests for our pomodoro application to test it.
End-to-end (e2e) testing is a technique in which the whole flow of the application is being tested. In this kind of testing, neither mocks nor stubs are used, and the real system is being under the test.
So, now that we know all the theory behind the UI testing, we can create our first end-to-end test for our Pomodoro application. Let's define the steps that we will perform and the things that we should test.
Deploying web applications, it means that there will be a public URL, and any person will be able to type this URL on their browser and access the application.
In this section, we will prepare the application to run on Heroku.
In this section, we will perform a similar procedure and deploy our shopping list application.
We applied the most important concepts of Vue to make our applications reactive, fast, maintainable, and testable. However, it’s important to know that Vue 2.0 has been launched. It brings some new possibilities and some new things to learn and use.
Let's check again what we have done so far. We have developed two applications using Vue.js. Let's revisit them.
In the previous video, we summarized what the applications that we have developed are doing. They are nice but lack features, style, identity, UX patterns, extension to other platforms, and so on. Let's check what we can still do.
Packt has been committed to developer learning since 2004. A lot has changed in software since then - but Packt has remained responsive to these changes, continuing to look forward at the trends and tools defining the way we work and live. And how to put them to work.
With an extensive library of content - more than 4000 books and video courses -Packt's mission is to help developers stay relevant in a rapidly changing world. From new web frameworks and programming languages, to cutting edge data analytics, and DevOps, Packt takes software professionals in every field to what's important to them now.
From skills that will help you to develop and future proof your career to immediate solutions to every day tech challenges, Packt is a go-to resource to make you a better, smarter developer.
Packt Udemy courses continue this tradition, bringing you comprehensive yet concise video courses straight from the experts.