Vue.js Tutorial 101: Create a Simple App

A CodeMix eLearning Tutorial

Create your first app using Vue.js! This simple app with just .html and .js files demonstrates data binding with Vue’s interpolation tech, as well as some event handling.

For a hands-on learning experience, an interactive version of this tutorial is included in CodeMix.

Try it Yourself

What is CodeMix eLearning? | Discover Other Tutorials

Prefer your own development environment? Download the project, and follow along with the video or the steps below.

# Vue.js 101: Create a Simple App

### 01

# Welcome to Vue 101!

In this tutorial, we are going to make a simple Vue.js application with just `.html` and `.js` files. We'll be demonstrating data binding with Vue's interpolation tech, as well as some event handling.

### 02

# Live Preview

Live Preview is now visible as a browser pane next to your source code and makes it easy to observe our changes as we step through the tutorial. If you would like to turn it on/off, click on the `Live Preview` toggle or the eye icon in the top right of your editor's toolbar or press `{binding:codemix.toggle.preview}`.

You should see the preview pane saying, `"Hello Bob"`.

### 03

# Simple Interpolation

Observe line #10, where we've referenced a name property in simple HTML, using Vue's, `moustache` syntax.

On line #17, this property set to, `"Bob"`. Change that to your name, and save the file. The output should now change in the Live Preview pane.

This is the simplest form of data binding, made possible by the Vue instance we have created on line #14.

### 04

# Adding input

Let's go further by adding a simple text-field to our page, typing in the field should change the text displayed.

On line #10, add the following snippet of code and save the file
`<input type="text" v-model="name" placeholder="Name" />`

*v-model*: We use Vue's v-model directive to create two-way data binding - taking data from the HTML input element into the model (the name property), and then back to HTML for display.

Go ahead and type into the input box and see it update the displayed text accordingly.

For more on dealing with forms with Vue, please read <a href="https://vuejs.org/v2/guide/forms.html" target="_blank" rel="nofollow noopener">this document</a>

### 05

# Handling Events

Let's handle a button press in our app too, clicking the button should change your text to be all upper case.

In our Vue instance, we add a method called `toUpper` which uses simple JavaScript to change the case of the model property.

```
var app = new Vue({
    el: '#app',
    data: {
        name: 'Bob'
    },
    methods: {
        toUpper: function() {
            this.name = this.name.toUpperCase()
        }
    }
})

```

In our `div`, we are now going to add a button, and use the `v-on:click` directive to call the `toUpper` method when it's clicked.

`<button v-on:click="toUpper">Upper Case</button>`

Click the button to see your text go all upper!

In Vue, events are handled by the `v-on` directive, followed by the type of event, like click, scroll, keyup, etc. For more on event handling with Vue, please read <a href="https://vuejs.org/v2/guide/events.html" target="_blank" rel="nofollow noopener">this document</a>.

### 06

# Separating Code

So far we've been adding our JavaScript within script tags in the same HTML file. Depending on the amount of code you have to write, you might want to move your JavaScript into a dedicated file.

We do this by moving the Vue instance to a new JavaScript file, and adding a simple reference to this file from within our HTML.

`<script type="text/javascript" src="hello.js"></script>`

### 07

# Nice Job!!!

We hope you enjoyed this simple Vue tutorial; are you ready for the next step in your Vue journey? Continue with <a href="https://www.genuitec.com/elearning/" target="_blank">Vue 102</a> from the *CodeMix* view, where you'll access a web service with a production grade Vue app.