Pagepro Blog

JavaScript

6 Reasons why you should try Vue.js framework

Posted on .

6 Reasons why you should try Vue.js framework

Introduction

Introduction

Vue is new javascript framework based on experiences and conclusions gained from Angular and React. The framework created by Evan You is getting more popular every day. Vue is a progressive framework – it means that it’s easy to implement to an existing project. Also vue is perfect for powering Single-Page Applications. Let me show you 6 things which probably make you fall in love with Vue.

1. Easy installation and quick usage.

Installation of Vue may look very similar to an installation of React, Angular “quick start” versions, but opinion implementation is much easier and quicker than when you compare the process to other frameworks. If you want to create your own application with Vue you can make it in just only 3 minutes, just create a new file “index.html” or use the existing file and follow the instructions below:

1st step:

Put below script, between <head>…</head> tags in your file:

2nd step:

Paste below script in <body>…</body> section, refresh and see results:
  • {{ user.id }}. {{ user.name }}

We’ve got the array of users from REST API and we see results as iterated list of users names.
As you can see it’s so easy ­čÖé

NOTE: Above you can see the quickest version of start with Vue which is good to begin adventure with the framework. We recommend using Vue CLI to step forward and be able to use the full range of conveniences.

2. Virtual DOM


Source
Virtual-DOM create own copy of DOM trees structure and computing diffs between the previous state and change only this part of DOM which has changed. Thereby minimize operations on DOM elements and give better performance to your app.

3. Single File Vue Components

To better organize a project you can use Vue Component structure which contains HTML structure, Javascript code, and CSS styles in one file which is very useful. It may work very well for small and medium-sized projects.




4. Scoped style and preprocessor support

If you like to write some CSS using preprocessors like LESS, SASS, SCSS or STYLUS feel free to use any of the previously mentioned by only three steps (*example based on Vue.js CLI project with used SASS):

#1 Step:

Put ‘sass’ preprocessor name as ‘lang’ attribute into ‘style’ tag in your’s ‘Vue component’ as you see below:

<style lang="sass">
    ...
</style>

#2 Step:

Install all of needed devDependecies to project:

npm install sass-loader node-sass style-loader --save-dev

#3 Step:

Let webpack to know that we are going to use some scss and edit ‘webpack.config.js’ file like this:

module: {
  loaders: [
    {
      test: /\.vue$/,
      loader: 'vue'
    }, 
    {
      test: /\.s[a|c]ss$/,
      loader: 'style!css!sass'
    }
  ]
},
vue: {
  loaders: {
    scss: 'style!css!sass'
  }
}

Also, vue component introduce “Scoped” styles. What does it mean? It means that all styles written in the┬ácomponent which one has scoped word before the end of a start <style> tag will be visible only in the Vue component.

<style lang="sass" scoped>
    ...
<style>

5. Build-in animation

Vue supports animation while inserting and removing elements in DOM very easly. Automatically applyed specified class depends on action(enter/leave DOM tree) for CSS transitions and animations:

Let’s make animation effect on insert component with two steps:

#1 Step

Put your v-for component into wrapper called ‘transition-group’ like a below:

<template>
  
<transition-group name="animation" tag="ul" appear> <TaskCard v-for="(card, index) in taskCards" :index="index" :key="card.id"/> </transition-group>
</template>

#2 Step

Let’s make some awesome style transition with simple code:

<style scoped>
    .animation-enter,
    .animation-leave-to {
        opacity: 0;
        transform: translateY(-3px) scale(0.9);
        transition: all .4s ease;
    }
    .animation-enter-to {
        opacity: 1;
        transform: translateY(0px) scale(1);
        transition: all .4s ease;
    }
</style>

Results:

6. Useful Vue.js DevTools

The most important thing in working with code is debugger. Vue have own dedicated plugin to debug code which one supports many parts of process resolving problems. Since I saw for the first time Vue.js DevTools I was very impressed how easly to use and intuitive is the plugin. Only what you should to do is install extension to your’s browser called ‘Vue.js devtools’. Let me show you few utils:

#1 Components

Gives you ability to watch Vue components DOM tree and check data values for each component. Also you can choose a component by target using target selector.

#2 Vuex

Vuex is advanced way to data storage management. Using this option you may watch all the changes that took place in Vuex. You can also watch step by step how data has been change and get back to previous data state.

#3 Events

The third option is called Events. All actions and events are logged by devTools.

Marek Jakimiuk

Marek Jakimiuk

There are no comments.
View Comments (0) ...
Navigation