在vue.js和angular.js中有哪些特点?两者直接的特点对比分析！

2021-06-21 11:00:26 浏览数 (4)

vue的双向数据绑定在互联网编程学习中，随着不断的更新和迭代我们可以使用的框架越来越多，我们会在不同的框架中使用不用的框架，那么今天我们就来说说有关于“在vue.js和angularjs中有哪些特点?”这个问题吧！下面是一些相关的信息，希望对大家的学习和理解有所帮助！

一、Vue与 Angular介绍

1、Vue

对于 vue大家应该都是比较熟悉的，它是有关于构建用户界面的渐进式框架，与其他的重量级框架不同，它是采用自底向上增量开发的设计，而且在vue的核心库中只关注视图层，而且还是比较容易学习的，也方便于和其他的库或者已经有的项目进行整合。另一方面对于vue来说它是有能力驱动采用单文件组件和 Vue 生态系统支持的库开发的复杂单页应用。 

内容包含：

模块化：目前最热的方式是在项目中直接使用ES6的模块化而且还结合​Webpack​进行项目打包、组件化：创造单个​component​后缀为.vue的文件，包含​template(html代码)​，​script(es6代码)​,​style(css样式)​、双向数据绑定：界面的操作能实时反映到数据，数据的变更能实时展现到界面 、指令(​v-html v-bind v-model v-if/v-show...​)、路由(vue-router)、vuex 数据共享、Ajax插件(vue-resource,axios) 。

2、Angular 

对于​Angular​它是一款构建用户界面的前端框架​，而且还是一个应用设计框架与开发平台，并且可以用于创建高效、复杂、精致的单页面应用，不仅如此​Angular​通过新的属性和表达式扩展了​HTML​，从而可以实现一套框架，多种平台，移动端和桌面端。

内容包含：

MVVM（Model）(View)(View-model)、模块化（Module）控制器（Contoller）依赖注入： 、双向数据绑定：界面的操作能实时反映到数据，数据的变更能实时展现到界面、指令(​ng-click ng-bind ng-model ng-href ng-src ng-if/ng-show...​) 、服务​Service($compile $filter $interval $timeout $http...)​ 、路由(ng-Route原生路由),ui-router(路由组件) 、Ajax封装($http) 

二、Vue与 Angular 双向数据绑定原理

1、angular.js ：脏值检查

在​angular.js​中是通过脏值检测的方式比对数据是否有变更，来决定是否更新视图，而且最简单的方式就是通过 ​setInterval() ​定时轮询检测数据变动，而且​angular​只有在指定的事件触发时进入脏值检测，如下： DOM事件，譬如用户输入文本，点击按钮等。(​ ng-click​ ) XHR响应事件 ( $http ) ，浏览器Location变更事件 ​( $location ) ​、Timer事件​( $timeout , $interval )​、 执行​ $digest() ​或 ​$apply() ​

2、vue ：数据劫持

对于​vue.js​来说则是采用数据劫持结合发布者-订阅者模式的方式，然后再通过​Object.defineProperty()​来劫持各个属性的​setter 、​getter在数据变动时发布消息给订阅者，触发相应的监听回调。

3.代码演示如下：

(1)、vue.js和angular.js的​hello world​输出：

vue模块代码：

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

angular模块代码：

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

小结：我们通过两者之间的相互比较来看在​vue​中采用了​json​的数据格式进行​dom​和​data​的编写，而且这一种编写风格更加靠进​js​的数据编码格式，通俗易懂。

(2)、vue和angular的双向数据绑定:

vue的双向数据绑定代码如下：

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

angular的双向数据绑定代码如下：

<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​虽然是一个轻量级的框架，但是提供的​API​确非常多，而且还有包括一些便捷的指令和属性操作，而且一般​vue​是指令使用(v-)操作符，相比​angular.js​指令使用（ng-），其中​vue.js​还支持指令的简写方式：拿事件来说：​click<a v-on: click="fn"></a> ​的简写方式是：​ <a @click="fn"></a>​； 对于属性​<a v-bind: href="url"></a>​来说它的简写方式是： ​<a :href="url"></a> ​。

(3)、vue和angular的渲染列表:

vue的渲染列表代码如下:

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

angular的渲染列表代码如下:

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

在我们看来其实​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>

(4)、vue循环：

​vue​循环代码如下：

<ul>
    <li v-for="item in list">
        <a :href="item.url">{{item.title}}</a>
    </li>
</ul>
三、vue和Angular处理用户输入

vue处理用户输入代码：

<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('')
    }
  }
})

Angular处理用户输入代码： 

<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.js和angular.js中有哪些特点?”这个问题的相关资料和分析，当然如果你有更全面的内容也可以和大家一起分享共同学习，更多有关于vue与angular的相关内容和知识点我们都可以在W3cschool中学习和了解。


Vue.js AngularJS

0 人点赞