Comparison using Angularjs and Vue.js

The content of this article is about the comparison between using Angularjs and Vue.js. Now I share it with you. Friends in need can refer to it

#Comparison between using Angularjs and Vue.js

Previous projects all used Angularjs, (please note that this article mainly talks about Angularjs 1) In the preliminary Make a simple comparison note after using Vue.js.

First of all, let’s briefly talk about their respective characteristics in theory, and then use a few small examples to illustrate them.

Angular

• 1, 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 in the data in real time, and the changes in the data can be displayed in the interface in real time.

• 4, command (ng-click ng-bind ng-model ng-href ng-src ng-if/ng-show...)

• 5, Service($compile $filter $interval $timeout $http...)

• 6, Routing (ng-Route native routing), ui-router( Routing component)

• 7, Ajax encapsulation ($http)

The implementation of two-way data binding uses the dirty value of the $scope variable For detection, use $scope.$watch (view to model) and $scope.$apply (model to view) for detection. Digest is called internally. 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.

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. On the other hand, Vue is fully capable of driving complex single-page applications developed using single-file components and Vue ecosystem-supported libraries. The goal of Vue.js is to implement responsive data binding

and

composed view components through the simplest possible API.

(1) Modularization. Currently, the hottest way is to directly use ES6 modularity in the project and combine it with Webpack for project packaging.

• (2) Componentization, create a single component file with the suffix .vue, including template (html code), script (es6 code), style (css style)

• (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) Command(v-html v-bind v-model v-if/v-show...)

• （ 5) Routing (vue-router)

• (6) vuex data sharing

• (7) Ajax plug-in (vue-resource,axios)

vue is very small. After compression, the min source code is 72.9kb. After gzip compression, it is only 25.11kb. It is 144kb compared to Angular. You can use it by yourself with the required library plug-ins, similar to the routing plug-in (Vue-router ), Ajax plug-in (vue-resource, axios), etc.

Principle of two-way data binding between Vue and Angular

##angular.js:Dirty value check

angular.js uses dirty value detection to compare whether the data has changed to decide whether to update the view. The simplest way is to regularly poll to detect data changes through setInterval(). Of course, Google will not So low, Angular only enters dirty value detection when a specified event is triggered, roughly as follows:

• DOM events, such as the user inputting text, clicking a button, etc. (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 the publisher-subscriber model to hijack each property through Object.defineProperty() The setters and getters publish messages to subscribers when data changes, triggering corresponding listening callbacks. https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/definePropertydefineProperty

The code is directly below

The first is of course Hello World

vue

<p id="app">
  {{ message }}
</p>

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

Angular

<p ng-app="myApp" ng-controller="myCtrl">
 {{message}}
</p>

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

In comparison, vue uses the json data format to write dom and data, and the writing style is more based on the js data encoding format. , easy to understand.

Vue’s two-way data binding

<p id="app">
  <p>{{ message }}</p>
  <input v-model="message">
</p>

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

Angular’s ​​two-way data binding

<p ng-app="myApp" ng-controller="myCtrl">
  <p>{{message}}</p>
  <input ng-model="message">
</p>

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 APIs, including Some convenient instructions and attribute operations, generally Vue instructions use the (v-) operator, compared with angularjs instructions use (ng-). Among them, vue.js also supports the abbreviation of instructions:

• (1) event click
  Abbreviation:

  
  

• (2)Attribute
  Abbreviation:

  
  

vue.渲染列表

<p id="app">
  <ul>
    <li v-for="name in names">
      {{ name.first }}
    </li>
  </ul>
</p>

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

Angularjs渲染列表

<p ng-app="myApp" ng-controller="myCtrl">
  <li ng-repeat="name in names">{{name.first}}</li>
</p>

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的循环

<ul>
    <li v-for="item in list">
        <a :href="item.url">{{item.title}}</a>
    </li>
</ul>

angular和vue的渲染差不多

<p class="item" ng-repeat="news in  newsList">
    <a ng-href="#/content/{{news.id}}">
        <img ng-src="{{news.img}}" />
        <p class="item-info">
            <h3 class="item-title">{{news.title}}</h3>
            <p class="item-time">{{news.createTime}}</p>
        </p>
    </a>
</p>

vue和Angular处理用户输入

<p id="app">
  <p>{{ message }}</p>
  <button v-on:click="reverseMessage">Reverse Message</button>
</p>

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  },
  methods: {
    reverseMessage: function () {
      this.message = this.message.split('').reverse().join('')
    }
  }
})

---

<p ng-app="myApp" ng-controller="myCtrl">
 <p>{{ message }}</p>
 <button ng-click="reverseMessage()">Reverse Message</button>
</p>

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

相关推荐：

AngularJS应用模块化的使用详解

Angular开发实践之服务端渲染_AngularJS

Vue.js的基础知识点总结

The above is the detailed content of Comparison using Angularjs and Vue.js. For more information, please follow other related articles on the PHP Chinese website!