Vue JS 2 Introduction and Vue instance


What is Vue.js?

  • A front-end framework 
  • Create the javascript drive web application
  • Runs in the browser 
  • No need to make multiple server request for pages
  • Very Lean (16kb)
  • Very high run-time performance

How to install Vue.js the easy way

  • Conditionals
  • Events
  • Data

Install Vue.js with Vue-CLI and Webpack

  • Components
  • Vue files & templates

So let's install Vue Js 

First, visit Vue-js official website to get CDN link . after that we need to create a new project so choose your favorite code editor ( My recommendation is Visual code editor ) add a new file index.html.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
   
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>  



<body> 
    <div id="vue-app">
        
    </div>
    <script src="app.js"></script>
</body>

</html>

At index.php file, I am used Vue JS CDN. after that add two more file app.js (for writing Vue Js code ) and a CSS  file for styling. 

At the app.js page, all Vue code will be written here, in this tutorial we use one-page app.js for writing code but when we make a large application we will create a new separate file for performing a particular task. At this page, we write some method, data, and function.

So, add some code in  app.js 

new Vue({
    el: '#vue-app' 
    
});

In this page, we create new object Vue and create an el property which has a string value which defines the which element going to control by Vue Instance.  in this case, we use Vue-app name.

  <div id="vue-app">

     All HTML code should be here. 

   </div>

So all HTML code of index.html  should be in root element Vue-app. Vue everything control only in this element.

Let's play with some more code with App.js  file add one more property data property which is hold all data of Vue instance like name, title, and other data which is used in the index.html page.

new Vue({
    el: '#vue-app', 
    data: {
        name:'CoderMen',
    },
    
});

When you run this application you see the result on your desktop screen.