Create your first Vue.js application using Visual Studio Code (VS Code)

Going to create Vue.js application using Visual Studio Code before going to create the application, I assume that you already familiar with Visual Studio Code editor.

If you are not aware of it so let me take opportunity to help on this. Visual Studio Code is an open source and free editor from Microsoft. So anyone can use as a free software for the web development.

You can download from here and use for the web development.

Once you open the VS Code its a welcome page open.

Now we are going to create new project/folder (choose your project path). I have created new folder VueJsWithVSCode.

Its an empty folder at moment so we are going to create the first file index.html.

Here, I am going to create simple Vue.js application which will help to understand to beginner.

Vue is a progressive framework for building user interfaces. Vue code library focus on view layer only, and is easy to pick up and integrate with other libraries or existing projects.

Created index.html file with basic html coding. Once you have ready with basic setup of html page.

Going to add Vue library. There is a multiple way to add Vue library.

1. If you are aware of NPM then you can use of Vue npm to install the package.
2. You can use vue-cli to create the application but do not recommend that beginners start with vue-cli.
3. You directly include vue library on your index.html file.

Going to add first vue app on index page.

 

{{ message }}

 

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

This looks pretty similar to rendering a string template, but Vue has done a lot of work under the hood. The data and the DOM are now linked, and everything is now reactive.
Binding with element attribute.
How to text interpolation using bind element attributes.

 


    Hover your mouse over me for a few seconds
    to see my dynamically bound title!
  

 
var app2 = new Vue({
  el: '#app-2',

  data: {
    message: 'You loaded this page on ' + new Date().toLocaleString()
  }
})

After adding code and run it. you will see the following line of message on the screen. Once you mouse hover on the text you will get the dynamic text which was bind with the title attribute.

 

Its a simple application for the newbie for Vue.js.