DEV Community

loading...
Cover image for Vue Academy #0: What is VueJs ? (Fastly)

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

CodeOz
Creator of https://www.chillflix.art 💻 4+ years of coding ! https://twitter.com/Code__oz📝 Love writting article dev and sharing ressources !
・Updated on ・2 min read

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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

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

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>
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!

If you want to have a nice article to read about web dev, you can subscribe to my FREE newsletter & get a cheatlist about Javascript at this url 👇

🎁 MY NEWSLETTER

☕️ You can SUPPORT MY WORKS 🙏

🏃‍♂️ You can follow me on 👇

🕊 Twitter : https://twitter.com/code__oz

👨‍💻 Github: https://github.com/Code-Oz

And you can mark 🔖 this article!

Discussion (2)

Collapse
yarip28 profile image
Yarip28

Nice vue js series !

Collapse
codeoz profile image
CodeOz Author

thanks yarip