Vue.js is a JavaScript library for building web interfaces. Combining  with some other tools It also becomes a "framework". Now, from our last blog on ValueCoders, you already know that Vue.js is one of the top JavaScript frameworks and it is replacing Angular and React in many cases. This brings in the topic of this blog 'Vue.js is good, but is it better than Angular or React?'

Related: Why JavaScript Programming language is the future of Web dev?

In case you've never heard  or used Vue.js before, you are probably thinking: Come on! yet another JavaScript framework! We get it. However, Vue.js is not new. It was first released in 2013 and now it has 31473 starts on GitHub and downloaded number of times this year. Here, have a look at the images-

Hence, neither Vue.js is new nor less popular compared to other frameworks as per it's lifetime. Now let's see what are the winning factors present in Vue.js.

Why Is Vue.js Special?

The greatest benefit of Vue is its absence of pedigree. It is fresh and has little baggage. After a throught research at ValueCoders we found that it has been learning from the mistakes and successes of React & Angular. The way we see it, Vue is lightweight & easy to learn.

It has got some fairly basic docs but they do a good job, and while there isn't a great deal to learn compared to angular – this is a good thing as it's deceptively powerful. PageKit, Python China are two of the projects using Vue among many. Here's the list. Also, it has two-way data binding facility like Angular and Virtual DOM like React.

Now, we hope your basic concept about Vue.js is quite clear. Hence, let's compare it with Angular and React. We will start with Angular.

Angularjs vs Vue.js

While comparing these two, let us first declare that Angular (mostly after the release of Angular 2) is a mammoth and Vue.js is the tiger hungry enough to become big soon. However, there are many reasons for which developers are switching to Vue. Evan You, the owner of Vue describes the reason rightly

Vue.js is a more flexible, less opinionated solution ( than Angular ) that allows you to structure your app the way you want it to be, instead of being forced to do everything the Angular way. It's only an interface layer so you can use it as a light feature in pages instead of a full blown SPA.

Now let's see a few codes which will give you some basic insights (credits: fadeit.dk).

The bottom line of Angularjs vs Vue.js: There are many tools in Angularjs and so many complex syntax that it can confuse you sometimes. On the other hand,  Vue.js is much simpler than Angular and sometimes even better. If you are concerned about the future of this framework, we suggest not to be. This is going to stay for long and no way to fade in upcoming two years.

Reactjs vs Vue.js

React and Vue.js has some similar features . They are:

1) Utilize a virtual DOM
2) Provide reactive and compose-able view components.
3) Keep focus in the core library, with concerns like routing and global state management handled by companion libraries.

Related: 5 reasons to choose Facebook's ReactJS

This states that React and Vue.js are quite similar feature-wise. Hence, we would like to compare these two frameworks from a developer's perspective with a few simple how-tos for each framework. Let's see what happens!

Hello World:

How React Does it:


How Vue Does it:

This is simple. With a single script tag you're up and running. The benefit here is that to take advantage of Vue features, without learning any new technologies.

Two-way Data Binding

How React Does it:


How Vue does it:

rlafranchi.github.io

Two-way binding in Vue.js is quite simple when you use v-model. In React, it's a long way down.

Iteration

How React Does it:


How Vue does it:

Image: rlafranchi.github.io

In this case, also, Vue wins with less lines and simplified codes.

Bottom line of Reactjs vs Vue.js: What these examples mean is that Vue.js is easy to learn and can be immediately productive. It also provides a path to simplicity with new tools and patterns for managing large codebases. Vue.js can scale up with your knowledge so that you can start to learn the updated tools and best practices.

The Bottom Line:

In today's time, Vue is not as popular as React (maintained by Facebook) or Angular 2 (supported by Google). However, many developers are switching to Vue. Laravel community has also considered it as one of their preferred front-end frameworks.

Overall, Vue provides an answer to the issues of React & Angular and gives you much simpler and easier way to code.

This post was originally published by ValueCoders

Vue.js Is Good, but Is It Better Than Angular or React?的更多相关文章

  1. 01.什么是Vue.js

    VUE.JS 什么是Vue.js Vue.js 是目前最火的一个前端框架,React是最流行的一个前端框架(React除了开发网站,还可以开发手机App, Vue语法也是可以用于进行手机App开发的, ...

  2. 从零开始学 Web 之 Vue.js(一)Vue.js概述,基本结构,指令,事件修饰符,样式

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  3. vue.js面试题整理

    Vue.js面试题整理 一.什么是MVVM? MVVM是Model-View-ViewModel的缩写.MVVM是一种设计思想.Model 层代表数据模型,也可以在Model中定义数据修改和操作的业务 ...

  4. vue.js 一些知识点

    vue.js 也是试图层的运用方法,跟react的方法类似,不过也有许多的不同地方: 1.vue.js 对于数据也是用{{ }} 进行数据更新: 2.vue.js 使用 v-html 指令用于输出 h ...

  5. Vue.js - Day1

    什么是Vue.js Vue.js 是目前最火的一个前端框架,React是最流行的一个前端框架(React除了开发网站,还可以开发手机App, Vue语法也是可以用于进行手机App开发的,需要借助于We ...

  6. Vue.js学习总结——1

    1.什么是Vue.js 1.Vue.js 是目前最火的一个前端框架,React是最流行的一个前端框架 2.Vue.js 是前端的主流框架之一,和Angular.js.React.js 一起,并成为前端 ...

  7. 1. vue.js介绍

    1. 什么是vue.js Vue.js 是目前最火的一个前端框架,React是最流行的一个前端框架(React除了开发网站,还可以开发手机App, Vue语法也是可以用于进行手机App开发的,需要借助 ...

  8. Vue.js面试题整理(转载)

    一.什么是MVVM? MVVM是Model-View-ViewModel的缩写.MVVM是一种设计思想.Model 层代表数据模型,也可以在Model中定义数据修改和操作的业务逻辑:View 代表UI ...

  9. [ 转载 ] vue.js面试题一

    转载自:https://www.cnblogs.com/aimeeblogs/p/9501490.html 如有侵权 联系删除 Vue.js面试题整理 一.什么是MVVM? MVVM是Model-Vi ...

随机推荐

  1. 【IT笔试面试题整理】寻找二叉树两节点的最近的公共祖先

    [试题描述] 求二叉树中任意两个节点的最近公共祖先也称为LCA问题(Lowest Common Ancestor). 二叉查找树 如果该二叉树是二叉查找树,那么求解LCA十分简单. 基本思想为:从树根 ...

  2. 海量数据处理之Tire树(字典树)

    参考博文:http://blog.csdn.net/v_july_v/article/details/6897097 第一部分.Trie树 1.1.什么是Trie树 Trie树,即字典树,又称单词查找 ...

  3. js设计模式之发布/订阅模式模式

    一.前言 发布订阅模式,基于一个主题/事件通道,希望接收通知的对象(称为subscriber)通过自定义事件订阅主题,被激活事件的对象(称为publisher)通过发布主题事件的方式被通知. 就和用户 ...

  4. [转]SQL - Create XML - How to set Unicode UTF-8

    本文转自:https://stackoverflow.com/questions/44754356/sql-create-xml-how-to-set-unicode-utf-8 I found a ...

  5. C# 金额转中文大写

    今天看到一个库是把金额转中文大写,看起来很容易,所以我就自己写了 创建的项目是创建一个 dot net core 的项目,实际上这个项目可以创建为 Stand 的. 首先创建类,这个类的构造传入一个 ...

  6. 你得学会并且学得会的Socket编程基础知识

    这一篇文章,我将图文并茂地介绍Socket编程的基础知识,我相信,如果你按照步骤做完实验,一定可以对Socket编程有更好地理解. 本文源代码,可以通过这里下载 http://files.cnblog ...

  7. PetaPoco源代码学习--1.使用的Attribute介绍

    新版本的PetaPoco使用特性进行注解的形式来代替的老版本的映射类的形式.新版本中使用的特性主要包括以下几种: 名称   用途 TableNameAttribute Class 指定POCO实体类对 ...

  8. [Redis] redis在centos下安装测试

    下载软件,使用命令wget xxx,参数:url 例如: wget http://download.redis.io/releases/redis-3.0.0.tar.gz 解压缩,使用命令tar,参 ...

  9. IDEA Tomcat Web项目修改了代码,重新部署页面没改变

    今天被IDEA坑的不浅直接说一下问题: 这是html页面不管我怎么修改重启服务器在浏览器中还是一点都不变化,甚至把一些内容都删了都没有变化,target可执行文件是最新的没问题,找了点资料发现是浏览器 ...

  10. 最短路(hdu2544)Dijkstra算法二

    最短路 Time Limit: 5000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Total Submis ...