Creating Our First Vue.js App
Tags: vue, javascript, webdev, tutorial
Published: 2020-02-02 22:15:03

**Subscribe to my email list now at http://jauyeung.net/subscribe/**

**Follow me on Twitter at https://twitter.com/AuMayeung**

**Many more articles at https://medium.com/@hohanga**

**Even more articles at http://thewebdev.info/**

Vue.js is an easy to use web app framework that we can use to develop interactive front end apps.

In this article, we’ll look at how to create our first Vue.js app. We’ll look at data binding, conditional rendering, and loops.

Getting Started
===============

Vue.js is designed to be a progressive framework building UIs. It can be added incrementally to an existing app that uses other libraries.

Also, it can be used to create a new standalone app. Like other frameworks like Angular and React, it can be used to create a single-page app with modern tooling with the Vue CLI and its own ecosystem of libraries.

To get started quickly, we can use a `script` tag to include the development version of the Vue.js framework, which includes the warnings that are only available when using this build. It makes development easier.

We can include the development build by writing:

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

in our `index.html` file or:

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

for the production build.

To create our first app, we first create `index.html` and add:

```html
<!DOCTYPE html>
<html>
  <head>
    <title>Hello</title>
    <meta charset="UTF-8" />
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
  <body>
    <div id="app">
      {{ message }}
    </div>
    <script src="./src/index.js"></script>
  </body>
</html>
```

Then in `src/index.js` , we add:

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

Then we should see `Hello` printed on the browser tab.

What we did in `index.html` is that we added the Vue.js framework with:

```
<script src="[https://cdn.jsdelivr.net/npm/vue/dist/vue.js](https://cdn.jsdelivr.net/npm/vue/dist/vue.js)"></script>
```

Then we added the Vue.js template as follows:

```html
<div id="app">  
  {{ message }}  
</div>
```

Next, we added:

```html
<script src="./src/index.js"></script>
```

so that we can load our own JavaScript code that uses Vue.js to initialized the app.

Then in `src/index.js` , we add:

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

so that we can load our app with the `message` variable set to the`'Hello'` string, which is rendered in `index.html` when we have:

```html
{{ message }}
```

The double curly braces indicate that it’s a property of the `data` and it’ll fill in the `message` placeholder with the value of the `message` property of `data` in the object that we passed into the `Vue` constructor.

Another way to bind element attributes to property value in the `data` property is to use `v-bind:title` .

In `index.html` , we write:

```html
<!DOCTYPE html>
<html>
  <head>
    <title>Hello</title>
    <meta charset="UTF-8" />
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <span v-bind:title="message">
        Hello
      </span>
    </div>
    <script src="./src/index.js"></script>
  </body>
</html>
```

Then when we keep `src/index.js` the same, we’ll see a tooltip that says `Hello` when we hover our mouse over it.

What we did was setting the `title` attribute of the `span` to the value of `data.message` in the object that we passed into the `Vue` constructor.

`v-bind` is called a directive, and it’s used to set the value of the `title` attribute dynamically in the code above.

Conditionals
============

We can conditionally display something on the screen by using the `v-if` directive.

To use it, we can write the following in `index.html` :

```html
<!DOCTYPE html>
<html>
  <head>
    <title>Hello</title>
    <meta charset="UTF-8" />
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <span v-if="visible">
        Hello
      </span>
    </div>
    <script src="./src/index.js"></script>
  </body>
</html>
```

Then when we write the following in `src/index.js` as follows:

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

We see nothing.

This is because we hid the `span` with by setting `visible` to `false` and passing it to `v-if` . When we have a `v-if` directive added to an element. It’s only displayed if the value we passed into the `v-if` directive is `true` .

`v-if=”visible”` means that the content of this element will be displayed when `data.visible` is `true` .

So if we change `src/index.js` to:

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

We should see `Hello` on the browser screen.

Loops
=====

We can use the `v-for` directive for looping through arrays that are values of a property of `data` .

For example, we can use it as follows. In `index.html` , we write:

```html
<!DOCTYPE html>
<html>
  <head>
    <title>Hello</title>
    <meta charset="UTF-8" />
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <ul>
        <li v-for="person in persons">
          {{person.name}}
        </li>
      </ul>
    </div>
    <script src="./src/index.js"></script>
  </body>
</html>
```

Then in `src/index.js`, we write:

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

Then we get:

```
Mary  
Jane  
Joe
```

in our browser screen.

What the code above did was that we set `data.persons` in `index.js` to an array, which can then be looped through by the `v-for` directive in `index.html` .

Vue.js then rendered the value of the `name` property of each entry in each `li` element as we specified in the template:

```
<ul>  
  <li v-for="person in persons">  
    {{person.name}}  
  </li>  
</ul>
```

and so we get the entries listed in a list.

Conclusion
==========

We can create a simple Vue.js app by including the Vue.js framework in our HTML `script` tag and then we can add the code for our Vue.js app in a JavaScript file.

Then we can use directives to display items from the `data` property of the object that we pass into the `Vue` constructor in templates.

We can use the `v-bind` directive to set data attribute values. `v-if` to display things conditionally, and `v-for` to display things from array entries by looping through it and rendering the content.