Phản ứng so với góc cạnh so với Vue.js [Infographic]


Hoàng Huy Phong
1 năm trước
Hữu ích 6 Chia sẻ Viết bình luận 0
Đã xem 3616

Mặc dù Angular có thể được sử dụng để xây dựng các thành phần, nó cũng đi kèm với các công cụ khác có thể được sử dụng để xây dựng một ứng dụng web hoàn chỉnh. Nhờ có Angular, các nhà phát triển có thể xây dựng các ứng dụng trang đơn. Không giống như Angular, React là một thư viện JavaScript, không phải là một khung công tác. React được sử dụng để xây dựng các yếu tố UI có thể tái sử dụng. Vue là một khung tương tự như Angular. Tuy nhiên, nó không đi kèm với tất cả các chức năng của nó làm cho nó nhẹ. Vue có thể được sử dụng để xây dựng các ứng dụng điều khiển thành phần hoàn chỉnh.

Cài đặt

Góc

Để cài đặt Angular, hãy làm như sau:

git clone https://github.com/angular/quickstart.git quickstart
cd quickstart
npm install
npm start


Để cài đặt Angular CLI (Giao diện dòng lệnh), sử dụng lệnh bên dưới:

npm install -g @angular/cli


Phản ứng

React có thể được cài đặt bằng lệnh NPM bên dưới:

npm install react --save


Để cài đặt React CLI, bạn có thể sử dụng Ứng dụng Tạo-Phản ứng như được thấy dưới đây:

npm install -g create-react-app

Vue

Vue có thể được cài đặt bằng lệnh NPM bên dưới:

npm install vue


Vue CLI có thể được cài đặt bằng lệnh bên dưới:

npm install -g @vue/cli


Mã mẫu

Góc

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';
if (environment.production) {
enableProdMode();
}
const bootstrapPromise =  platformBrowserDynamic().bootstrapModule(AppModule);
// Logging bootstrap information
bootstrapPromise.then(success => console.log(`Bootstrap success`))
.catch(err => console.error(err));


Đoạn mã nhận được từ đây .

Phản ứng

import * as React from "react";
import { Component } from 'react';
import './App.css';
import * as logo from './logo.svg';
class App extends Component {
           render() {
            return (
            <div className="App">
                        <div className="App-header">
                       <img src={logo} className="App-logo" alt="logo" />
                      <h2>Welcome to React!</h2>
                      </div>
                      <p className="App-intro">
                     To get started, edit
                      <code>src/App.js</code>
                       and save to reload.
                      </p>
          </div>
          );
            }
}

export default App; 


Đoạn mã nhận được từ đây .

Vue

new Vue({
el: '#editor',
data: {
input: '# hello'
  },
  computed: {
   compiledMarkdown: function () {
   return marked(this.input, { sanitize: true })
  }
},
  methods: {
  update: _.debounce(function (e) {
    this.input = e.target.value
   }, 300)
 }
})


Đoạn mã nhận được từ  đây

xu hướng Google

Lãi suất trên toàn thế giới theo thời gian.

Mỗi khung và thư viện có ưu và nhược điểm riêng. Vì vậy, trường hợp là chọn công cụ phần mềm phù hợp cho một sản phẩm cụ thể.

Hữu ích 6 Chia sẻ Viết bình luận 0
Đã xem 3616