更新時(shí)間:2023-03-02 來(lái)源:黑馬程序員 瀏覽量:
當(dāng)前比較流行的前端框架有 Angular、React 和 Vue.js。
以下是這三個(gè)框架的簡(jiǎn)單介紹和用法演示:
Angular 是由 Google 開(kāi)發(fā)的一個(gè) TypeScript 框架,它是一個(gè)全面的框架,包含了很多功能,如組件化、模塊化、路由、依賴注入等等。
下面是一個(gè)使用 Angular 構(gòu)建的簡(jiǎn)單組件的示例:
import { Component } from '@angular/core'; @Component({ selector: 'my-app', template: ` <h1>Hello {{name}}!</h1> <button (click)="onClick()">Click me!</button> `, }) export class AppComponent { name = 'Angular'; onClick() { console.log('Button clicked'); } }
React 是一個(gè)由 Facebook 開(kāi)發(fā)的 JavaScript 框架,它是一個(gè)基于組件化的框架,用于構(gòu)建用戶界面。
以下是一個(gè)使用 React 構(gòu)建的簡(jiǎn)單組件的示例:
import React from 'react'; class App extends React.Component { constructor(props) { super(props); this.state = { name: 'React' }; this.handleClick = this.handleClick.bind(this); } handleClick() { console.log('Button clicked'); } render() { return ( <div> <h1>Hello {this.state.name}!</h1> <button onClick={this.handleClick}>Click me!</button> </div> ); } } export default App;
Vue.js 是一個(gè)由尤雨溪開(kāi)發(fā)的 JavaScript 框架,它也是一個(gè)基于組件化的框架,用于構(gòu)建用戶界面。
以下是一個(gè)使用 Vue.js 構(gòu)建的簡(jiǎn)單組件的示例:
<template> <div> <h1>Hello {{name}}!</h1> <button @click="onClick">Click me!</button> </div> </template> <script> export default { data() { return { name: 'Vue.js', }; }, methods: { onClick() { console.log('Button clicked'); }, }, }; </script>
以上是這三個(gè)框架的簡(jiǎn)單介紹和用法演示,具體實(shí)現(xiàn)細(xì)節(jié)和更多功能可以參考官方文檔。