AngularJS 和 Vue.JS区别

1. 背景：

AngularJS 由 Google 的前雇员 Misko Hevery 开发，并于 2009 年首次发布。它是一种基于 JavaScript 的前端框架，用于构建动态 Web 应用程序。AngularJS 的最新版本是 Angular 14。
Vue.JS 由中国开发者尤雨溪开发，并于 2014 年首次发布。它是一种轻量级的 JavaScript 前端框架，用于构建交互式 Web 应用程序。Vue.JS 的最新版本是 Vue 3。

2. 版本：

AngularJS 的最新版本是 Angular 14，而 Vue.JS 的最新版本是 Vue 3。

3. 应用场景：

AngularJS 适用于构建大型、复杂的 Web 应用程序，特别是需要与其他框架和库集成的项目。Vue.JS 则适用于构建中小型 Web 应用程序，特别是需要快速开发的项目。

4. 语法：

AngularJS 使用 HTML 语法进行模板渲染，而 Vue.JS 使用 HTML 模板语法进行渲染。

// AngularJS  
<div ng-app="myApp" ng-controller="MyCtrl">  
 <p>Hello, {{ name }}!</p>  
</div>
// Vue.JS  
<div id="app">  
 <p>Hello, {{ message }}!</p>  
</div>

5. 双向数据绑定：

AngularJS 和 Vue.JS 都支持双向数据绑定，但是实现方式不同。AngularJS 使用脏检查机制，而 Vue.JS 使用 ES5 的 getter 和 setter。

// AngularJS  
<input type="text" ng-model="name" />
// Vue.JS  
<input type="text" v-model="message" />

6. 指令：

AngularJS 和 Vue.JS 都支持指令，但是实现方式不同。AngularJS 的指令是基于 HTML 语法的，而 Vue.JS 的指令是基于 JavaScript 的。

// AngularJS  
<button ng-click="incrementCounter()">Click me</button>
// Vue.JS  
<button @click="incrementCounter()">Click me</button>

7. 组件：

AngularJS 和 Vue.JS 都支持组件，但是实现方式不同。AngularJS 的组件是基于 HTML 语法的，而 Vue.JS 的组件是基于 JavaScript 的。

// AngularJS  
<my-component></my-component>
// Vue.JS  
<div id="app">  
 <my-component></my-component>  
</div>

8. 性能：

Vue.JS 的性能比 AngularJS 好，因为 Vue.JS 不使用脏检查机制，而是使用基于依赖追踪的观察系统。

// AngularJS  
<div ng-app="myApp" ng-controller="MyCtrl">  
 <ul>  
   <li ng-repeat="item in items"></li>  
 </ul>  
</div>
// Vue.JS  
<div id="app">  
 <ul>  
   <li v-for="item in items"></li>  
 </ul>  
</div>

9. 优缺点：

AngularJS 的优点包括：

适用于构建大型、复杂的 Web 应用程序
具有广泛的文档和社区支持
拥有许多内置模块和指令，可以快速构建应用程序
AngularJS 的缺点包括：
学习曲线较陡峭
性能不如 Vue.JS
依赖注入的方式可能会导致代码的可读性较差
Vue.JS 的优点包括：
适用于构建中小型 Web 应用程序
语法简单易懂，学习曲线较平缓
性能优异，特别适合构建数据密集型应用程序
Vue.JS 的缺点包括：
社区规模相对较小
文档和资源相对较少
某些功能可能需要自行实现或使用第三方库

10. 案例分析：

假设我们要构建一个待办事项应用程序，用户可以添加、删除和查看待办事项。
以下是使用 AngularJS 构建待办事项应用程序的代码示例：

index.html

<!DOCTYPE html>  
<html>  
 <head>  
   <meta charset="UTF-8" />  
   <title>Todo App</title>  
   <script src="https://code.angularjs.org/1.6.9/angular.js"></script>  
   <link rel="stylesheet" href="style.css" />  
 </head>  
 <body>  
   <div ng-app="todoApp" ng-controller="TodoCtrl">  
     <h1>Todo List</h1>  
     <form ng-submit="addTodo()">  
       <input type="text" ng-model="newTodo" placeholder="Enter a new todo" />  
       <button type="submit">Add</button>  
     </form>  
     <ul>  
       <li ng-repeat="todo in todos" ng-click="removeTodo(todo.id)">{{ todo.text }}</li>  
     </ul>  
   </div>  
   <script src="app.js"></script>  
 </body>  
</html>

app.js

'use strict';
angular.module('todoApp', [])  
.controller('TodoCtrl', function($scope) {  
   $scope.newTodo = '';  
   $scope.todos = [];
   $scope.addTodo = function() {  
     if ($scope.newTodo.trim()) {  
       $scope.todos.push({ text: $scope.newTodo });  
       $scope.newTodo = '';  
     }  
   };
   $scope.removeTodo = function(id) {  
     for (var i = 0; i < $scope.todos.length; i++) {  
       if ($scope.todos[i].id === id) {  
         $scope.todos.splice(i, 1);  
         return;  
       }  
     }  
   };  
 });

style.css

body {  
 font-family: Arial, sans-serif;  
 max-width: 800px;  
 margin: 0 auto;  
 padding: 20px;  
}
form {  
 margin-bottom: 20px;  
}
input[type="text"] {  
 width: 100%;  
 padding: 10px;  
 font-size: 16px;  
 box-sizing: border-box;  
}
button[type="submit"] {  
 background-color: #4CAF50;  
 color: white;  
 padding: 10px 20px;  
 border: none;  
 border-radius: 5px;  
 cursor: pointer;  
}
button[type="submit"]:hover {  
 background-color: #45a049;  
}
ul {  
 list-style-type: none;  
 padding: 0;  
 margin: 0;  
}
li {  
 background-color: #f9f9f9;  
 padding: 10px;  
 margin-bottom: 5px;  
 border-radius: 5px;  
}
li:hover {  
 background-color: #fafafa;  
}

这个示例展示了一个简单的待办事项应用程序，用户可以添加、删除和查看待办事项。通过 AngularJS 框架，我们可以轻松地实现双向数据绑定、组件和指令等功能，从而简化开发过程并提高代码可维护性。

假设我们要构建一个待办事项应用程序，用户可以添加、删除和查看待办事项。

以下是使用 Vue.js 构建待办事项应用程序的代码示例：

main.js

import Vue from 'vue';  
import TodoList from './components/TodoList.vue';
Vue.config.productionTip = false;
new Vue({  
 el: '#app',  
 components: {  
   TodoList  
 }  
});

TodoList.vue

<template>  
 <div>  
   <h2>Todo List</h2>  
   <ul>  
     <li v-for="(todo, index) in todos" :key="index">  
       <input type="checkbox" :value="todo.id" v-model="todo.completed" />  
       <label>{{ todo.text }}</label>  
       <button @click="deleteTodo(todo.id)">Delete</button>  
     </li>  
   </ul>  
   <form @submit.prevent="addTodo">  
     <input type="text" v-model="newTodo" placeholder="Enter a new todo" />  
     <button type="submit">Add</button>  
   </form>  
 </div>  
</template>
<script>  
export default {  
 data() {  
   return {  
     newTodo: '',  
     todos: [  
       { id: 1, text: 'Buy milk', completed: false },  
       { id: 2, text: 'Walk the dog', completed: true },  
       { id: 3, text: 'Do laundry', completed: false }  
     ]  
   };  
 },  
 methods: {  
   addTodo() {  
     if (this.newTodo.trim()) {  
       this.todos.push({ text: this.newTodo, completed: false });  
       this.newTodo = '';  
     }  
   },  
   deleteTodo(id) {  
     const index = this.todos.findIndex((todo) => todo.id === id);  
     if (index!== -1) {  
       this.todos.splice(index, 1);  
     }  
   }  
 }  
};  
</script>
<style>  
body {  
 font-family: Arial, sans-serif;  
 max-width: 800px;  
 margin: 0 auto;  
 padding: 20px;  
}
form {  
 margin-bottom: 20px;  
}
input[type="text"] {  
 width: 100%;  
 padding: 10px;  
 font-size: 16px;  
 box-sizing: border-box;  
}
button[type="submit"] {  
 background-color: #4CAF50;  
 color: white;  
 padding: 10px 20px;  
 border: none;  
 border-radius: 5px;  
 cursor: pointer;  
}
button[type="submit"]:hover {  
 background-color: #45a049;  
}
ul {  
 list-style-type: none;  
 padding: 0;  
 margin: 0;  
}
li {  
 background-color: #f9f9f9;  
 padding: 10px;  
 margin-bottom: 5px;  
 border-radius: 5px;  
}
li:hover {  
 background-color: #fafafa;  
}
</style>