Getting started with Vue

Vue.js is a JavaScript framework that continuously increases in popularity. Here is an intro if you are just getting started.

When a webpage contains dynamic data, either from backend services or user-generated content, then a frontend framework can help you a lot. For that Vue is a great alternative.

Set up

Vue is really easy to get started with. All you need is to include a .js file in the head element and you are ready to start using Vue. You can also create more complex websites that require a build step, but we will get back to that.

In Vue, you have an object that holds data and methods that are connected to an HTML element.

That’s all you need. Now we have an object connected to the div element with id="app" because of el:'#app'. Now we are ready to use some Vue features inside the div element and our JavaScript object.

Declarative rendering

Let’s start by showing some data. With double brackets, we can get values from our JavaScript but also run JavaScript code directly. If those values would update, so would our website.

This code renders: “Hei, friends! It is year 2020”

Directives

To control our HTML elements Vue provides something called directives, which we can add to the elements. Some of the most used are v-model to create a two-way binding, v-if to show or hide content and v-for to iterate arrays.

Here you see the message variable is “live” in the p element.

This code only shows the text input element when allergy is true, which can be useful for not showing unnecessary fields in a form.

Here Vue will see that Vue creates an li element for each value in the array weekdays.

Now let’s combine all these directives and add v-on:click to call a method on our object. Notice how we are just writing regular HTML, but each time we add v-something or {{}} we are working with our Vue object.

Now we have created our own shopping list app.

Lifecycle hooks

Every Vue object has its own lifecycle with methods you can hook into if you need to run code at a given time. The most used ones are created, mounted and destroyed.

Let’s start by using the created method to get some movies. Then we can use the v-bind to add JavaScript values to HTML attributes, like we do to set the src on an img element.

Vue CLI

You have now seen examples of what Vue can do. Now let’s take a look at the Vue CLI (Command Line Interface) to create a Vue project.

Vue has the advantage of being a component-based framework. Until now all the examples have been one component. There are multiple ways to create a component. The recommended one is the Single File Components, which are .vue files. But now we need a build step to end up with the .html, .js, and .css for the browser. Which is what the Vue CLI helps us with, along with using other features such as Babel, TypeScript, SCSS and other libraries.

Make sure you have Node installed. Now you can open the terminal, install the CLI and create a project.

npm i -g @vue/cli
vue create my-project

Just select the default option for this demonstration project. It has now created a folder with some files for you. In the src folder, you have a App.vue file with is the starter component for your website. In src/components folder you have a component called HelloWorld.vue. (If you are using Visual Studio Code, install the Vetur extension to help with syntax)

Let’s look at our previous example as a .vue file. Notice how we can add scoped to our style tag to write CSS only for this component.

So what is a Single File Component? You can see that the file is split into three parts. We have a template tag for HTML, a script tag for JavaScript and a style tag for CSS. It is quite nice to keep this in the same file, as you quickly get an overview of what the component does and what belongs to it. If you wish though, it is totally possible to separate it into its own files. There are a few differences in the .vue files. The data is a function returning an object with your data values and the Vue object needs to be exported. But otherwise, it is the same as before.

To add a component inside another component, it has to be imported.

import HelloWorld from "./components/HelloWorld.vue";

Then you need to tell the object which components it has available.

components: { HelloWorld }

Now you can use the component where you like in the HTML.

<HelloWorld />

If you want to send data down to a child component, you can use props. The component which receives the props needs to state it in the props object property.

props: { msg: String }

You can use the props values just as you would the data values. The parent can now pass props with v-bind so if the value change in the parent, the child will get the update as well.

<HelloWorld v-bind:msg="message" />

To host the website locally while developing with hot reload, you can write npm run serve in the terminal. To build the project writenpm run build in the terminal, which creates a dist folder with your finished .html and .js files.

Keep working

This was a quick intro and an overview of the most used features in Vue.

I would recommend to keep working with this until you understand it, but also look at computed properties, transitions, shorthand, class bindings, slots, and Vue routing as you keep learning.