使用Angularjs和Vue.js对比

使用Angularjs和Vue.js对比

之前项目都是使用Angularjs，在初步使用Vue.js后做一个简答的对比笔记

1. #首先当然是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',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',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',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},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地址