What are the differences between Angularjs and Vue? Angularjs vs. Vue details

This article mainly introduces the differences between Angularjs and Vuejs, as well as the details of Angularjs and vue.js alignment, which also contains many examples inside, making it easier for everyone to read. Let's look at this article together.

First, let's look at the difference between Angularjs and Vue:

1. Vuejs is simple and easy to learn, while the ANGULARJS is higher;

2. Vue focused on the view layer, the main focus is fast and convenient, and ANGULARJS function is more comprehensive, of course, the volume is also large, relatively no vue so convenient;

3. ANGULARJS instructions are ng-xxx, and vuejs instructions are v-xxx;

4. Angularjs all instructions and methods are bound on the $scope, and Vuejs is a new out of an instance, all the methods and instructions on this instance, a page can have multiple Vue instances, but the Angularjs object can only have one;

5. ANGULARJS is developed and maintained by Google, and Vuejs is maintained by the individual;

6. Vuejs is generally used for mobile development, while ANGULARJS is generally used in large projects

Now tell me more about Angularjs vs Vue:

Previous projects are all using ANGULARJS, (note here the main talk Angularjs 1) after the initial use of vue.js to make a simple comparison notes.

First of all, briefly describe the characteristics of each, then use a few small examples to illustrate. (To learn more about ANGULARJS, see the Topic.alibabacloud.comAngularJS Reference manual section)

Introduction of Angular:

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

2. Modular (module) controller (Contoller) Dependency Injection:

3. Two-way data binding: The interface operation can be reflected in real-time data, data changes can be displayed in real-time interface.

4. Instruction (Ng-click ng-model ng-href ng-src ng-if ...)

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

The implementation of bidirectional data binding uses the dirty value detection of the $scope variable, using $scope. $watch (View-to-model), $scope. $apply (Model-to-view) detection, the internal call is digest, of course, can also be called directly $scope.$ Digest a dirty check. It is worth noting that when data changes very frequently, dirty detection will consume a lot of browser performance, the official maximum detection dirty value is 2000 data.

Vue's introduction:

Vue.js Official website: is a set of progressive framework to build user interface. Unlike other heavyweight frameworks, Vue uses a design that is developed from bottom-up increments. Vue's core library focuses only on the view layer and is very easy to learn and easily integrates with other libraries or existing projects. On the other hand, Vue is fully capable of driving complex single-page applications with single-file components and libraries supported by the Vue ecosystem.

The goal of Vue.js is to implement the data binding and the combined view component of the response through the simplest possible API.

Modular, currently the hottest way is to use ES6 's modularity directly in the project, combining Webpack for project packaging

component, creating a single component suffix of. vue files, containing template (HTML code), script (ES6 code), style (CSS style)

Routing

Vue is very small, compressed min source code for 72.9kb,gzip only 25.11kb after compression, want to be 144kb than angular, you can use the library plug-in with the need for self-drive, similar to the routing plug-in (vue-router), Ajax plug-in (Vue-resource ) and other

Directly below the code

Well, first of all, Hello World.

Vue's Code:

<div id= "App" >  {{message}}</div> new Vue ({  el: ' #app ',  data: {    message: ' Hello vue.js! ')  }})

Angular's code:

<div ng-app= "MyApp" ng-controller= "Myctrl" > {{message}}</div>var app = Angular.module (' MyApp ', []); App.controller (' Myctrl ', function ($scope) {    $scope. Message = "Hello World";});

In comparison, Vue uses the JSON data format for DOM and data writing, writing style more rely on JS data encoding format, easy to understand.

Vue and angular processing user input

<div id= "App" >  <p>{{message}}</p>  <button v-on:click= "Reversemessage" >reverse Message</button></div>new Vue ({  el: ' #app ',  data: {    message: ' Hello vue.js! '  },  Methods: {    reversemessage:function () {      this.message = This.message.split ("). Reverse (). Join (')    }  }})

<div ng-app= "myApp" ng-controller= "Myctrl" > <p>{{message}}</p> <button ng-click= " Reversemessage () ">reverse Message</button></div>var app = Angular.module (' myApp ', []); App.controller (' Myctrl ', function ($scope) {    $scope. Message = "Hello world!";    $scope. reversemessage = function () {        this.message = This.message.split ("). Reverse (). Join (')    }});

Vue. Render List

<div id= "App" >  <ul>    <li v-for= "name in Names" >      {{name.first}}    </li>  </ul></div>new Vue ({  el: ' #app ',  data: {    names: [      {first: ' Summer ', Last: ' 7310 '},      { First: ' David ', Last: ' 666 '},      {first: ' Json ', Last: ' 888 '}    ]  })

ANGULARJS Render List

<div ng-app= "myApp" ng-controller= "Myctrl" >  <li ng-repeat= "name in Names" >{{name.first}}</li ></div>var app = Angular.module (' myApp ', []); App.controller (' Myctrl ', function ($scope) {    $scope. Names = [      {first: ' Summer ', Last: ' 7310 '},      {first: ' David ', Last: ' 666 '},      {first: ' Json ', Last: ' 888 '}    ]}) ;

Angular and Vue render almost the same.

All right, here's the article about the difference between Angularjs and Vue (recommended to Topic.alibabacloud.comAngularJS User's manual section). If you have questions, you can leave a comment below.