Greeting earthlings! Today, we embark on a journey to the land of Vue.js. Buckle up and grab some popcorn because we're about to discover the WTF of Vue.js. Let's start this adventure, shall we?

Vue.js is the cool kid on the block, unlike those big-shot frameworks like React and Angular which have big tech companies backing them. Vue.js is created by a team of superheroes and it's so simple even a baby could understand it! It's got so many awesome features, you'll fall head over heels 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 adaptable. 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

1. Vue.js directives offer functionality to HTML applications

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

Hey, that was just the definition of vue.js there is a lot more to explore.

Vue.js Directives

1. Vue.js uses double braces {{ }} as placeholders 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 a 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 elements:

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>

## Installation

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 for 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.

And there you have it folks, a crash course on the awesomeness that is Vue.js. I hope this article has left you feeling like a superhero ready to conquer the world of front-end development. Just remember, with great power comes great responsibility (and a whole lot of coding). Until next time, keep on vuing!

You can refer to vue.js' official documentation for more. Vue.js has a lot more to explore.