This content originally appeared on DEV Community and was authored by CodeOzz
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 !
This content originally appeared on DEV Community and was authored by CodeOzz
CodeOzz | Sciencx (2021-07-15T11:39:51+00:00) Vue Academy #0: What is VueJs ? (Fastly). Retrieved from https://www.scien.cx/2021/07/15/vue-academy-0-what-is-vuejs-fastly/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.