使用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', []);
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地址