Vue与Angular的区别

Vue和Angular都是前端开发框架，它们之间还是有区别的，首先来看官方文档它们对的解释

Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

AngularJS 是一个 JavaScript 框架。它可通过 script标签添加到 HTML 页面。它通过 指令 扩展了HTML，且通过 表达式 绑定数据到 HTML。是一个 JavaScript 框架。它是一个以 JavaScript 编写的库。

接下来就是它们之间的区别了

一、Vue框架
作为一个跨平台的，高度进步的框架，Vue成为了许多需要创建单页应用程序的开发人员的首选。在用于开发Web应用程序的典型MVC体系结构中，Vue充当了View，这意味着它可以让开发者看到数据的显示部分
除此之外，vue还有以下几个优点：

1. 容易使用
   如果你一直在使用其它框架，那么你可以轻松使用Vue，因为Vue的核心库专注于 View 层，你可以轻松地将其与第三方库进行整合并与现有项目一起使用。

2. 轻便
   由于Vue主要关注于ViewModel 或双向数据绑定，因此Vue很轻便。Vue也具有十分基础的文档。Vue用做View层，意味着开发者可以将它用作页面中的亮点功能，比起全面的SPA，Vue提供了更好的选择。

3. 学习曲线很低
   熟悉HTML的开发人员会发现Vue的学习曲线很低，同时对于经验较少的开发人员和初学者来说，也能够快速地学习和理解Vue。

4. 双向绑定
   Vue提供了v-model指令（用于更新用户输入事件的数据），使得在表单输入和结构元素上实现双向绑定变得很容易。它可以选择正确的方式来更新输入类型相关的元素。

5. 虚拟DOM
   由于Vue是基于Snabbdom的轻量级虚拟DOM实现，因此Vue的性能有些许的提升。这是虚拟DOM的主要新功能之一，开发者可以直接进行更新。当你需要在实际的DOM 中进行更改时，只需执行一次这样的更新功能。

6. 基于HTML模板的语法
   Vue允许开发者直接将渲染的DOM绑定到底层的Vue实例数据上。这是一个很有用的功能，因为它可以让开发者扩展基本的HTML元素，来保存可复用的代码。

二、Angular：框架
Angular是一个功能齐全的框架，支持Model-View-Controller编程结构，非常适合构建动态的单页网络应用程序。
以下是Angular的部分最好的功能：

1. Model-View-ViewModel（MVVM）
   为了构建客户端Web应用程序，Angular将原始MVC软件设计模式背后的基本原理结合在一起。然而，Angular没有实现传统意义上的MVC，而是实现了MVVM即 Model-View-ViewModel模式。

2. 依赖注入
   Angular带有内置的依赖注入子系统功能，这使得应用程序易于开发和测试。依赖注入允许开发者通过请求来获得依赖关系，而不是搜索依赖关系。这对开发人员非常有帮助。

3. 测试
   在Angular中，可以单独对控制器和指令进行单元测试。Angular允许开发人员进行端到端和单元测试运行器设置，这意味着也可以从用户角度进行测试。

4. 跨浏览器兼容
   Angular的一个有趣功能是，框架中编写的应用程序在多个浏览器都能运行良好。Angular可以自动处理每个浏览器所需的代码。

5. 指令
   Angular的指令（用于渲染指令的DOM模板）可用于创建自定义的HTML标记。这些是DOM元素上的标记，因为开发者可以扩展指令词汇表并制作自己的指令，或将它们转换为可重用组件。

6. Deep Linking
   由于Angular主要用于制作单页应用程序，因此必须利用Deep Linking功能才能在同一页面上加载子模板。Deep Linking的目的是为了查看位置 URL 并安排它映射到页面的当前状态。
   Deep Linking功能通过查看页面状态并将用户带到特定内容，而不是从主页中遍历应用程序来设置URL。Deep Linking允许所有主要搜索引擎，可以轻松的搜索网络应用程序。

三
1.Vue的指令是v-前缀的 ，angular的指令是ng-，数据绑定的方式也是一样的两个{}(插值表达式)
2.Vue与Angular的数据挂载方式不同
（1）vue的数据挂载方式

 var vue = new Vue({
        el: '#app',
        data: {
            message: 0
        },
        methods: {
            clickChange: function () {
                this.message++
            }
        }
    })

（2）Angular的数据挂载方式

  var app = angular.module('myApp', []);
    app.controller('customersCtrl', function ($scope) {
        $scope.list = [];
        $scope.method = function () {
            console.log("angular");
        }
    })

3.数据绑定
Angular 使用双向绑定，
Vue 在不同组件间强制使用单向数据流。这使应用中的数据流更加清晰易懂。