Learning Vue.js 2: Learn how to build amazing reactive web applications easily with Vue.js

Do you remember how we were creating the Vue instance in the first chapter? We were instantiating it calling new Vue({...}). You also remember that in the options, we were passing the element on the page where this Vue instance should be bound and the data object that contained the properties we wanted to bind to our View. The data object is our Model and the DOM element where the Vue instance is bound is our View:

Classic View-Model representation where the Vue instance binds one to another

In the meantime, our Vue instance is something that helps to bind our Model to the View and vice versa. Our application thus follows Model-View-ViewModel (MVVM) pattern, where the Vue instance is a ViewModel:

The simplified diagram of the Model-View-ViewModel pattern

Our Model contains data and some business logic, and our View is responsible for its representation. ViewModel handles data binding, ensuring that the data changed in the Model is immediately affecting the View...

So, what happens with the data once passed to the Vue instance? What are these transformations that Vue applies to it so that it becomes so automatically bound to the View layer?

Let's analyze what would we do if we had, let's say, a string, and every time it changes we would like to apply some transformations to some DOM element. How would we apply the string-changing listener function? To what would we attach it? There is no such thing as var stringVar='hello';stringVar.onChange(doSomething) .

So we would probably wrap the string's value setting and getting in some sort of function that would do something, for example, updating the DOM each time the string was updated. How would you implement it? While you're thinking about it, I'll prepare a quick demo of something interesting.

Open the developer tools on your shopping list application. Let's code a little bit. Create an obj variable and another text variable:

var obj = {}; 
var text = ''; 

Let...

When you try a new tool, you want to know how it compares with other tools or frameworks. You can find a deep analysis in this regard on the official page of Vue.js: http://vuejs.org/guide/comparison.html . I will just point to some topics that I find important regarding the mostly used 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. Let's analyze what are reusable components and how the application state can be managed, and also talk about plugins, filters, and mixins. In this section, we will have just a slight overview of these features. We will learn them deeply in the next chapters.

In this section, we will analyze all the possible ways of installing Vue.js. We will also create a skeleton for our applications that we will develop and enhance through the next chapters. We will also learn the ways of debugging and testing our applications.

You can debug your Vue application the same way you debug any other web application. Use your developer tools (firebug), breakpoints, debugger statements, and so on. If you want to dive deep inside the Chrome debugging tools, check Chrome's documentation at https://developer.chrome.com/devtools .

Vue also provides Vue.js devtools, so it gets easier to debug Vue applications. You can download and install it from the Chrome web store at https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd .

Unfortunately, it doesn't work with locally opened files, so use some simple HTTP server in order to serve our examples as a web page (for example, https://www.npmjs.com/package/http-server ).

After installing it, open, for example, our shopping list application. Open developer tools. You will see the Vue tab has automatically appeared:

Vue devtools

In our case, we only have one component—<Root>. As you can imagine, once we start...

Do you remember the two applications that we started to work on in the first chapter, the shopping list application and the Pomodoro one? In this section, we will scaffold these applications using the vue-cli tool in order for them to be ready to contain reusable components, be tested, and be deployed. Once we bootstrap these applications, we will work on them until the end of this book. So let's do it carefully and with lots of love!

vue init webpack shopping-list

Implement our Pomodoro application as a Chrome app! You just need to use it with a CSP-compliant version of Vue.js and add a manifest.json file.

In this chapter, we have analyzed the behind-the-scenes of Vue.js. You learned how data reactivity is achieved. You saw how Vue.js leverages Object.defineProperty getters and setters to propagate changes in the data. You saw an overview of the key Vue.js concepts, such as reusable components, plugins system, and state management with Vuex. We have bootstrapped the applications that we will develop during the next chapters.

In the next chapter, we will have a deeper look into the Vue's components system. We will use components in our applications.