Build Your First Application with Vue.js

How to Integrating Javascript Google Maps in Ionic v1
July 25, 2018
Ionic-v1 is not recognized as an internal or external command, Cli Error issue Solved
July 28, 2018

Build Your First Application with Vue.js

Vue.js is an open source lightweight JavaScript front-end framework used for developing UI (User Interface). The main purpose behind the Vue.js was making an easy web User interface. The core library is easy to pick-up and integrates with other libraries or any other running project. Vue.js is easy for those who already have knowledge of HTML, CSS, and Java-Script but if you are a beginner then it is important that you have knowledge of HTML, JavaScript, and CSS. It is the same as another JavaScript but it is huge caliber to develop SPA.

Vue.js is created by Evan You and was originally released in February 2014.

 

Single-Page Applications:-

 

Single-Page Applications (SPAs) are Web apps that load a single HTML page. As the user interacts with the app it dynamically updated the page.
The SPAs use HTML5 and AJAX to create responsive Web apps, without even reload the page.

 

Routing in Vue.js:-

The official Vue-router library handles client-side routing. It supports HTML5 history mode.

Installation:-

 

Download the Vue.js from here.

 

Example:-

1. Download the Vue.js file.
2. Create an index.html file.
3. Add this file in a script tag

<script src=”Your vue.js path”></script>

4. This is a small hello world program in Vue.js

<html> 
<head> 
<meta> 
<meta charset="UTF-8"> 
<title>Hello World program in Vue.js</title> 
</meta> <title>New Vue js Program</title> 
</head> 
<body> 
<div id="newid"> 
<h1 class="red">{{ msg }}</h1> 
</div> 
<script src="js/vue.js">
</script> 
<script> new Vue({ el: "#newid", data() { return { msg: "Hello This Is First Vue.js Program!" } } }); </script> 
<style> .red { color: #f50; } </style>
</body> 
</html>

 

Leave a Reply