VueJS和AngularJS的区别

在这篇文章中，我们将看到什么是AngularJS和VueJS，同时了解它们的不同特点，以及在插图的帮助下的基本用法。最后，我们将看到它们之间的相关区别。

AngularJS 是一个开源的前端结构框架，用于制作动态单页网络应用程序（SPA）。它由谷歌的开发人员维护。它适用于跨平台的移动开发和企业应用。它的功能，如动态绑定和依赖性注入，消除了我们必须写的代码的需要。它用指令来扩展HTML属性，而数据则与HTML绑定。

AngularJS的特点：

深度链接。它允许你在URL中对应用程序的情况进行编码，以便可以将其加入书签。
服务。它有许多内置服务。
过滤器。它在数据数组到达视图之前对其进行参数过滤。
架构。它有一个MVC（模型-视图-控制器）架构。

例子：这个例子通过实现指令、控制器等，说明了基本的Angular JS。

<!DOCTYPE html>
<html>
  
<head>
    <title>AngularJS Example</title>
    <script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
    </script>
</head>
  
<body>
    <center>
        <h1 style="color:green">
            GeeksforGeeks
        </h1>
        <h3>AngularJS Example</h3>
        <div ng-app="myApp"
            ng-controller="myCtrl"
            ng-style="gfgObj">
            <input type="text"
                ng-model="comName">
            <input type="text"
                ng-model="detail">
            <br> {{comName + " "+detail }}
        </div>
    </center>
    <script>
        var app = angular.module('myApp', []);
        app.controller('myCtrl', function(scope) {
            scope.comName = "GeeksforGeeks";
            scope.detail = "Learning Together!"
            scope.gfgObj = {
                "color": "green",
                "font-family": "sans-serif",
                "font-size": "25px"
            }
        });
    </script>
</body>
</html>

输出:

VueJS和AngularJS的区别

VueJS 是一个著名的JavaScript前端框架。它于2014年2月由Evan发布。在VueJS的协助下，网络UI开发可以越来越容易接受。这个框架可以用来构建一个单页面的应用程序。由于开发领域的许多挑战无法通过利用单一的库来处理，VueJS与不同的库是互通的，所以你可能很容易使用它。它被所有主要的浏览器所支持。

VueJS的特点：

组件。它们有助于创建可在HTML中重复使用的自定义元素。
过渡。在VueJS中提供了不同的方法，当HTML组件被包含或从DOM中排出时，可以对其应用过渡。
指令。VueJS有内置的指令，可以用来在前端执行不同的活动。例如v-else, v-show, v-on等。
架构。它有MVVM（模型-视图-视图模型）架构。
注意： VueJS是一个伟大的框架，它在AngularJS方面有很多改进，它擅长单页应用，也擅长小型应用，但VueJS和AngularJS之间存在着巨大的竞争。

例子：这个例子通过实现插值的概念，说明了VueJS的基本实现。

index.html:

<!DOCTYPE html>
<html>
<head>
    <script src=
"https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">
    </script>
</head>
<body>
    <div id='parent'>
        <h3>
            Welcome to the exciting world of {{name}}
        </h3>
        <script src='app.js'></script>
    </div>
</body>
</html>

app.js:

<script>
  const parent = new Vue({
      el : '#parent',
      data : {
  
          // The data that will be
          // interpolated in the DOM
          name : 'Vue.Js'
      }
  })
</script>

输出:

VueJS和AngularJS的区别

**AngularJS和VueJS之间的区别： **

S.No.	AngularJS	VueJS
1.	AngularJS是一个前端框架，可以利用任何后端编程语言，如PHP、Java等。	VueJS是严格的前端框架，只使用HTML、CSS和JavaScript。
2.	AngularJS是完全使用JavaScript设计的。	这个框架使用基于HTML的模板语法，同时使用模型和组件的概念等。
3.	这个框架不需要明确安装，相反，我们只需要像简单添加JavaScript文件那样添加它即可	这个框架使用命令行界面或CDN链接进行安装。
4.	Angular JS是一个开源的框架，用于支持实时网络应用的客户端。	Vue JS是一个开源的渐进式框架，通过简单的用户友好界面，最适合设计轻量级和单页的应用程序。
5.	在依赖关系方面，AngularJS需要导入所需的模块，以便开始工作。	与AngularJS不同，VueJS没有一个内置的功能。
6.	这个框架与AngularJS的落后版本不兼容，即在AngularJS中开发的项目，不能在Angular 2版本上运行。	VueJS很容易与VueJS的后退版本兼容。