Vue.js First Application

We have already learned that Vue.js is an open-source JavaScript framework used for building single-page web applications. The core library of this framework is mainly focused on the view layer only. Vue.js is mainly developed for frontend development. Here, we are going to use the HTML, JavaScript, and CSS files to build the first application of the Vue.js framework.

Let us start to create a project on Vue.js using NPM. This example explains how we can use the Vue.js framework to develop an application.

Index.html

It is the app main file which is responsible for user interface.

Main.js

It is the main JavaScript file which is used to drive the whole application. Here, we must have to import the Vue.js library and App component.

Run the App

Finally, run the app. After executing this code, we will get the output on this http://localhost:8081/vueIndex.html/#/ localhost, as shown below. If we edit anything in the source code, it will be immediately reflected in the output.

Vue.js First Application

Now, our first vue.js app is created successfully. In this example, we have seen that it includes an unpkg of NPM at the start of the html file in the <script> tag. See the below line:

There is a <div> tag which added in the body of html file to display the output “This is my first code of Vue.js” in the browser. The below code shows how we can use the <tag> in the body of the html file.

We have added a message in the interpolation, i.e. {{}}. It interacts with Vue.js and displays the output in the browser. The below code shows how we can add a message in the interpolation of the html file, and this code always written in the <script> tag.

In the above code snippet, we take an instance of Vue.js example. It takes the id of the DOM element, i.e., el: “#app”, which is also the id of the <div>. Here we are going to use the console in the web browser where we can change the code, and the output will be reflected on the same browser. To open the console on the Web browser, press F12 key or Ctrl + Shift + I key.

Vue.js First Application

The below example explains how we can use the console in the Web browser to change the output of the code. Here, we have changed the message using a console, like “This is my first code of vue.js” to “My first code of Vue.js is an excellent” that will be reflected in the preview screen. It can be shown in the below screenshot:

Vue.js First Application

Pin It on Pinterest

Share This