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

This article introduces the relevant knowledge of "what are the characteristics of vue.js and angular.js". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

I. introduction of Vue and Angular

1 、 Vue

For vue we should be familiar with, it is about building a progressive framework for the user interface, unlike other heavyweight frameworks, it is a bottom-up incremental development design, and in the core library of vue only focus on the view layer, but also relatively easy to learn, but also convenient to integrate with other libraries or existing projects. On the other hand, for vue, it has the ability to drive complex single-page applications developed using single-file components and libraries supported by the Vue ecosystem.

The content includes:

Modularization: at present, the hottest way is to directly use the modularization of ES6 in the project and package and componentize the project with Webpack: create a single file with the suffix .vue of component, including template (html code), script (es6 code), style (css style), two-way data binding: the operation of the interface can reflect the data in real time. Data changes can be displayed in real-time to the interface, instructions (v-html v-bind v-model Vmurifgo vshow.), routing (vue-router), vuex data sharing, Ajax plug-ins (vue-resource,axios).

2 、 Angular

For Angular, it is not only a front-end framework for building a user interface, but also an application design framework and development platform, and can be used to create efficient, complex, exquisite single-page applications, not only Angular extends HTML through new properties and expressions, so it can achieve a set of framework, multiple platforms, mobile and desktop.

The content includes:

MVVM (Model) (View) (View-model), Module controller (Contoller) dependency injection:, bidirectional data binding: the operation of the interface can be reflected to the data in real time. Data changes can be displayed in real time to the interface, instruction (ng-click ng-bind ng-model ng-href ng-src ng-if/ng-show...), service Service ($compile $filter $interval $timeout $http...), routing (ng-Route native routing), ui-router (routing component), Ajax encapsulation ($http)

Second, the principle of two-way data binding between Vue and Angular

1. Angular.js: dirty value check

In angular.js, dirty value detection is used to compare whether the data has changed to decide whether to update the view, and the easiest way is to detect data changes through setInterval () regular polling, and angular only enters dirty value detection when the specified event is triggered, as follows: DOM event, such as user input text, click a button, and so on. (ng-click) XHR response event ($http), browser Location change event ($location), Timer event ($timeout, $interval), execute $digest () or $apply ()

2. Vue: data hijacking

For vue.js, it uses data hijacking combined with publisher-subscriber mode, and then uses Object.defineProperty () to hijack the setter and getter of each attribute to release messages to subscribers when the data changes, triggering the corresponding monitoring callback.

3. The code is demonstrated as follows:

(1) hello world output of vue.js and angular.js:

Vue module code:

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

Angular module code:

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

Summary: through the comparison between the two, we can see that the data format of json is used in vue to write dom and data, and this writing style is more dependent on the data coding format of js, which is easy to understand.

(2) Bidirectional data binding of vue and angular:

The bidirectional data binding code for vue is as follows:

{{message}}

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

The bidirectional data binding code for angular is as follows:

{{message}}

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

Summary: we can see in the code that vue is a lightweight framework, but it provides a lot of API, and it also includes some convenient instructions and attribute operations, and generally vue is the instruction use (v -) operator. Compared with the angular.js instruction use (ng-), vue.js also supports the shorthand of instructions: take events: the abbreviation of click is as follows: The shorthand for attributes is:.

(3) rendering list of vue and angular:

The rendering list code for vue is as follows:

{{name.first}} new Vue ({el:'# app', data: {names: [{first: 'summer', last:' 7310'}, {first: 'David', last:'666'}, {first:' Json', last:'888'}]}})

The rendering list code for angular is as follows:

{{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'}]})

In our opinion, the rendering of angular is similar to that of vue. The code is as follows:

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

(4) vue cycle:

The vue loop code is as follows:

{{item.title}}

3. Vue and Angular handle user input

Vue handles user input codes:

{{message}}

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

Angular handles user input codes:

{{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 (')}); and that's all for what are the characteristics of vue.js and angular.js. Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

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.