What is Vue.js?

• Vue.js is a progressive Javascript framework used to build user interfaces and single page applications (SPA). It is follows a component-base architecture making development modular and efficient.

Why Vue.js?

-It is Progressive, Easy to learn, Lightweight and fast, Reactive, Component-Based and Great ecosystem. Perfect for building dynamic and maintainable web applications.

𝘊𝘶𝘳𝘳𝘦𝘯𝘵𝘭𝘺 𝘦𝘹𝘱𝘭𝘰𝘳𝘪𝘯𝘨 𝘝𝘶𝘦.𝘫𝘴 𝘧𝘰𝘳 𝘣𝘶𝘪𝘭𝘥𝘪𝘯𝘨 𝘥𝘺𝘯𝘢𝘮𝘪𝘤 𝘸𝘦𝘣 𝘢𝘱𝘱𝘴!

𝚠̲𝚑̲𝚊̲𝚝̲ ̲𝚒̲𝚜̲ ̲𝚁̲𝚎̲𝚏̲(̲)̲:̲

ref() is a reactive value in Vue.js. It lets you track changes and automatically update the DOM, so you don’t need to manipulate it manually.

In plain JavaScript, when a variable changes, the DOM does not update by itself. You have to write something like:

𝙴̲𝚡̲𝚊̲𝚖̲𝚙̲𝚕̲𝚎̲ ̲𝙹̲𝚊̲𝚟̲𝚊̲𝚜̲𝚌̲𝚛̲𝚒̲𝚙̲𝚝̲:

<p id="count">0</p>
<button onclick​="increase()">Increase</button>

<​script>
 let count = 0
 // increment function
 function increase() {
 count++
 document.getElementById('count').innerText = count
 }
<​/script>

𝙴̲𝚡̲𝚊̲𝚖̲𝚙̲𝚕̲𝚎̲ ̲𝚅̲𝚞̲𝚎̲.̲𝚓̲𝚜̲:

import {ref} from 'vue'; 
const count = ref(0); 

//increament function 
function increase() { 
count.value++;
} 
<​/script> 
<template> 
<div> 
<p> current count: {{count}} </p>
<button @click='increase'>Increase</button> 
</div> 
</template>

Here, count starts at 0 and increase by one every time the button is clicked. In Javascript(logic), you need to update it with .value, but in template(HTML), you just use {{count}}.

𝚠̲𝚑̲𝚊̲𝚝̲ ̲𝚒̲𝚜̲ ̲𝚁̲𝚎̲active(̲)̲:̲

Reactive is the basic/default way in vue to make objects and arrays reactive. It tracks mutation so the DOM updates automatically when value changes. It has few limitation that it doesn't work on premitive value like (Number, String, Booleans). For those you need to use ref().

𝚠̲𝚑̲𝚊̲𝚝̲ ̲𝚒̲𝚜̲ ̲Vue Directives:̲

Directive applies special reactive behaviors to the DOM and they are basically like HTML attributes which are added inside the HTML template. All directives start with v- (e.g., v-if, v-for) to indecate they are special vue attributes. They help vue reactively update the DOM based on data changes.

• Vue Directives: Special attributes starting with v- that apply reactive behaviors to the DOM.