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 (
<div>
<h1>Counter: {count}</h1>
<button onClick={increment}>+</button>
<button onClick={decrement}>-</button>
</div>
);
}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 = '';
}
}
}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中文網其他相關文章！
