Vue is a new JavaScript framework. In 2016, you will see vuejs everywhere. It’s easy to use and fan to learn vuejs framework. With vuejs you can make friendly, flexible and amazing web applications. In this tutorial we will introduce you to the basic of this framework, and in future articles you will see some more advance topic about this amazing framework. So, let’s starting exploring its amazing features.
Learn Vuejs Framework
To use Vuejs, just download the vuejs file from vuejs.org or github and then include it in your project. As like other JavaScript files or frameworks, you may include the vuejs file at the bottom of you page. Of course you can use any online editor like jsfiddle also, our goal is to learn vuejs.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Intro to Vuejs</title>
</head>
<body>
<div id="demo">
</div>
<script src="vue.js"> </script>
<script type="text/javascript">
new Vue({
el:"#demo",
data:{
},
});
</script>
</body>
</html>
As you can see the above code is just a simple html code with vuejs file included inside. We have a div with id of demo. at the bottom of the page, we have our custom JavaScript code. We have created an instance of vuejs class. Inside that we have an el property which the authority of the vuejs. It means, vuejs will work only on elements that are inside div with id of demo.
The second property is for data, you will learn about data a few minutes don’t worry. Here an example, checkout the JavaScript code as well.
[codepen_embed height=”268″ theme_id=”0″ slug_hash=”dMMqaa” default_tab=”result” user=”Hujjat”]See the Pen <a href=’http://codepen.io/Hujjat/pen/dMMqaa/’>Intro to vuejs – demo</a> by Hujjat Nazari (<a href=’http://codepen.io/Hujjat’>@Hujjat</a>) on <a href=’http://codepen.io’>CodePen</a>.[/codepen_embed]
If you look at the html code in above demo example, you will notice that we are using a custom attributes for input fields like v-model and for paragraph we used v-show. They are called directives, but for now just know that they are custom attribute for vuejs framework.
we have put the data property value another object, it’s because we can have so many data in our application.
Explain more
v-model when we assign this directive to any element in the html, we can access it’s value by that name. In our example, it’s name is name. Now, if anywhere in your code you put the name inside double braces like below example, it will show whatever is the value of that directive
<p v-show="name">welcome, {{name}}</p> v-show : It’s like condition statements. In our example it’s not necessary to write, but we wrote it because we set a condition that: if name there is name, show the welcome text if not don’t show anything.
Conclusion
So, it was just the basic of vuejs introduction to learn vuejs framework. I have explain just a simple example of what vuejs can do and how amazing it’s to use in our project. I hope it has been informative for you and we will cover some more topic about vuejs in future articles.