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

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

• 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)

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

composed view components through the simplest possible API.

• (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

• 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

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

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

Copy after login

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

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

Copy after login

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

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

Copy after login

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

Copy after login

• (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!