Home > Article > Web Front-end > What is the difference between vuejs and angularjs

What is the difference between vuejs and angularjs

青灯夜游Original: 2021-10-26 16:31:332626browse

Difference: 1. Angularjs is difficult to get started, but vuejs is simple and easy to learn; 2. Angular’s instructions are “ng-xxx”, while vue is “v-xxx”; 3. All instructions and methods of angular are It is bound to $scope, and all methods and instructions of vue are bound to the vue instance.

What is the difference between vuejs and angularjs

The operating environment of this tutorial: windows7 system, vue2.9.6 version, DELL G3 computer.

Comparison between using Angularjs and Vue.js

The previous projects all used Angularjs, (please note that this article mainly talks about Angularjs 1) After the initial use of Vue.js A simple 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.

Angular

1, MVVM (Model) (View) (View-model)
2, Module control 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, command (ng-click ng-bind ng-model ng-href ng-src ng-if/ng-show...)
5, service 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 dirty value detection of $scope variables, using $scope.$watch (view to model), $scope.$apply (model to view) detection, internal All calls are digest. Of course, you can also call $scope.$digest 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. Vue, on the other hand, 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 use ES6 modularization directly in the project and combine it with Webpack for project packaging.

(2) Componentization to create a single Files with component suffix .vue, including template (html code), script (es6 code), style (css style)
(3) Two-way data binding: The operation of the interface can be reflected in the data in real time. Changes can be displayed on 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, the min source code after compression is 72.9kb, after gzip compression It is only 25.11kb, which is 144kb compared to Angular. You can use it by yourself with the required library plug-ins, such as routing plug-ins (Vue-router), Ajax plug-ins (vue-resource, axios), etc.

Vue and Angular Principle of two-way data binding

angular.js: Dirty value check

angular.js compares data through dirty value detection If there is a change, the simplest way to decide whether to update the view is to use setInterval() to regularly poll to detect data changes. Of course, Google will not be so slow. Angular only enters dirty value detection when the specified event is triggered, which is roughly as follows:

XHR response event ($http)
Browser Location change event ($location)
Timer event ($timeout, $interval)
Execute $digest() or $apply()

vue: Data hijacking

vue.js is Using data hijacking combined with the publisher-subscriber model, Object.defineProperty() is used to hijack the setters and getters of each property, publish messages to subscribers when the data changes, and trigger the 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

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

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

Angular

<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";
});

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

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

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

Angular’s two-way data binding

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

var app = angular.module(&#39;myApp&#39;, []);
app.controller(&#39;myCtrl&#39;, 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

fb18926a59749a682e51d2201c2ba6895db79b134e9f6b82c0b36e0489ee08ed

简写方式：
8159299ceddef3bf00d03ef9f56ad0db5db79b134e9f6b82c0b36e0489ee08ed
(2)属性

f1d426d3654278992adc280d87d5593a5db79b134e9f6b82c0b36e0489ee08ed

简写方式：
7e02c3b846c23f3f09a33678d01021f05db79b134e9f6b82c0b36e0489ee08ed

vue.渲染列表

<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; }
    ]
  }
})

Angularjs渲染列表

<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; }
    ]
});

vue的循环

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

angular和vue的渲染差不多

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

vue和Angular处理用户输入

<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;)
    }
  }
})

<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;)
    }
});

总结：angularjs和vuejs的区别

1、angularJS上手难，而vueJS简单易学；

2、angularJS的指令都是ng-xxx，而vueJS的指令都是v-xxx；

3、angularJS的所有指令和方法都是绑定在$scope上的，而vueJS是new出来一个实例，所有的方法和指令都在这个实例上，一个页面上可以有多个vue实例，但是angularJS的对象只能有一个；

4、angularJS是由google开发和维护的，vueJS是由个人维护的；

5、vueJS一般用于移动端的开发，而angularJS一般应用于大型的项目。

更多编程相关知识，请访问：编程学习！！

The above is the detailed content of What is the difference between vuejs and angularjs. For more information, please follow other related articles on the PHP Chinese website!

JavaScript json css ajax vue.js angular.js html es6 angular webpack Object Resource if 封装 Filter 循环 JS 对象事件 dom location href http https ui

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：What are the commonly used frameworks for JavaScript?Next article：What are the commonly used frameworks for JavaScript?

See more

What is the difference between vuejs and angularjs

Comparison between using Angularjs and Vue.js

Angular

Vue

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

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

<div id="app"> <p>{{ message }}</p> <input v-model="message"> </div> new Vue({ el: '#app', data: { message: 'Hello Vue.js!' } })

<div ng-app="myApp" ng-controller="myCtrl"> <p>{{message}}</p> <input ng-model="message"> </div> var app = angular.module('myApp', []); app.controller('myCtrl', function($scope) { $scope.message = "Hello world!"; });

vue.渲染列表

Angularjs渲染列表

vue的循环

angular和vue的渲染差不多

vue和Angular处理用户输入

Related articles

What is the difference between vuejs and angularjs

Comparison between using Angularjs and Vue.js

Angular

Vue

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

<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"; });

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

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

vue.渲染列表

Angularjs渲染列表

vue的循环

angular和vue的渲染差不多

vue和Angular处理用户输入

Related articles

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

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

<div id="app"> <p>{{ message }}</p> <input v-model="message"> </div> new Vue({ el: '#app', data: { message: 'Hello Vue.js!' } })

<div ng-app="myApp" ng-controller="myCtrl"> <p>{{message}}</p> <input ng-model="message"> </div> var app = angular.module('myApp', []); app.controller('myCtrl', function($scope) { $scope.message = "Hello world!"; });