前端框架
不仅仅局限于Vue，React，Angular的了解
在前端框架中， 主要用以下几个框架或者库，不需要追求框架和库的概念，这只是英语翻译到汉语的时候的歧义，如果非要区分的话，这里可以说一下，Angular是框架，像Vue，React等等都是库。
Angular通常被视为一个完整的MVC（Model-View-Controller）框架，而Vue和React则更多地被看作是用于构建用户界面的库，尽管它们各自的生态系统和功能已经非常丰富，有时也会被称作“框架”。
除了这三个之外，还有一些其他的前端技术和工具也很受欢迎：
- Svelte - Svelte是一个新兴的前端框架，它在编译时将组件转换为高效的JavaScript代码，从而提供了接近原生应用的性能体验。
- Ember.js - Ember.js是一个成熟的框架，强调约定优于配置的原则，提供了一套丰富的特性来帮助开发者构建复杂的单页应用。
- Preact - Preact是一个轻量级的替代方案，兼容React API，但在体积上更小，适合需要快速加载的应用场景。
- Lithium - 类似于Preact，Lithium也是一个轻量级的React替代品，它的目标是提供更快的渲染速度。
- jQuery - 尽管现在不如以前流行，但jQuery仍然是一个非常有用的库，尤其是在处理DOM操作时。
- Backbone.js - 这是一个较早的库，提供MVC架构支持，虽然不如上述的一些选项流行，但在一些特定场景下仍然有用。
- Polymer - 这是一个基于Web Components标准的框架，允许开发者创建可重用的HTML元素。
不管是哪种，除了Jquery之外，全部都是总归都是MVVM类似的框架，所以只需要掌握Vue或者React就能了解全部，并且这些每个框架都有各自的标识，所以在Web逆向时候一下子就能看明白是用的哪种框架。
Vue
Vue有两个版本，分别是Vue2和Vue3，其中Vue2的写法学会即刻，Vue3和React基本一致，后面会给出来Vue3的一个学习文章。
Vue2基本用法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue.js Example</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
</head>
<body>
<div id="app">
{{ message }}
<button v-on:click="reverseMessage">Reverse Message</button>
</div>
<script>
new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
},
methods: {
reverseMessage: function () {
this.message = this.message.split('').reverse().join('');
}
}
});
</script>
</body>
</html>
React
React基本用法
npx create-react-app my-app
cd my-app
npm start
import React from 'react';
import ReactDOM from 'react-dom';
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
const element = <Welcome name="Sara" />;
ReactDOM.render(
element,
document.getElementById('root')
);
Angular
Angular框架比较特殊，这里主要说明一下Angular有2个版本，一个版本是Angular.js 1.x，另一个版本是Angular2+，3+等等，不管多少版本，只要大于2那么可以归为一类Angular，在Web逆向中，遇到Angular2往后的版本的几率跟大海里面捞针一样，所以如果不是为了专门学它写代码，可以了解即可。但是遇到Angular.js1.x的可能非常大，同时Angular还会和那些市面上的混淆加密经常用在一起，这些项目基本都是那些老公司喜欢干的事情。
Angular1.x基本用法
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.9/angular.min.js"></script>
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.9/angular.min.js"></script>
</head>
<body>
<div ng-controller="MyCtrl">
{{ greeting }}
<button ng-click="reverseGreeting()">Reverse Greeting</button>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('MyCtrl', function($scope) {
$scope.greeting = "Hello AngularJS!";
$scope.reverseGreeting = function() {
$scope.greeting = $scope.greeting.split('').reverse().join('');
};
});
</script>
</body>
</html>
Angular2往后的基本用法
Angular 2+ (Angular 2 及后续版本) 是一个完全重写的框架，使用 TypeScript 构建。
npm install -g @angular/cli
ng new my-app
cd my-app
ng serve
// app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: `
<h1>{{ greeting }}</h1>
<button (click)="reverseGreeting()">Reverse Greeting</button>
`,
styleUrls: ['./app.component.css']
})
export class AppComponent {
greeting = 'Hello Angular 2+!';
reverseGreeting() {
this.greeting = this.greeting.split('').reverse().join('');
}
}
Angular 2+ 和 Angular 1.x 之间存在较大的差异，Angular 2+ 更加现代化，采用了 TypeScript 和组件化的设计思路。在实际工作中，Angular 1.x 通常用于维护遗留系统，而 Angular 2+ 则用于新项目的开发。