使用Angularjs和Vue.js对比
之前项目都是使用Angularjs,(注明此处主要讲Angularjs 1)在初步使用Vue.js后做一个简单的对比笔记。
首先从理论上简单说一下各自的特点,之后再用几个小的例子加以说明。
Angular
- 1,MVVM(Model)(View)(View-model)
- 2,模块化(Module)控制器(Contoller)依赖注入:
- 3,双向数据绑定:界面的操作能实时反映到数据,数据的变更能实时展现到界面。
- 4,指令(ng-click ng-bind ng-model ng-href ng-src ng-if/ng-show...)
- 5,服务Service($compile $filter $interval $timeout $http...)
- 6,路由(ng-Route原生路由),ui-router(路由组件)
- 7,Ajax封装($http)
其中双向数据绑定的实现使用了$scope变量的脏值检测,使用$scope.$watch(视图到模型),$scope.$apply(模型到视图)检测,内部调用的都是digest,当然也可以直接调用$scope.$digest进行脏检查。值得注意的是当数据变化十分频繁时,脏检测对浏览器性能的消耗将会很大,官方注明的最大检测脏值为2000个数据。
Vue
vue.js官网:是一套构建用户界面的 渐进式框架。与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整合。另一方面,Vue 完全有能力驱动采用单文件组件和 Vue 生态系统支持的库开发的复杂单页应用。
Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
- (1)模块化,目前最热的方式是在项目中直接使用ES6的模块化,结合Webpack进行项目打包
- (2)组件化,创造单个component后缀为.vue的文件,包含template(html代码),script(es6代码),style(css样式)
- (3)双向数据绑定:界面的操作能实时反映到数据,数据的变更能实时展现到界面。
- (4)指令(v-html v-bind v-model v-if/v-show...)
- (5)路由(vue-router)
- (6)vuex 数据共享
- (7)Ajax插件(vue-resource,axios)
vue非常小巧,压缩后min源码为72.9kb,gzip压缩后只有25.11kb,想比Angular为144kb,可以自驾搭配使用需要的库插件,类似路由插件(Vue-router),Ajax插件(vue-resource,axios)等
Vue与 Angular 双向数据绑定原理
angular.js :脏值检查
angular.js 是通过脏值检测的方式比对数据是否有变更,来决定是否更新视图,最简单的方式就是通过 setInterval() 定时轮询检测数据变动,当然Google不会这么low,angular只有在指定的事件触发时进入脏值检测,大致如下:
- DOM事件,譬如用户输入文本,点击按钮等。( ng-click )
- XHR响应事件 ( $http )
- 浏览器Location变更事件 ( $location )
- Timer事件( $timeout , $interval )
- 执行 $digest() 或 $apply()
vue :数据劫持
vue.js 则是采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发相应的监听回调。https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/definePropertydefineProperty
下面直接上代码
首先当然是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的双向数据绑定
<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-)操作符,相比angularjs指令使用(ng-)。其中vue.js还支持指令的简写方式:
- (1)事件click
<a v-on: click="fn"></a>
简写方式:
`<a @click="fn"></a>`
-
(2)属性
<a v-bind: href="url"></a>
简写方式:
<a :href="url"></a>
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' }
]
}
})
Angularjs渲染列表
<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' }
]
});
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: '#app',
data: {
message: 'Hello Vue.js!'
},
methods: {
reverseMessage: function () {
this.message = this.message.split('').reverse().join('')
}
}
})
<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 全局对象的定义和一些全局方法和属性的实现。 该文件对整个 Vue.js 应用的运行起着重要的作用,它提供了全局范围的 Vue 构造函数和一些全局方法。例如,你可以使用这个文件来创建全局的 Vue 实例,...
vue.js和vue.min.js
内容:vue.js、vue.min.js、vue.common.js、vue.common.dev.js、vue.common.prod.js、vue.esm.browser.js、vue.esm.browser.min.js、vue.runtime.js、vue.runtime.min.js、vue.runtime.esm.js、vue.runtime.common....
vue.min.js&vue.min.js&vue.common.js&vue.esm.js&vue.runtime.js等 真实资源共计14个js
Explore Vue.js to take advantage of the capabilities of modern browsers and devices using the fastest-growing framework for building dynamic JavaScript applications. You will work with the power of ...
vue.min.js vue.min.js vue.min.js vue.min.js vue.min.js vue.min.js vue.min.js vue.min.js vue.min.js vue.min.js vue.min.js vue.min.js vue.min.js vue.min.js vue.min.js vue.min.js vue.min.js vue.min.js ...
目前社区有很多 Vue.js 的源码解析文章,但是质量层次不齐,不够系统和全面,这本电子书的目标 是全方位细致深度解析 Vue.js 的实现原理,让同学们可以彻底掌握 Vue.js。 为了把 Vue.js 的源码讲明白,课程设计成...
《Vue.js前端框架技术与实战》教学大纲与实训大纲.docx《Vue.js前端框架技术与实战》教学大纲与实训大纲.docx《Vue.js前端框架技术与实战》教学大纲与实训大纲.docx《Vue.js前端框架技术与实战》教学大纲与实训大纲....
<script src="./js/vue%20(1).js" type="text/javascript" charset="UTF-8"> src里面的内容根据自己的下载的Vue.js的文件位置决定的,我这里只是拿我自己做的举个例子。这个地方的vue.js是因为我下载了两次这个版本...
vue.js和vue.min.js和node.js的安装配置包(详细安装说明请见我的另一个博文node.js和vue.js安装配置)
我如何使用 Django + Vue.js 快速构建项目.pdf ,我如何使用 Django + Vue.js 快速构建项目.pdf
学完本系列课程后,学员将会达到学习目标:只要具有JavaScript基础的学员都能灵活运用Vue.js技术设计前端程序。 实践阶段由浅入深分为四个案例:动态评分、图片轮播、OLTP管理界面、聊天室。聊天室程序则体现了Vue...
vue.min.js官方2.6.14版本
Vue.js 技术揭秘
基于 Vue.js 开发的在线考试管理员后台前端源码 基于 Vue.js 开发的在线考试管理员后台前端源码 基于 Vue.js 开发的在线考试管理员后台前端源码 基于 Vue.js 开发的在线考试管理员后台前端源码 基于 Vue...
网站vue.js检测插件,判断网页是否使用vue.js或者Nuxt.js,Nuxt.js + Vue.js is detected on this page.
Vue.js 架构学习
vue实战开发.快速上手.好不容易找到电子版.非PDF版
第1章 初识Vue.js 第2章 数据绑定和第一个Vue应用 第3章 计算属性 第4章 v-bind及class与style绑定 第5章 内置指令 第6章 表单与v-model 第7章 组件详解 第8章 自定义指令 第9章 Render函数 第10章 使用webpack 第...