Starting out

Vue.js is a front end framework used for creating web applications. In order to use Vue.js, you need to include its js file into the html file just like we do for a normal javascript js file.
As discussed in the previous section on Setup, there are mainly two approaches

• Include Vue.js script file into the application’s html file manually by downloading or through a CDN.
• Creating a project using Vue CLI which automatically downloads all the required files.

It is recommended to go with Method 1 to understand the basic concepts and then jump on with using Vue CLI method. Anyways, this tutorial will cover both the methods.
First Vue.js Code
If you are following method 1, then

1. Create a new file named index.html in the root folder of your vue application, let’s say F:/vue on windows or /root/vue on linux and mac systems.
2. Also place vue.js file in the same folder as index.html.
3. Copy the below contents into index.html file.

If you are following method 2(Vue CLI), then look for index.html file in the folder where you executed command vue init webpack-simple vueapp(the folder name in this case is vueapp)

1. Remove everything you see in index.html file, and
2. Copy the below contents in it and save.

<!-- Path to vue.js file -->
<script src="vue.js"></script>
<div id="app">
    <h1>{{message}}</h1>
</div>

<script>
    new Vue({
        el: '#app',
        data: {
            message: 'Just starting to learn Vue.js'
        }
    })
</script>

For now don’t worry if you do not understand it. Now right click index.html file and open it in your favorite browser. You should see something as below.

If you are using Vue CLI and have started the server using npm run dev command, then directly go to the browser automatically opened by this command and you will see the same text.
Explanation
This section will explain what all is going in the above code and how the text was displayed on the browser.
First of all vue.js file is imported into the index.html file.

Now index.html has two sections:

1. One which contains html code in the form of a div and an h1 tag. This h1 tag contains a name enclosed between double curly braces ( {{ message }}).
   This double curly braces contains a variable defined somewhere and it is replaced by the value contained in that variable when the page is displayed. This is called String interpolation where message is a variable. Now where does that variable come from? It comes from the second section explained next.
2. Second section of index.html file is a script tag. It is the code defined in this tag where Vue.js comes into picture. It creates a Vue instance(or object) using new operator. This object has two properties namely,
   1. el: Its value defines the id of the html element to which this instance will be bound. Since it is an id, it is preceded with a ‘#’. Notice that the value of el property is the same as the id of the div defined in the html code.
   2. data: This property contains the data defined in the Vue object. data itself is an object which contains properties and their values.
      It may contain any number of properties with their values as strings.
      To use these properties inside HTML code, directly enclose them within double curly braces and the value of those properties will be displayed when the page is rendered using String interpolation.

Below diagram will make the relation between Vue instance and HTML code more clear.

There is much more about Vue instance and it is discussed in the next section.