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

This article mainly introduces "what is the difference between vuejs and angularjs". In daily operation, I believe many people have doubts about the difference between vuejs and angularjs. The editor consulted all kinds of materials and sorted out simple and easy-to-use methods of operation. I hope it will be helpful to answer the questions of "what is the difference between vuejs and angularjs?" Next, please follow the editor to study!

Differences: 1, angularjs is difficult to use, while vuejs is easy to learn; 2, the instruction of angular is "ng-xxx", while vue is "v-xxx"; 3. All instructions and methods of angular are bound to $scope, while all methods and instructions of vue are bound to the vue instance.

The operating environment of this tutorial: windows7 system, vue2.9.6 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}}

Bidirectional data binding of 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!";})

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 (')}})

Summary: the difference between angularjs and vuejs

1. AngularJS is difficult to use, but vueJS is easy to learn.

2. AngularJS's instructions are all ng-xxx, while vueJS's instructions are all v-xxx

3. All instructions and methods of angularJS are bound to $scope, and vueJS is an instance of new, and all methods and instructions are on this instance. There can be multiple vue instances on a page, but there can only be one angularJS object.

4. AngularJS is developed and maintained by google, and vueJS is maintained by individuals

5. VueJS is generally used for mobile development, while angularJS is generally used for large-scale projects.

At this point, the study of "what is the difference between vuejs and angularjs" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

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.