Vue.js For Beginners

Vue.js is an open-source JavaScript framework for building user interfaces. This is what React is. Vue.js also works with Virtual DOM which gives it the performance it claims. It provides much smarter updates to DOM by only rendering what needs to be rendered. Vuejs is easy to learn than Angular2 and React.js.

How to start First Vue.js Application in your NotePad++ Text Editor. I will use CDN link of VUE.JS .I wont download it.You can download it from www.vue

This is CDN link of VUE.JS
<script src=”https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js”></script>

index.html (This is our First Application in Vue.js)

<!doctype html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title>Vue JS Intro</title>
<script src=”https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js”></script>

</head>
<body>
<div id=”app”>
<p>{{MyMessage}}</p>
</div>

<script>
var myApp = new Vue({
el: ‘#app’,
data:{
MyMessage:’Hello I am Vuejs’
}
});
</script>

</body>
</html>

Code Explanation :
I have created  a variable  “var myApp ” with name Vue ({}). This line is important without declaring this line you cant access Vue.js functionalites  “var myApp = new Vue({});”.

Inside this bracket ({}) we will write entire code of Vue.js .Now we target HTML elements using “el:”  .This el means ELEMENT of HTML  Div Tag  and  Paragraph Tag or any other tag.     el: ‘#app’,  In this line we are targeting ID of DIV TAG  of HTML . What is DATA in the next line  data is the object to start your actual code .So data is important part of VUE.JS. In the next line i have created variable “MyMessage” using : colon and “Hello I am Vuejs” is my message and it will print on browser.

<div id=”app”>
<p>{{MyMessage}}</p>
</div>

// In the {{}} Double Bracket we show our data .It means our data will be shown inside{{}}.
Output of Code in the Browser ..

Comments 17

Leave a Reply

Your email address will not be published. Required fields are marked *