ToB企服应用市场:ToB评测及商务社交产业平台

标题: 前端三大主流框架：React、Vue、Angular [打印本页]
作者: 络腮胡菲菲    时间: 2024-6-13 03:39
标题: 前端三大主流框架：React、Vue、Angular
一、React、Vue、Angular简介

前端三大主流框架分别是Angular、React和Vue。以下是这三个框架的具体概述：



二、React初始化案例

React具体介绍
React是一个用于构建用户界面的JavaScript库，它开端于Facebook的内部项目。React的出现是因为Facebook对市场上所有JavaScript MVC框架都不满意，决定自行开发一套，用于架设Instagram的网站，并于2013年5月开源。React主要用于构建UI，可以在React里传递多种类型的参数，如声明代码，帮助开发者渲染出UI，也可以是静态的HTML DOM元素，也可以传递动态变量，乃至是可交互的应用组件。
React的特点包括：
React案例代码
这是一个简朴的React组件示例，用于显示“Hello, World!”文本。
  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  4. class HelloWorld extends React.Component {
  5.   render() {
  6.     return <h1>Hello, World!</h1>;
  7.   }
  8. }
  10. ReactDOM.render(<HelloWorld />, document.getElementById('root'));
复制代码
这段代码通过React的ReactDOM.render方法将<HelloWorld />组件渲染到<div id="root"></div>元素中。组件的render方法返回一个包罗<h1>标签的JSX表达式。
这个示例展示了如何在React组件中使用状态和属性（state and props）。
  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  4. class Counter extends React.Component {
  5.   constructor(props) {
  6.     super(props);
  7.     this.state = { count: 0 };
  8.   }
  10.   increment() {
  11.     this.setState({ count: this.state.count + 1 });
  12.   }
  14.   render() {
  15.     return (
  16.       <div>
  17.         <p>Count: {this.state.count}</p>
  18.         <button onClick={() => this.increment()}>Increment</button>
  19.       </div>
  20.     );
  21.   }
  22. }
  24. ReactDOM.render(<Counter />, document.getElementById('root'));
复制代码
在这个示例中，我们创建了一个名为Counter的React组件。该组件具有一个状态count，并通过increment方法增加计数。在组件的render方法中，我们显示当前计数并提供一个按钮来增加计数。当用户点击按钮时，会调用increment方法并更新状态，从而触发组件的重新渲染并显示更新后的计数。
三、Vue初始化案例

Vue.js 具体介绍
Vue.js 是一款构建用户界面的渐进式框架。与其他大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的焦点库只关注视图层，不但易于上手，还便于与第三方库或已有项目整合。另一方面，当与当代化的工具链以及各种支持类库结合使用时，Vue 也能为复杂的单页应用（SPA）提供驱动。
Vue.js 的主要特点包括：
Vue.js 案例代码
以下是一个简朴的 Vue.js 示例，它展示了如何使用 Vue 创建一个计数器：
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Vue.js Counter Example</title>
  7.     <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
  8. </head>
  9. <body>
  11. <div id="app">
  12.     <p>{{ message }}</p>
  13.     <button @click="increment">Increment</button>
  14.     <p>Count: {{ count }}</p>
  15. </div>
  17. <script>
  18. new Vue({
  19.     el: '#app',
  20.     data: {
  21.         message: 'Hello Vue!',
  22.         count: 0
  23.     },
  24.     methods: {
  25.         increment: function() {
  26.             this.count++;
  27.         }
  28.     }
  29. });
  30. </script>
  32. </body>
  33. </html>
复制代码
在这个示例中，我们创建了一个新的 Vue 实例，并将其挂载到 id 为 app 的元素上。在 Vue 实例的 data 对象中，我们定义了 message 和 count 两个响应式数据属性。我们还定义了一个名为 increment 的方法，该方法会在每次点击按钮时被调用，并使 count 的值递增。在模板中，我们使用双大括号插值来显示 message 和 count 的值，并使用 @click 指令来监听按钮的点击变乱。
四、Angular初始化案例

Angular 具体介绍
Angular 是一个由 Google 开发和维护的开源前端框架，用于构建单页应用（SPA）和跨平台应用。Angular 提供了一个布局化的开发框架，它整合了多种技术，包括 TypeScript、HTML、CSS 和其他库，以简化应用程序的开发过程。Angular 强调组件化、模块化、依赖注入和响应式编程等焦点概念。
Angular 的主要特点包括：
Angular 案例代码
以下是一个简朴的 Angular 示例，它展示了如何创建一个计数器组件：
起首，你必要确保你的项目已经通过 Angular CLI 创建并设置好了。假如你还没有创建项目，可以使用以下下令创建一个新的 Angular 项目：
  1. ng new my-angular-app
  2. cd my-angular-app
复制代码
然后，你可以创建一个新的计数器组件：
  1. ng generate component counter
复制代码
接下来，编辑 counter 组件的 TypeScript 文件（counter.component.ts）和 HTML 模板文件（counter.component.html）。
counter.component.ts:
  1. import { Component } from '@angular/core';
  3. @Component({
  4.   selector: 'app-counter',
  5.   templateUrl: './counter.component.html',
  6.   styleUrls: ['./counter.component.css']
  7. })
  8. export class CounterComponent {
  9.   count = 0;
  11.   increment() {
  12.     this.count++;
  13.   }
  15.   decrement() {
  16.     this.count--;
  17.   }
  18. }
复制代码
counter.component.html:
  1. <p>Count: {{ count }}</p>
  2. <button (click)="increment()">Increment</button>
  3. <button (click)="decrement()">Decrement</button>
复制代码
在 app.module.ts 中，确保你已经将 CounterComponent 添加到 declarations 数组中：
  1. import { NgModule } from '@angular/core';
  2. import { BrowserModule } from '@angular/platform-browser';
  3. import { AppComponent } from './app.component';
  4. import { CounterComponent } from './counter/counter.component';
  6. @NgModule({
  7.   declarations: [
  8.     AppComponent,
  9.     CounterComponent
  10.   ],
  11.   imports: [
  12.     BrowserModule
  13.   ],
  14.   providers: [],
  15.   bootstrap: [AppComponent]
  16. })
  17. export class AppModule { }
复制代码
末了，在 app.component.html 中使用 app-counter 选择器来包罗你的计数器组件：
  1. <app-counter></app-counter>
复制代码
现在，当你运行你的 Angular 应用时（比方，使用 ng serve 下令），你应该能在浏览器中看到一个计数器，此中包罗两个按钮，一个用于增加计数，另一个用于淘汰计数。
五、干系链接


免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。



欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/) Powered by Discuz! X3.4