Vue.js For Beginners - Web Development

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/[email protected]/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/[email protected]/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 ..

17 Replies to “Vue.js For Beginners”

  1. I used to be very pleased to seek out this internet-site.I wanted to thanks on your time for this glorious learn!! I definitely having fun with each little little bit of it and I have you bookmarked to check out new stuff you weblog post.

  2. The next time I read a weblog, I hope that it doesnt disappoint me as a lot as this one. I imply, I know it was my option to learn, however I actually thought youd have something fascinating to say. All I hear is a bunch of whining about something that you may repair in case you werent too busy on the lookout for attention.

  3. That is the appropriate blog for anybody who needs to find out about this topic. You understand so much its nearly hard to argue with you (not that I really would want匟aHa). You positively put a brand new spin on a subject thats been written about for years. Great stuff, simply nice!

  4. I and my buddies appeared to be checking out the good tricks found on your web blog and then unexpectedly I had a terrible suspicion I never thanked you for those strategies. The young boys had been for that reason excited to read them and now have certainly been using these things. Appreciate your genuinely very accommodating and for finding certain ideal guides millions of individuals are really needing to discover. Our sincere apologies for not saying thanks to earlier.

  5. I enjoy you because of all your valuable work on this web page. Betty loves conducting research and it’s really simple to grasp why. I notice all concerning the powerful manner you provide priceless secrets through this web site and as well as increase participation from some other people on the subject and our favorite girl is without question starting to learn a great deal. Enjoy the rest of the year. Your carrying out a superb job.

  6. Oh my goodness! an incredible article dude. Thank you Nevertheless I am experiencing challenge with ur rss . Don抰 know why Unable to subscribe to it. Is there anybody getting identical rss downside? Anyone who is aware of kindly respond. Thnkx

  7. I discovered your blog site on google and examine a few of your early posts. Proceed to keep up the excellent operate. I just additional up your RSS feed to my MSN Information Reader. Looking for ahead to reading extra from you later on!?

Leave a Reply

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