JS框架有哪些，需要具體代碼示例

隨著前端開發(fā)的發(fā)展，JavaScript（簡稱JS）框架成為了開發(fā)者不可或缺的工具。它們可以提供強大的功能，簡化開發(fā)流程，并提高開發(fā)效率。本文將介紹幾個常用的JS框架，并提供具體的代碼示例供讀者參考。

React是Facebook開發(fā)的一個用于構(gòu)建用戶界面的JS框架。它使用了組件化的開發(fā)方式，使得開發(fā)者可以將復(fù)雜的UI拆分為可重用的組件，簡化了代碼管理和維護。以下是一個使用React構(gòu)建一個簡單的計數(shù)器組件的代碼示例：

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  const increment = () => {
    setCount(count + 1);
  };

  const decrement = () => {
    setCount(count - 1);
  };

  return (
    
      Counter: {count}
      +
      -
    
  );
}

Angular

Angular是由Google開發(fā)的一個綜合性JS框架。它提供了豐富的功能和工具，可以用于構(gòu)建復(fù)雜的單頁應(yīng)用。以下是一個使用Angular構(gòu)建一個簡單的待辦事項列表的代碼示例：

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

@Component({
  selector: 'app-todo-list',
  template: `
    Todo List
    
      
{{ todo }}
    
    
      
      Add
    
  `,
})
export class TodoListComponent {
  todos: string[] = [];
  newTodo: string = '';

  addTodo() {
    if (this.newTodo) {
      this.todos.push(this.newTodo);
      this.newTodo = '';
    }
  }
}

Vue

Vue是一個輕量級的JS框架，也可以用于構(gòu)建用戶界面。它的設(shè)計理念是漸進式，可以逐步應(yīng)用于項目中。以下是一個使用Vue構(gòu)建一個簡單的倒計時組件的代碼示例：

  
    Countdown: {{ count }}
    Start
    Stop
  



export default {
  data() {
    return {
      count: 10
    };
  },
  methods: {
    startCountdown() {
      let interval = setInterval(() => {
        this.count--;
        if (this.count === 0) {
          clearInterval(interval);
        }
      }, 1000);
    },
    stopCountdown() {
      this.count = 0;
    }
  }
};