Home > Article > Web Front-end > What are the differences between angularjs and Vue? Comparison details between angularjs and Vue
This article mainly introduces the difference between angularjs and vuejs, as well as the details of the alignment of angularjs and vue.js. It also contains many examples to make it easier for everyone to read. Let us read this article together.
First of all, let’s take a look at the difference between angularjs and Vue:
Now let’s talk about the comparison details between angularjs and Vue:
The previous projects all used Angularjs, (please note that this article mainly talks about Angularjs 1) After initially using Vue. js and make a short comparison note. First of all, let’s briefly talk about their respective characteristics in theory, and then use a few small examples to illustrate them. (If you want to know more about angularjs, go to the PHP Chinese websiteAngularJS Reference Manual column to watch)
Introduction to Angular:
1.MVVM (Model) (View) (View-model) 2. Module (Module) Controller (Contoller) dependency injection: 3. Two-way data binding: interface Operations can be reflected in the data in real time, and data changes can be displayed in the interface in real time. 4.Instruction(ng-click ng-model ng-href ng-src ng-if...)5.Service($compile $filter $interval $timeout $http ...)The implementation of two-way data binding uses dirty value detection of $scope variables, using $scope.$watch (view to model), $scope.$apply (model to view) detection , all internal calls are digest. Of course, $scope.$digest can also be called directly for dirty checking. It is worth noting that when data changes very frequently, dirty detection will consume a lot of browser performance. The official maximum dirty detection value is 2000 pieces of data.Introduction to Vue:
vue.js official website: It is a progressive framework for building user interfaces. Unlike other heavyweight frameworks, Vue adopts 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. Vue, on the other hand, is fully capable of powering complex single-page applications developed with single-file components and libraries supported by the Vue ecosystem. The goal of Vue.js is to enable responsive data binding and composed view components through the simplest possible API. Modularization, the hottest way at present is to directly use ES6 modularization in the project, combined with Webpack for project packaging Componentization, create a single component file with the suffix .vue, including template (html code), script (es6 code), style (css style) routing, vue is very small, the min source code is 72.9kb after compression, and only 25.11kb after gzip compression. Compared with Angular, which is 144kb, you can use it by yourself with the required library plug-ins, such as routing plug-ins (Vue-router), Ajax plug-ins (vue-resource), etc. The code is directly belowFirst of all, of course It’s Hello Worldvue’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 The json data format is used to write dom and data. The writing style is more based on the js data encoding format, which is easy to understand.
vue and Angular handle 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.Rendering 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 rendering 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' } ] });The rendering of angular and vue is similar. Okay, that’s it for this article about the differences and comparisons between angularjs and Vue (recommended to study in the
AngularJS User Manual column of the PHP Chinese website). If you have any questions, you can leave a message below.
【Editor’s Recommendation】What are the advantages and disadvantages of angularjs? An introduction to the advantages and disadvantages of angularjs
Can node.js continue to be popular in 2018? Let’s take a look at the treatment of node.js
The above is the detailed content of What are the differences between angularjs and Vue? Comparison details between angularjs and Vue. For more information, please follow other related articles on the PHP Chinese website!