What are the JS frameworks?

What are the JS frameworks? Specific code examples are needed

With the development of front-end development, JavaScript (JS for short) framework has become an indispensable tool for developers. They can provide powerful functionality, simplify the development process, and improve development efficiency. This article will introduce several commonly used JS frameworks and provide specific code examples for readers' reference.

1. React

React is a JS framework developed by Facebook for building user interfaces. It uses a component-based development approach, allowing developers to split complex UI into reusable components, simplifying code management and maintenance. The following is a code example that uses React to build a simple counter component:

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 is a comprehensive JS framework developed by Google. It provides a rich set of features and tools that can be used to build complex single-page applications. Here is a code example for building a simple to-do list using 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 is a lightweight JS framework that can also be used for building user interfaces. Its design concept is progressive and can be applied to projects step by step. The following is a code example that uses Vue to build a simple countdown component:

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

The above are several commonly used JS frameworks, each with its own unique characteristics and usage. By mastering these frameworks, developers can develop high-quality front-end applications more efficiently. I hope the above code examples will be helpful to readers.

The above is the detailed content of What are the JS frameworks?. For more information, please follow other related articles on the PHP Chinese website!