DEV Community

Cover image for Vue Academy #0: What is VueJs ? (Fastly)
Code Oz
Code Oz

Posted on • Updated on

Vue Academy #0: What is VueJs ? (Fastly)

What is VueJs ?

Vue is a progressive framework for building user interfaces. It's based on component re-use logic.

You can easily bind your data to the UI (DOM). When you update your data, the dom will be updated automatically (synchronised).


Vue has other module that you can add to your project, for exemple you have vue router (Routing), vuex (state manager store), vue cli (to create easily vuejs project)

Virtual DOM

Vue use virtual DOM (VDOM), that is a copy of a DOM in a object (VDOM has no visual).

If we need to update a value in the DOM, we just need to update this value in the VDOM, after the update we check the difference between DOM & VDOM, and we update the portion of the current DOM with the new value without impaction the current dom performance !


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

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
Enter fullscreen mode Exit fullscreen mode

Magic ! You data is synchronised in the view ! So if you change message data, dom will be updated


Vue use directive that will improve your code, they are prefixed with v- to indicate that they are special attributes provided by Vue.

For exemple you can use v-if directive to create a component if the condition is true :

  <span v-if="isShow">Hey</span>
Enter fullscreen mode Exit fullscreen mode

You can also use v-else-if, v-else.

  <span v-if="isCool">Is Cool</span>
  <span v-else>Not Cool</span>
Enter fullscreen mode Exit fullscreen mode

v-for -> We can use it to render a list of items based on an array.

  <span v-for="item in [1, 2, 3]"> {{ item }} </span>
Enter fullscreen mode Exit fullscreen mode

We can easily catch event like click with v-on !

click on me

Component basics

A common component will have these specific attribute:

  • Props: Passing Data to Child Components

  • Data: Data linked to the component

  • Methods: Methods linked to the component

  • Lifecycle hooks: Lifecycle hooks allow you to know when your component is created, added to the DOM, updated, or destroyed.

I hope that you learn something and that article will motivate you to try Vue !

I hope you like this reading!

🎁 You can get my new book Underrated skills in javascript, make the difference for FREE if you follow me on Twitter and MP me 😁

Or get it HERE



🏃‍♂️ You can follow me on 👇

🕊 Twitter :

👨‍💻 Github:

And you can mark 🔖 this article!

Top comments (2)

yarip28 profile image

Nice vue js series !

codeoz profile image
Code Oz

thanks yarip