Blog

Intro to Vue.Js (Part 1)

Mike Lonnborg
June 1st, 2017

VueJs is a relatively new MVVM javascript framework designed for building interactive web interfaces. Here is a feature comparison to other popular frameworks on their website: Vue comparison

This tutorial aims to give you an overview of some of the basic features of Vue. In future sessions we\'ll be looking at some more advanced topics and how it could be possible to build large applications with Vue.

Creating a Vue Instance with new Vue()

Let's start off by creating a basic HTML page and importing VueJs.

<!DOCTYPE html>      
<html>
 <head>
  <title>Intro to VueJs - Livesoftware</title>
 </head>
 <body>
 <script src='https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.3/vue.js'></script>
 </body>
</html>

We can now create a div tag with an id of app and a new Vue instance. When you create a new Vue instance using the Vue() constructor (mapped to id app) Vue's scope will only know about the elements that are declared within this div but nothing about what exists outside this div element.

You can specify the mounting point of a Vue instance using the el option in the Vue() constructor which accepts and argument of the DOM element id you wish to mount your Vue instance:

<!DOCTYPE html>      
<html>
 <head>
  <title>Intro to VueJs - Livesoftware</title>
 </head>
 <body>
   <div id='app'>
     <!-- app will be the DOM element that VueJs mounts to -->
   </div>
 <script src='https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.3/vue.js'></script>
 <script>
    // bind a VueJs instance to the div with the id of app
    var vm = new Vue({
      el: '#app'
    });
  </script>
 </body>
</html>

Above we created a Vue instance using the Vue() constructor which accepts an option object (much like a constructor in C#) that specifies the element to mount on.

Now that we have created a Vue instance and connected it to a DOM element, Vue is aware of any element inside of this instance.

Data Binding with Vue v-model

To demonstrate the data binding features of Vue, we can create a HTML text input with the v-model directive that can be used to dynamically update the message property in the data object.

The v-models directive is similar to any other HTML attribute. This creates a 2-way data binding on any form input elements including input, textarea, and select. The value of the v-model directive is the data we wish to update on user input events. For this particular example, we are binding the input element to the message string that we have created in the Vue data object as shown below:

...
<div id='app'>
  <!-- app will be the DOM element that VueJs mounts to -->
  Enter a message: <input type='text' v-model='message'>
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.3/vue.js'></script>
<script>
  // bind a VueJs instance to the div with the id of app
  var vm = new Vue({
    el: '#app',
    data: {
      message: 'Hello World'
    }
   });
</script>
...

Running the code above will display a textbox similar to below.

Enter a message:

Now type something different into the textbox and open chome dev tools. You should see the viewmodels message value will be mapped to whatever is entered in the textbox.

This tutorial has demonstrated some of the basic initialization and mapping ideas in Vue. In part 2 we will get into some more advanced functionality.