Introduction

Vue.js is an amazing framework that I ever happened to use in my life. I haven't used any framework like this. This is the first that kind of framework that I'm using for the first time. Well, there's other framework like Vue.js like Angular 2, React.js, but I don't have any experince of using them so Vue.js is my first framework of it's kind.

Vue.js makes things a lot easier to handle data and other dynamic execution. One of the coolest part of Vue.js is that it is attached to the DOM. It can manipulate the DOM instantly.

How to Use

So, let's start using Vue.js. To use Vue.js we need to import the file in our page. Only a single file is all we need. Within the <head> tag or <body> use the following code -

	<script type="text/javascript" src="Assets/vue.js"></script>

Now we need to tell Vue where to work with Vue.js. This is how it's done -

	<div id="WorkArea">
		
	</div>
	<script type="text/javascript">
		let anyVariable = new Vue({
			el : '#WorkArea',
			data : {

			}
		});
	</script>

This is way of telling Vue that "Hey Vue, I need you to only work within 'WorkArea' div. So writting anything about Vue outside of the 'WorkArea' div won't actually work. Vue is now attached to 'WorkArea' div."

Here, el stands for 'Element', which specifies the element where the Vue will be attached to. And data is an JavaScript object which contains all the property. Think every property like a variable. Just like a variable within a function or method. You put some value to property and manipulate throughout the entire process.

These options are the only required option to initiate the Vue instance. There are a lots of options available and you will know them later in this tutorial.

Well, there are some certain rules you need to follow. Like -

Don't write any <script> tag or <style> tag inside the 'WorkArea' div. Try writing <script> tag or <style> inside the 'WorkArea' div and you will certainly get error in the console.
Try avoiding placing the Vue script in the <head> tag. You should place the Vue script just before the closing tag of <body> tag and it's a good practice. If you initiate the Vue instance within the <head> tag, your Vue won't work. You will get an error message in the console like "Cannot find 'WorkArea' element." This is because <head> tag executes before the <body> tag actually is placed in the DOM. So accessing any element from <head> tag might not get the element as the element is not loaded yet. It's kind of accessing element which doesn't exist at all.

Data Binding

Okay, Now we are all ready to use Vue. At first we will learn Data Binding. Try this -

	<div id="WorkArea">
		{{ name }}
	</div>
	<script type="text/javascript">
		let anyVariable = new Vue({
			el : '#WorkArea',
			data : {
				name : 'Santanu Bera'
			}
		});
	</script>

If you refresh the page, you will get "Santanu Bera" instead of {{ name }} in the browser. Amazing isn't it. Well let's learn how it works -

In the script within the data option, we have an property 'name' and it's value is 'Santanu Bera'. And if you access any property of Vue you do it with Double Curly Bracket way. Vue will dynamically replace the {{ name }} with the value 'Santanu Bera'. We will show you with a TextBox how to change the value dynamically.

You can store any valid data type to the property. You can store float, int, string, object, array etc.

You can access any Vue property from anywhere as long as it stays withing 'WorkArea' div. You can access from <p> tag, you can access from <span> tag, you can access from any tag you want but general rule of thumb, don't access it from any attribute of any tag, like -
<span style="width: {{ myWidth }}"> Well, if you try to access Vue property this way you will get an error in console. Well, using v-bind you can access those property within the tag attribute. We will show them later.

Inline Syntax

You can also use inline syntax within the double curly bracket. Short inline JS expression is amazing thing happened to Vue.js.

	<div id="WorkArea">
		{{ name2 }}
	</div>
	<script type="text/javascript">
		let anyVariable = new Vue({
			el : '#WorkArea',
			data : {
				name : 'Santanu Bera'
			}
		});
	</script>

And this will give the output {{ "Hi " + myName }}. You can also do arithmetic operation, use ternary statement and many more as long as it is one line expression. Like, message.split('').reverse().join(''). Few more example -

	{ { number + 1 }}
	{ { ok ? 'YES' : 'NO' }}
	{ { message.split('').reverse().join('') }}
	<div v-bind:id="'list-' + id"></div>

These expressions will be evaluated as JavaScript in the data scope of the owner Vue instance. One restriction is that each binding can only contain one single expression, so the following will NOT work:

	<!-- this is a statement, not an expression: -->
	{ { var a = 1 }}

	<!-- flow control won't work either, use ternary expressions -->
	{ { if (ok) { return message } }}

Directives

Directives are special attributes with the v- prefix. Directive attribute values are expected to be a single JavaScript expression (with the exception for v-for, which will be discussed later). A directive’s job is to reactively apply side effects to the DOM when the value of its expression changes. Let’s review the example we saw in the introduction:

	<p v-if="seen">Now you see me</p>

Here, the v-if directive would remove/insert the <p> element based on the truthiness of the value of the expression seen. There are many directives which we will learn later.

Arguments

Some directives can take an “argument”, denoted by a colon after the directive name. For example, the v-bind directive is used to reactively update an HTML attribute:

	<a v-bind:href="url"> ... </a>

Here href is the argument, which tells the v-bind directive to bind the element’s href attribute to the value of the expression url.

Another example is the v-on directive, which listens to DOM events:

	<a v-on:click="doSomething"> ... </a>

Here the argument is the event name to listen to. We will talk about event handling in more detail too.

Modifiers

Modifiers are special postfixes denoted by a dot, which indicate that a directive should be bound in some special way. For example, the .prevent modifier tells the v-on directive to call event.preventDefault() on the triggered event:

	<form v-on:submit.prevent="onSubmit"> ... </form>

You’ll see other examples of modifiers later, for v-on and for v-model, when we explore those features.

Let's End

Now, before ending this chapter, let's show you an real example of a counter.

<div id="WorkArea">
	<div style="display: flex; justify-content: center; align-items: center; width: 100%; height: 100px;">
		<span style="font-size: 30px; font-weight: bold;">{{ hourText }} : {{ minuteText }} : {{ secondText }} </span>
	</div>
</div>
<script type="text/javascript">
	let anyVariable = new Vue({
		el : '#WorkArea',
		data : {
			second : 0,
			minute : 0,
			hour : 0,
		}
	});
	setInterval(function(){
		anyVariable.second = anyVariable.second + 1;
		if (anyVariable.second >60) {
			anyVariable.minute = anyVariable.minute + 1;
			anyVariable.second = 1;
		}
		if (anyVariable.minute > 59) {
			anyVariable.hour = anyVariable.hour + 1;
			anyVariable.minute = 0;
		}
	},1000);
</script>

And this is the output you will get -

{{ hour }} : {{ minute }} : {{ second }}