What are the differences between angularjs and Vue? Comparison details between angularjs and Vue-JS Tutorial-php.cn

What are the differences between angularjs and Vue? Comparison details between angularjs and Vue

寻∝梦

Release： 2018-09-06 14:02:59

Original

4649 people have browsed it

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:

##vueJS is simple and easy to learn, while angularJS is easier to get started with;
vue focuses on the View layer, focusing on speed and convenience, while angularJS has more comprehensive functions, of course it is also larger, and is relatively less convenient than vue;
The instructions of angularJS are all ng-xxx, while the instructions of vueJS are all v-xxx;
All instructions and methods of angularJS are bound to $scope. VueJS is an instance of new. 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;
AngularJS is developed and maintained by Google, vueJS is maintained by individuals;
vueJS is generally used for mobile development, while angularJS is generally used in large projects

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 website

AngularJS 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 below

First of all, of course It’s Hello World

vue’s code:

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

Copy after login

Angular’s code:

<div ng-app="myApp" ng-controller="myCtrl">
 {{message}}
</div>
var app = angular.module(&#39;myApp&#39;, []);
app.controller(&#39;myCtrl&#39;, function($scope) {
    $scope.message = "Hello world";
});

Copy after login

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: &#39;#app&#39;,
  data: {
    message: &#39;Hello Vue.js!&#39;
  },
  methods: {
    reverseMessage: function () {
      this.message = this.message.split(&#39;&#39;).reverse().join(&#39;&#39;)
    }
  }
})

Copy after login

<div ng-app="myApp" ng-controller="myCtrl">
 <p>{{ message }}</p>
 <button ng-click="reverseMessage()">Reverse Message</button>
</div>
var app = angular.module(&#39;myApp&#39;, []);
app.controller(&#39;myCtrl&#39;, function($scope) {
    $scope.message = "Hello world!";
    $scope.reverseMessage = function() {
        this.message = this.message.split(&#39;&#39;).reverse().join(&#39;&#39;)
    }
});

Copy after login

vue.Rendering list

<div id="app">
  <ul>
    <li v-for="name in names">
      {{ name.first }}
    </li>
  </ul>
</div>
new Vue({
  el: &#39;#app&#39;,
  data: {
    names: [
      { first: &#39;summer&#39;, last: &#39;7310&#39; },
      { first: &#39;David&#39;, last:&#39;666&#39; },
      { first: &#39;Json&#39;, last:&#39;888&#39; }
    ]
  }
})

Copy after login

Angularjs rendering list

<div ng-app="myApp" ng-controller="myCtrl">
  <li ng-repeat="name in names">{{name.first}}</li>
</div>
var app = angular.module(&#39;myApp&#39;, []);
app.controller(&#39;myCtrl&#39;, function($scope) {
    $scope.names = [
      { first: &#39;summer&#39;, last: &#39;7310&#39; },
      { first: &#39;David&#39;, last:&#39;666&#39; },
      { first: &#39;Json&#39;, last:&#39;888&#39; }
    ]
});

Copy after login

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!