使用Angularjs和Vue.js对比
2016-10-25 19:46
651 查看
使用Angularjs和Vue.js对比
之前项目都是使用Angularjs,在初步使用Vue.js后做一个简答的对比笔记
#首先当然是Hello World了~vue.js
<div id="app"> {{ message }} </div>
new Vue({ el: '#app', data: { message: 'Hello Vue.js!' } })
~Angularjs
<div ng-app="myApp" ng-controller="myCtrl"> {{message}} </div>
var app = angular.module('myApp', []); app.controller('myCtrl', function($scope) { $scope.message = "Hello world"; });
2.#双向数据绑定
~vue.js
<div id="app"> <p>{{ message }}</p> <input v-model="message"> </div>
new Vue({ el: '#app', data: { message: 'Hello Vue.js!' } })
~Angular.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!"; });
3.#渲染列表
~vue.js
<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' } ] });
4.#处理用户输入
~vue.js
<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('') } } })
~Angularjs
<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('') } });
5#综合测试
~vue.js
<div id="app"> <h2>Todo</h2> <form> <input type="text" v-model="todoText" size="30" placeholder="add new todo here" v-on:keyup.enter="addTodo"> <input class="btn-primary" type="submit" v-on:click="addTodo" value="add"> </form> <span>{{remaining()}} of {{todos.length}} remaining</span> <button v-on:click="remove">delete</button> <ul> <li v-for="todo in todos"> <input type="checkbox" v-model="todo.done"> <span class="done-{{todo.done}}">{{todo.text}}</span> <button v-on:click="removeTodo($index)">X</button> </li> </ul> </div>
new Vue({ el: '#app', data: { todoText: '', todos: [ {text:'learn vue', done:true}, {text:'build an vue app', done:false}, {text:'test', done:false} ] }, methods: { addTodo: function () { var text = this.todoText.trim() if (text) { this.todos.push({ text: text, done:false}) this.todoText = '' } }, remaining : function() { var count = 0; this.todos.forEach(function(item) { count += item.done ? 0 : 1; }); return count; }, removeTodo: function (index) { this.todos.splice(index, 1) }, remove : function() { var oldTodos = this.todos; this.todos = []; oldTodos.forEach(function(item) { if (!item.done) this.todos.push(item); }); } } })
~Angularjs
<div ng-app="myApp"> <h2>Todo</h2> <div ng-controller="TodoCtrl"> <form ng-submit="addTodo()"> <input type="text" ng-model="todoText" size="30" placeholder="add new todo here"> <input class="btn-primary" type="submit" value="add"> </form> <span>{{remaining()}} of {{todos.length}} remaining</span> <button ng-click="delete()">delete</button> <ul> <li ng-repeat="todo in todos"> <input type="checkbox" ng-model="todo.done"> <span class="done-{{todo.done}}">{{todo.text}}</span> <button ng-click="removeTodo(this)">X</button> </li> </ul> </div> </div> <style> .done-true { text-decoration: line-through; color: grey; } </style>
var app = angular.module('myApp', []); app.controller('TodoCtrl', function($scope){ $scope.todos = [ {text:'learn angular', done:true}, {text:'build an angular app', done:false}, {text:'test', done:false} ]; $scope.addTodo = function() { $scope.todos.push({text:$scope.todoText, done:false}); $scope.todoText = ''; }; $scope.remaining = function() { var count = 0; angular.forEach($scope.todos, function(todo) { count += todo.done ? 0 : 1; }); return count; }; $scope.delete = function() { var oldTodos = $scope.todos; $scope.todos = []; angular.forEach(oldTodos, function(todo) { if (!todo.done) $scope.todos.push(todo); }); }; $scope.removeTodo = function (index) { $scope.todos.splice(index, 1) }; });
jsfiddle地址
相关文章推荐
- 以前也有过楼主这个阶段,工作两年感觉前端不过如此,不过后来还是逐渐突破了。尤其是使用了angularJS后。 现在转去做C++开发,对比后发现前端实在是太简单了,别喷我,个人想法,当初也是觉得JS水
- vue.js 对比 angularJS、react 前端框架
- js字符串截取函数substr substring slice使用对比
- Think in AngularJS:对比jQuery和AngularJS的不同思维模式
- angularJs学习——图书列表(一):使用本地js文件数据源
- 我是怎么从顾虑到热爱ReactJS的(与AngularJS经典MVC数据绑定的对比)
- 从angularJS改道Vue.js,趟过第一个坑!
- ASP.NET中后台注册js脚本使用的方法对比
- 使用vue.js开发时一些注意事项
- 将BootstrapJS和AngularJS结合使用以及为什么不用jQuery
- 使用 Node.js、Express、AngularJS 和 MongoDB 构建一个Web程序
- Node.js开发入门(九)——使用AngularJS内置服务
- javaScript社区开发者调查:javascript使用情况and服务器js中AngularJS使用者最多
- JS 前端框架6 AngularJS 入门使用
- 将BootstrapJS和AngularJS结合使用以及为什么不用jQuery
- Think in AngularJS:对比jQuery和AngularJS的不同思维模式
- 三大JavaScript框架对比――AngularJS、BackboneJS和EmberJS
- Angularjs ng-table的使用(可以加button)以及angularjs学习资料
- 使用node+vue.js实现SPA应用