JS框架有哪些

JS框架有哪些，需要具體程式碼範例

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

1. React

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 (
    <div>
      <h1>Counter: {count}</h1>
      <button onClick={increment}>+</button>
      <button onClick={decrement}>-</button>
    </div>
  );
}

2. Angular

Angular是由Google開發的一個綜合性JS框架。它提供了豐富的功能和工具，可以用於建立複雜的單頁應用程式。以下是一個使用Angular建立一個簡單的待辦事項清單的程式碼範例：

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

@Component({
  selector: 'app-todo-list',
  template: `
    <h1>Todo List</h1>
    <ul>
      <li *ngFor="let todo of todos">{{ todo }}</li>
    </ul>
    <form (ngSubmit)="addTodo()">
      <input type="text" [(ngModel)]="newTodo" placeholder="New todo" required>
      <button type="submit">Add</button>
    </form>
  `,
})
export class TodoListComponent {
  todos: string[] = [];
  newTodo: string = '';

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

3. Vue

Vue是一個輕量級的JS框架，也可以用於建構使用者介面。它的設計理念是漸進式，可以逐步應用在專案中。以下是一個使用Vue建立一個簡單的倒數組件的程式碼範例：

<template>
  <div>
    <h1>Countdown: {{ count }}</h1>
    <button @click="startCountdown">Start</button>
    <button @click="stopCountdown">Stop</button>
  </div>
</template>

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

以上是幾個常用的JS框架，每個框架都有自己獨特的特點和用法。透過掌握這些框架，開發者能夠更有效率地開發出優質的前端應用。希望以上的程式碼範例能夠對讀者有所幫助。

以上是JS框架有哪些的詳細內容。更多資訊請關注PHP中文網其他相關文章！