Shulou(Shulou.com)06/03 Report--

This article shows you the difference between angularjs and vuejs. The content is concise and easy to understand. It will definitely brighten your eyes. I hope you can get something through the detailed introduction of this article.

Differences: 1. Angularjs uses "dirty value detection" to compare whether the data has changed to achieve two-way data binding, while vue uses "data hijacking" combined with "publisher-subscriber mode" to achieve two-way data binding. 2. The vue instruction uses the "v -" operator, and the angularjs instruction uses "ng-".

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

Use Angularjs and Vue.js to compare

Previous projects used Angularjs, and (note that Angularjs 1 is the main topic here) make a simple comparison note after the initial use of Vue.js.

First of all, briefly talk about their respective characteristics in theory, and then use a few small examples to illustrate.

Angular

1Magna MVVM (Model) (View) (View-model)

2, modular (Module) controller (Contoller) dependency injection:

3, two-way data binding: the operation of the interface can be reflected to the data in real time, and the changes of the data can be displayed to the interface in real time.

4, instruction (ng-click ng-bind ng-model ng-href ng-src ng-if/ng-show...)

5, Service Service ($compile $filter $interval $timeout $http...)

6, routing (ng-Route native routing), ui-router (routing component)

7Jing Ajax package ($http)

The implementation of bidirectional data binding uses dirty value detection of $scope variable, using $scope.$watch (view to model), $scope.$apply (model to view) detection, internal calls are digest, of course, you can also directly call $scope.$digest for dirty checking. It is worth noting that when the data changes frequently, dirty detection will consume a lot of browser performance, and the official maximum dirty detection value is 2000 data.

Vue

Vue.js official website: a progressive framework for building a user interface. Unlike other heavyweight frameworks, Vue uses a bottom-up incremental development design. Vue's core library only focuses on the view layer and is very easy to learn and integrate with other libraries or existing projects. On the other hand, Vue is fully capable of driving complex single-page applications developed using single-file components and libraries supported by the Vue ecosystem.

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

(1) Modularization. At present, the hottest way is to use the modularization of ES6 directly in the project, and to package the project with Webpack.

(2) componentization, creating a single file with the suffix .vue of component, including template (html code), script (es6 code), style (css style)

(3) two-way data binding: the operation of the interface can reflect the data in real time, and the changes of the data can be displayed in the interface in real time.

(4) instruction (v-html v-bind v-model VIFG VFUR show.)

(5) routing (vue-router)

(6) vuex data sharing

(7) Ajax plug-in (vue-resource,axios)

Vue is very small. After compression, the source code of min is 72.9 kb. After gzip compression, only 25.11kb is available. If you want to compare Angular to 144kb, you can use library plug-ins such as routing plug-in (Vue-router), Ajax plug-in (vue-resource,axios), etc.

Principle of bidirectional data binding between Vue and Angular #

Angular.js: dirty value check

Angular.js determines whether to update the view by comparing the data with dirty value detection. The easiest way is to detect data changes through regular polling of setInterval (). Of course, Google will not do this. Low,angular will only enter dirty value detection when the specified event is triggered, roughly as follows:

DOM events, such as user typing text, clicking buttons, and so on. (ng-click)

XHR response event ($http)

Browser Location change event ($location)

Timer event ($timeout, $interval)

Execute $digest () or $apply ()

Vue: data hijacking

Vue.js uses data hijacking combined with publisher-subscriber mode to hijack the setter,getter of each attribute through Object.defineProperty (), publish a message to the subscriber when the data changes, and trigger the corresponding monitoring callback. Https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/definePropertydefineProperty

Let's go straight to the code.

First of all, of course it's Hello World.

Vue {{message}} new Vue ({el:'# app', data: {message: 'Hello Vue.jskeeper'}}) Angular {{message}} var app = angular.module ('myApp', []); app.controller (' myCtrl', function ($scope) {$scope.message = "Hello world";})

In comparison, vue uses the data format of json to write dom and data, and the writing style is more dependent on the data coding format of js, which is easy to understand.

Bidirectional data binding of vue

{{message}}

New Vue ({el:'# app', data: {message: 'Hello Vue.jsgiving'}})

Bidirectional data binding of Angular

{{message}}

Var app = angular.module ('myApp', []); app.controller (' myCtrl', function ($scope) {$scope.message = "Hello world!";})

Although vue is a lightweight framework, it does provide a lot of API, including some convenient instructions and attribute operations, generally vue is the instruction use (v -) operator, compared to the angularjs instruction use (ng-). Vue.js also supports the shorthand of instructions:

(1) event click

Abbreviated method:

(2) attribute

Abbreviated method:

Vue. Render list {{name.first}} new Vue ({el:'# app', data: {names: [{first: 'summer', last:' 7310'}, {first: 'David', last:'666'}, {first:' Json', last:'888'}]}}) Angularjs render list {{name.first}} var app = angular.module ('myApp' []) App.controller ('myCtrl', function ($scope) {$scope.names = [{first:' summer', last:' 7310'}, {first: 'David', last:'666'}, {first:' Json', last:'888'}]}); vue loop {{item.title}} angular is similar to vue rendering

{{news.title}} {{news.createTime}}

Vue and Angular handle user input

{{message}}

Reverse Messagenew Vue ({el:'# app', data: {message: 'Hello Vue.jskeeper'}, methods: {reverseMessage: function () {this.message = this.message.split (''). Reverse (). Join (')})

{{message}}

Reverse Messagevar app = angular.module ('myApp', []); app.controller (' myCtrl', function ($scope) {$scope.message = "Hello world!"; $scope.reverseMessage = function () {this.message = this.message.split ('). Reverse (). Join (')}). What is the difference between angularjs and vuejs? have you learned any knowledge or skills? If you want to learn more skills or enrich your knowledge reserve, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.