使用Angularjs和Vue.js对比
使用Angularjs和Vue.js对比 使用Angularjs和Vue.js对比 之前项目都是使用Angularjs,(注明此处主要讲Angularjs 1)在初步使用Vue.js后做一个简答的对比笔记。 Angular
其中双向数据绑定的实现使用了$scope变量的脏值检测,使用$scope.$watch(视图到模型),$scope.$apply(模型到视图)检测,内部调用的都是digest,当然也可以直接调用$scope.$digest进行脏检查。值得注意的是当数据变化十分频繁时,脏检测对浏览器性能的消耗将会很大,官方注明的最大检测脏值为2000个数据。 Vuevue.js官网:是一套构建用户界面的渐进式框架。与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整合。另一方面,Vue 完全有能力驱动采用单文件组件和Vue 生态系统支持的库开发的复杂单页应用。 Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
vue非常小巧,压缩后min源码为72.9kb,gzip压缩后只有25.11kb,想比Angular为144kb,可以自驾搭配使用需要的库插件,类似路由插件(Vue-router),Ajax插件(vue-resource)等 下面直接上代码 首先当然是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的数据编码格式,通俗易懂。 vue的双向数据绑定<div id="app"> <p>{{ message }}</p> <input v-model="message"> </div> new Vue({ el: '#app',data: { message: 'Hello Vue.js!' } })
Angular的双向数据绑定"myCtrl">
<p>{{message}}</p>
<input ng-model="message">
</div>
"Hello world!";
});
vue虽然是一个轻量级的框架,提供的API确非常多,包括一些便捷的指令和属性操作,一般vue是指令使用(v-)操作符,相比angularjs指令使用(ng-)。其中vue.js还支持指令的简写方式:
vue.渲染列表"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' },21)">'Json',21)">'888' }
]
}
})
Angularjs渲染列表"myCtrl">
<li ng-repeat="name in names">{{name.first}}</li>
</div>
function($scope) {
$scope.names = [
{ first: '888' }
]
});
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}}" /> "item-info"> <h3 class="item-title">{{news.title}}</h3> <p class="item-time">{{news.createTime}}</div> </div>
vue和Angular处理用户输入"app">
<p>{{ message }}</p>
<button v-on:click="reverseMessage">Reverse Message</button>
</div>
'Hello Vue.js!'
},methods: {
reverseMessage: function () {
this.message = this.message.split('').reverse().join('')
}
}
})
"myCtrl">
<p>{{ message }}</p>
<button ng-click="reverseMessage()">Reverse Message</button>
</div>
"Hello world!";
$scope.reverseMessage = function() {
this.message = this.message.split('').reverse().join('')
}
}); (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |