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

Eco-system

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 !

Syntax

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

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

Directives

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 :

<div>  <span v-if="isShow">Hey</span></div>

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

<div>  <span v-if="isCool">Is Cool</span>  <span v-else>Not Cool</span></div>

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

<div>  <span v-for="item in [1, 2, 3]"> {{ item }} </span></div>

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

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 !