JS框架有哪些，需要具体代码示例

随着前端开发的发展，JavaScript（简称JS）框架成为了开发者不可或缺的工具。它们可以提供强大的功能，简化开发流程，并提高开发效率。本文将介绍几个常用的JS框架，并提供具体的代码示例供读者参考。

React是Facebook开发的一个用于构建用户界面的JS框架。它使用了组件化的开发方式，使得开发者可以将复杂的UI拆分为可重用的组件，简化了代码管理和维护。以下是一个使用React构建一个简单的计数器组件的代码示例：

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开发的一个综合性JS框架。它提供了丰富的功能和工具，可以用于构建复杂的单页应用。以下是一个使用Angular构建一个简单的待办事项列表的代码示例：

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框架，也可以用于构建用户界面。它的设计理念是渐进式，可以逐步应用于项目中。以下是一个使用Vue构建一个简单的倒计时组件的代码示例：

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