Getting Started with Vue.js

Hey folks! Welcome to my article on getting started with vue.js and today we will be learning WTF is Vue.js. So, without any further do let's get started.
Vue.js is not any other hyped javascript framework like React and angular are as they are backed by two tech giants but this framework is from a team of legends. Vue.js is must-learn stuff, its so easy to understand and the functionality it provides is so Awesome that you gonna fall in love with it.

What is Vue.js?

Vue (pronounced /vjuː/, like view) is a progressive framework for building user interfaces. Unlike other monolithic frameworks, Vue is designed from the ground up to be incrementally adoptable. The core library is focused on the view layer only and is easy to pick up and integrate with other libraries or existing projects. On the other hand, Vue is also perfectly capable of powering sophisticated Single-Page Applications when used in combination with modern tooling and supporting libraries.

Summary

1.Vue.js lets you extend HTML with HTML attributes called directives

2.Vue.js directives offer functionality to HTML applications

3.Vue.js provides built-in directives and user-defined directives

Vue.js Directives

1. Vue.js uses double braces {{ }} as place-holders for data.
2. Vue.js directives are HTML attributes with the prefix v-

Example

In the example below, a new Vue object is created with new Vue().

The property el: binds the new Vue object to the HTML element with id="app".

<div id="app">
<h1> { { message } }</h1>
</div>

<script>
var myObject = new Vue({
    el: '#app',
    data: {message: 'Hello Vue!'}
})
</script>

Output : Hello Vue!

Now if you have already understood the Hello World program then you are now eligible to proceed further. Now the real game begins.

Vue.js Bindings

When a Vue object is bound to an HTML element, the HTML element will change when the Vue object changes:

<div id="app">
<h1> { { message } }</h1>
</div>

<script>
var myObject = new Vue({
    el: '#app',
    data: {message: 'Hello Vue!'}
})

function myFunction() {
    myObject.message = "John Doe";
}
</script>

Vue.js Two-Way Binding

The v-model directive binds the value of HTML elements to application data. This is called two-way binding:

Example:

<div id="app">
  <p>{ { message } }</p>
  <p><input v-model="message"></p>
</div>

<script>
var myObject = new Vue({
    el: '#app',
    data: {message: 'Hello Vue!'}
})
</script>

Vue.js Conditional binding

v-if binding

It’s easy to toggle the presence of an element, too:

<div id="app-3">
  <span v-if="seen">Now you see me</span>
</div>

var app3 = new Vue({
  el: '#app-3',
  data: {
    seen: true
  }
})

v-else binding

You can also add the v-else binding. It displays another element with v-else shit if the v-if conditional gets false. Just follow the example below.

<div id="appxx">
  <h1 v-if="awesome">Vue is awesome!</h1>
  <h1 v-else>Oh no 😢</h1>
</div>

var appxx=new Vue({
  el:'#appxx',
  data:{
    seen:false
  }
  })  

  // Output will be Oh no 😢.

v-else-if binding

The v-else-if, as the name suggests, serves as an “else if block” for v-if. It can also be chained multiple times:

<div v-if="type === 'A'">
  A
</div>
<div v-else-if="type === 'B'">
  B
</div>
<div v-else-if="type === 'C'">
  C
</div>
<div v-else>
  Not A/B/C
</div>

//Similar to v-else, a v-else-if element must immediately follow a v-if or a v-else-if element.

Vue.js Loop Binding

Using the v-for directive to bind an array of Vue objects to an "array" of HTML element:

Example

<div id="app">
 <ul>
   <li v-for="x in todos">
   { { x.text } }
   </li>
  </ul>
</div>

<script>
myObject = new Vue({
    el: '#app',
    data: {
    todos: [
        { text: 'Learn JavaScript' },
        { text: 'Learn Vue.js' },
        { text: 'Build Something Awesome' }
        ]
    }
})
</script>

The easiest way to try out Vue.js is using the Hello World example. Feel free to open it in another tab and follow along as we go through some basic examples. Or, you can create an index.html file and include Vue with:

<!-- development version, includes helpful console warnings -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

or:

<!-- production version, optimized for size and speed -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

The Installation page provides more options of installing Vue. Note: We do not recommend that beginners start with vue-cli, especially if you are not yet familiar with Node. js-based build tools.

I hope this clears your basics about vue.js. You can refer to vue.js official documentation for more. Vue.js has a lot more to explore.