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

　　當(dāng)前比較流行的前端框架有 Angular、React 和 Vue.js。

　　以下是這三個框架的簡單介紹和用法演示：

　　1.Angular

　　Angular 是由 Google 開發(fā)的一個 TypeScript 框架，它是一個全面的框架，包含了很多功能，如組件化、模塊化、路由、依賴注入等等。

　　下面是一個使用 Angular 構(gòu)建的簡單組件的示例：

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 開發(fā)的 JavaScript 框架，它是一個基于組件化的框架，用于構(gòu)建用戶界面。

　　以下是一個使用 React 構(gòu)建的簡單組件的示例：

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 是一個由尤雨溪開發(fā)的 JavaScript 框架，它也是一個基于組件化的框架，用于構(gòu)建用戶界面。

　　以下是一個使用 Vue.js 構(gòu)建的簡單組件的示例：

<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>

　　以上是這三個框架的簡單介紹和用法演示，具體實現(xiàn)細節(jié)和更多功能可以參考官方文檔。