使用MVC思想设计一款简单的TODOList(任务清单)

需求分析:

1. 用户可以输入任务并添加到任务列表里
2. 用户可以删除指定的一条任务
3. 清空所有任务数据

实现原理:

• M (数据)要使用的数据和方法
  • data: 存储用户添加的任务, 数据类型: 数组, 任务类型: 字符串
  • methods: 添加, 删除等方法, 数据类型: 函数
• V (视图)要展示的页面
  • html结构
  • 使用指令关联视图和Vue实例
• C (业务逻辑)Vue实例
  • 连接M和V
  • 控制数据和视图的交互

在视图里

• 搭建html结构

<div id="app">
  <input type="text"  v-model="item" /><button v-on:click="add">add</button>
  <ol>
    <li v-for="i in list">{{i}} <button v-on:click="remove($index)">x</button></li>
  </ol>
</div>

在对应的Vue实例里

• 绑定HTML元素#app
• data对象: 数组存放任务
• methods对象: 存放方法

var app = new Vue({
  el: '#app',
  data: {                  // M 存储数据
    item: '',              // 输入的任务为字符串
    list: ['学习',           // 使用数组存储任务
           '跑步',
           '听音乐'   
          ]
  },
  methods: {               // 所有行为放在methods对象里     
  // 添加任务
    add: function(){
      this.list.push(this.item);
      this.item = '';
    },
  // 删除一条任务  
    remove: function(id){
      this.list.splice(id, 1);
    }
  // 清空所有任务
    reset: function(){
      this.list = [];
    }
  }
});

在控制台测试数据

• 在console中通过app.add='学习Vue.js,添加新任务.
• 通过app.remove(1), 删除指定的任务
• 通过app.reset(), 清空所有所有任务

结论

• 修改数据会同步到视图
• 专注业务逻辑, 不关心视图

完整代码
直接复制保存在html页面, 在谷歌浏览器打开, F12打开控制台, 测试数据