Get More Done with Vue.js: What is Vue.js?

What is Vue.js?

Welcome to my first lesson on Vue.js. This is the first post in a series on Vue.js that I will be posting over the next few weeks. This post is designed to introduce you to what Vue.js is and how it works. Let’s get started!

Vue is a framework for building user interfaces, similar in many ways to another JavaScript library called React. As UI frameworks go, Vue is designed to be simple and flexible with a heavy focus on performance. Because of this, Vue can be implemented incrementally. The core library of Vue is focused on the view layer only, so it can be easily integrated with other libraries or existing projects. One of the things that makes this possible is the size. Full-featured and minified Vue 2.0 with compiler included is only 23kb. However, Vue is also powerful enough, when used in combination with a tool chain and supporting libraries, to build full featured Single-Page Web Applications.

To get started, we can easily create an HTML template and bind our data to it using a Vue instance. To see what this looks like, check out this example I created on CodePen here. In our Vue instance, the name property is bound to our template in the DOM. You can easily check this by changing the name value in our data object and see that it updates automatically! This is a pretty basic example of the Vue templating system. However, Vue templates can be made even more powerful with directives.

Directives allow us to apply special behavior to our templates. Directives are prefixed with “v-“ to indicate that they are special attributes provided by Vue. In another example, we use a directive called “v-for” to display a list of items using the data from an Array. To see what this looks like, check out this example I created on CodePen here. Now our template has the ability to produce a list of items in our markup that is bound to the array in our Vue instance data. Hopefully, you can start to see the benefits of Vue’s data binding with directives in your templates.

Vue’s directives also make it easy to add interactivity to your applications. To do this, we can use another directive called “v-on” to attach event listeners that invoke methods on our Vue instances. This time I created a simple example using a form to take the form input and add it to a list of “todos”. You can see this example on CodePen here. Because our template is bound to our “list” array, when we invoke our “addTodo” method on clicking the button and add the user input to the array, our todo list automatically updates.

These are very simple examples to show you some of the features available using Vue’s template syntax and directives. Eventually, you will probably want to use Vue’s component system to build larger applications. Vue’s components are similar to React in that they are small, reusable and composable. This means that we can build larger components out of smaller Vue components, all the way up to our entire application UI! Having a library of self-contained, reusable components with their own state and methods makes building powerful web applications simple.

Simplicity is preferable over complexity in a framework because it means you can get more done faster. In fact, Vue was initially built to allow for rapid creation of application prototypes. So being able to get things done quickly is central to Vue’s purpose. Now that you are more familiar with what Vue is, the next part of this series focuses on the simplicity of Vue and the advantages this gives you as a developer.

By the way, I’m working on a larger course on Vue.js, so sign up for the email list using the form below to be notified when it launches!

Sign up to Get More Done with Vue.js

* indicates required