Introduction to Vue
Tags: vue, javascript, beginners
Published: 2020-01-28 16:00:05

---
title: Introduction to Vue
published: true
description: Vue is one of the top 3 JavaScript front-end frameworks, with many devs giving it a try. See this quick but solid overview on Vue basics to get started.
tags: vue, javascript, beginners
canonical_url: https://blog.jscrambler.com/introduction-to-vue/
cover_image: https://blog.jscrambler.com/content/images/2020/01/jscrambler-blog-introduction-to-vue.jpg
---

## What is Vue.js?
Vue is a progressive front end framework that can be added easily to an existing app. We can also make a single page app from it. This means that we can use it to add new functionality to existing apps or to use it to create new apps.

It's a component-based framework, which means that we build apps with Vue by nesting components and passing data in between them.

## Getting Started
We can get started by creating a `script` tag to add the Vue.js framework to our code.

There's a development version of the framework which we can add by writing:

```javascript
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
```

The development version isn't minified, so it shouldn't be used in production.

The production version can be added by writing:

```javascript
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
```

## Creating our First Vue App

We can begin by creating a project folder and then adding an `index.html` and an `index.js` file to hold our HTML and JavaScript code respectively.

Then, in `index.js` we have to create a new Vue instance, which is an entry point of our Vue app.

To do this, we can write the following code in `index.js`:

```javascript
new Vue({
  el: "#app",
  data: {
    message: "Hello"
  }
});

```

In the code above, we create a new instance `Vue` by passing in an object with various options.

The `el` property tells Vue to put our app inside a `div` element with ID `app`.

The `data` property has the initial data which we can use in templates.

Then, in `index.html`, we write the following code:

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <title>App</title>
  </head>
  <body>
    <div id="app">
      {{message}}
    </div>
    <script src="index.js"></script>
  </body>
</html>
```

The HTML code above has the `script` tags for the Vue framework located at the top, and another `script` tag for our own code located at the bottom.

In the `div` element with ID `app`, we added the double curly braces to display the string `'hello'` from `data.message` in `index.js`.

The automatic updating of the template's data from the Vue instance is called data binding.

Data can also go from the template back to the Vue instance as we will see later.

At this point, we should see:

```
Hello
```

on the screen when we load the browser.

In Vue.js, any valid JavaScript expression can be placed in between the double curly braces.

Some examples of this are:

```html
{{ num + 1 }}
```

or:

```
{{ messages.reverse() }}
```

## Conditional Rendering

We can conditionally render items on the screen by using the `v-if` directive. Directives are Vue code that we can apply to make an element do something.

For example, we can write the following code:

`index.js`:

```javascript
new Vue({
  el: "#app",
  data: {
    message: "Hello"
  }
});
```

`index.html`:

```html
<p v-if="Math.random() > 0.5">
  {{message}}
</p>
<p v-else>
  No Message
</p>
```

Then, when we load the browser or refresh it, we see that 'Hello' will be displayed sometimes, since it's only displayed when `Math.random()` returns something bigger than `0.5`.

The `v-else` directive is for displaying something if the condition in `v-if` is `false`. In the code above, if `Math.random()` returns some number less than 0.5, then we'll see “No Message”.

<a href="https://blog.jscrambler.com/how-to-protect-your-vue-js-application-with-jscrambler/?utm_source=dev.to&utm_medium=referral" target="_blank"><img alt="Protect your Vue App with Jscrambler" src="https://media.jscrambler.com/blog/V5-Vue.jpg"></a>

## Accepting Inputs
A Vue app can take inputs via the `v-model` directive. This directive accepts a variable as the value.

`v-model` gets the input and sets it to the `data` in the `Vue` instance. It'll also get the `data` from the `Vue` instance and display it on the template. We call this 2-way binding since the data is automatically set and data already set is also passed back to the template.

For example, if we have the following code:

`index.js`:

```javascript
new Vue({
  el: "#app",
  data: {
    message: "Hello"
  }
});
```

```html
<input v-model="message" />
<p>{{message}}</p>
```
When the page first loads, we see the word 'Hello' inside the `input` element. This happens because the value of `data.message` is sent from the Vue instance to the input by the `v-model` directive.

Then, when we type in something in the input, it'll be displayed in the `p` element below it. This is because the data typed into the `input` element is sent to the Vue instance that we created in `index.js`

The data we typed in is set in `data.message` in the object that we passed into `new Vue`.

## Handling Events
JavaScript events have to be handled so that the app can properly react when the user performs an action.

Vue makes this easy by providing the `v-on` directive. `@` is shorthand for `v-on`. For example, `v-on:click` is the same as `@click`. To handle user click events, we can use the `v-on:click="onClick"`. This calls the `onClick` method in the object that we passed into the Vue instance when the user clicks whatever has this directive applied.

The `click` in `v-on:click` is called an argument. This is because we can replace `click` with other event names that we define or are built into the browser.

Using this knowledge, we can create a button that pops up a message as follows:

`index.js`:

```javascript
new Vue({
  el: "#app",
  methods: {
    onClick() {
      alert("Hello");
    }
  }
});
```

```html
<div id="app">
    <button v-on:click="onClick">Click Me</button>
</div>
```

When we click the *Click Me* button, our code calls the `onClick` method because we have `v-on:click="onClick"` in the template. Anything in the object can be called from the template.

Therefore, we should see an alert box that says 'Hello' pop up when we click the *Click Me* button.

## Displaying Collections of Data
We can display collections of data easily with the `v-for` directive. It works with arrays and objects.

For example, it enables us to display items from an array as a list as follows:

`index.js`:

```javascript
new Vue({
  el: "#app",
  data: {
    persons: [{ name: "Mary" }, { name: "Phil" }, { name: "Jane" }]
  }
});
```

`index.html`:

```html
<div id="app">
    <ul>
        <li v-for="person of persons">{{person.name}}</li>
    </ul>
</div>
```

The code `v-for="person of persons"` will loop through the `data.persons` array in `index.js` and display all the items by getting each entry's `name` property and then display the item in a `li` element. This is because we added `v-for="person of persons"` in a `li` element.

Also, `v-for="person of persons"` and `v-for="person in  persons"` are the same.

In the end, we should see:

```
Mary
Phil
Jane
```

We can also use `v-for` to display the key-value pairs of an object as follows:

`index.js`:

```javascript
new Vue({
  el: "#app",
  data: {
    obj: {
      foo: "a",
      bar: "b",
      baz: "c"
    }
  }
});
```

`index.html`:

```html
<div id="app">
    <ul>
        <li v-for="(value, name) in obj">{{name}} - {{value}}</li>
    </ul>
</div>
```

The key-value pairs from `data.obj` are displayed in `li` elements:

So we get:
```
foo - a
bar - b
baz - c
```

## Creating Components

Vue is useful because it lets us divide up our app into components.
To create a simple component, we can use the `Vue.component` method as follows:

`index.js`:

```javascript
Vue.component("custom-input", {
  data() {
    return {
      message: "foo"
    };
  },
  methods: {
    submit() {
      alert(this.message);
    }
  },
  template: `
    <div>
      <input v-model='message'>
      <p>{{message}}</p>
    </div>
  `
});
new Vue({
  el: "#app"
});
```
`index.html`:
```html
<div id="app">
    <custom-input></custom-input>
</div>
```

In the code above, we created a component that's available everywhere by calling the `Vue.component` method with the name of the component as the first argument.

The second argument is the options object for creating the component. It's slightly different from what we have in the object that we passed in to create the `Vue` instance.

The `data` property is a function instead of an object. This way, the state won't be exposed to the outside.

`methods` and `template` are the same as the ones we set in the object that we use to create the `Vue` instance.

In `index.html`, we reference our `custom-input` component by writing:

```html
<div id="app">
  <custom-input></custom-input>
</div>
```
Note that we can only reference components inside the element that we render our Vue app in. In this case, it would be the `div` with ID `app`. We can also reference components in another component's template or recursively in its own template.


## Conclusion
Vue is a component-based framework that we can use to create front-end apps in a clean and expressive way.

It has built-in directives for model binding, conditional rendering, and rendering list of items.

Hopefully, this tutorial has helped you quickly understand the basic aspects of Vue and motivated you to start building something unique.

---

**Before deploying your commercial or enterprise Vue apps to production, make sure you are protecting their code against reverse-engineering, abuse, and tampering by following <a href="https://blog.jscrambler.com/how-to-protect-your-vue-js-application-with-jscrambler/?utm_source=dev.to&utm_medium=referral">our tutorial</a>**.