web前端三大主流框架是什么?用法演示

　　当前比较流行的前端框架有 Angular、React 和 Vue.js。

　　以下是这三个框架的简单介绍和用法演示：

　　1.Angular

　　Angular 是由 Google 开发的一个 TypeScript 框架，它是一个全面的框架，包含了很多功能，如组件化、模块化、路由、依赖注入等等。

　　下面是一个使用 Angular 构建的简单组件的示例：

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
    <h1>Hello {{name}}!</h1>
    <button (click)="onClick()">Click me!</button>
  `,
})
export class AppComponent {
  name = 'Angular';
  onClick() {
    console.log('Button clicked');
  }
}

　　2.React

　　React 是一个由 Facebook 开发的 JavaScript 框架，它是一个基于组件化的框架，用于构建用户界面。

　　以下是一个使用 React 构建的简单组件的示例：

import React from 'react';

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      name: 'React'
    };
    this.handleClick = this.handleClick.bind(this);
  }
  handleClick() {
    console.log('Button clicked');
  }
  render() {
    return (
      <div>
        <h1>Hello {this.state.name}!</h1>
        <button onClick={this.handleClick}>Click me!</button>
      </div>
    );
  }
}

export default App;

　　3.Vue.js

　　Vue.js 是一个由尤雨溪开发的 JavaScript 框架，它也是一个基于组件化的框架，用于构建用户界面。

　　以下是一个使用 Vue.js 构建的简单组件的示例：

<template>
  <div>
    <h1>Hello {{name}}!</h1>
    <button @click="onClick">Click me!</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: 'Vue.js',
    };
  },
  methods: {
    onClick() {
      console.log('Button clicked');
    },
  },
};
</script>

　　以上是这三个框架的简单介绍和用法演示，具体实现细节和更多功能可以参考官方文档。