Home > Web Front-end > Front-end Q&A > What is the difference between angular and vue

What is the difference between angular and vue

青灯夜游
Release: 2022-03-07 14:43:54
Original
23504 people have browsed it

Difference: 1. Vue takes up less space, while angular is larger; 2. Vue is more flexible than Angular and can organize the application code of the project according to different needs; 3. Vue is simple and easy to learn, while angular is more difficult to get started with High; 4. The angular command is "ng-xxx" and the vue command is "v-xxx".

What is the difference between angular and vue

The operating environment of this tutorial: windows7 system, vue2.9.6&&angular6 version, DELL G3 computer.

Introduction to Angular

Angular is a JavaScript framework originally developed by Misko Hevery and Adam Abrons in 2009 and later became a Google project.

Angular makes up for the shortcomings of HTML in building applications. It expands the HTML vocabulary in web applications by using identifier (directives) structures, allowing developers to use HTML to declare dynamic content, thereby making the Web Development and testing work becomes easier.

Features of angularjs:

1. Two-way binding of data: The data of the view layer and the data of the model layer are two-way bound, and one of them changes. , the other side will change accordingly, without you having to write any code!

2. Code modularization, the code of each module has its own scope, model, controller, etc. independently.

3. Powerful directives can encapsulate many functions into HTML tags, attributes or comments, etc., which greatly beautifies the structure of HTML and enhances readability.

4. Dependency injection, giving the design pattern of this back-end language to the front-end code, which means that the front-end code can improve reusability and flexibility. Future models may place a large number of operations on the client. The server only provides data sources and other operations that the client cannot complete.

5. Test-driven development, angularjs has this as its goal from the beginning. Applications developed using angular can easily perform unit testing and end-to-end testing, which solves the problem that traditional js code is difficult to test and maintain. Defects.

Introduction to vue

Vue (pronounced /vjuː/, similar to view) is a progressive JavaScript framework for building user interfaces. Unlike other large frameworks, Vue is designed to be applied layer by layer from the bottom up. Vue's core library only focuses on the view layer, which is not only easy to get started, but also easy to integrate with third-party libraries or existing projects. On the other hand, when combined with a modern tool chain and various supporting libraries, Vue is fully capable of providing drivers for complex single-page applications (SPA).

The goal of Vue.js is to enable responsive data binding and composed view components through the simplest possible API.

Vue.js itself is not a comprehensive framework - it only focuses on the view layer. Therefore it is very easy to learn and very easy to integrate with other libraries or existing projects. On the other hand, Vue.js can also power complex single-page applications when used with related tools and support libraries.

Features of Vuejs:

1. Lightweight framework

2. Two-way data binding

3. Instructions

4. Modularization. Currently, the hottest way is to directly use ES6 modularity in the project and combine it with Webpack for project packaging.

5. Componentization, create a single component file with the suffix .vue, including template (html code), script (es6 code), style (css style).

The difference between angular and vue

1. Volume and performance

vue takes up more space Small, for example, a Vue project that contains Vuex Vue Router (30kB after gzip) is still much smaller than the default project size (~65KB) generated by angular-cli.

In terms of rendering performance, both frameworks are very fast and there is almost no difference in performance.

2. Development efficiency

All provide their own scaffolding tools to help improve the entire process from development to construction and packaging. In addition, they can all be written based on component development. Reusable components reduce repetitive work. However, angular relies on the advantage that Typescript itself is more engineering than JavaScript. When they are all developed by a team, angular will have more advantages.

3. Flexibility

Vue is more flexible than Angular and can organize the project's application code according to different needs. For example, you can even directly reference vue in HTML like you reference jquery, and then just use it as a front-end template engine.

4. Maintainability

The maintainability I understand includes two levels, one is the readability of the code, and the other is the reconfigurability. Also because the support for TS (which can provide static type checking) is not comprehensive enough, vue has some shortcomings at these two levels. The author of vue himself also admits that vue is still insufficient in TS support and will be improved in version 3.0.

5. High learning cost

Vue is easy to learn, but angular is more difficult to get started.

AngularJS has a high learning cost, such as the addition of the Dependency Injection feature, while the APIs provided by Vue.js itself are relatively simple and intuitive.

6. Instructions

angular’s ​​instructions are all ng-xxx, while vueJS’s instructions are all v-xxx.

(Learning video sharing: vuejs tutorial, web front-end)

The above is the detailed content of What is the difference between angular and vue. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template