Vue_简单项目todolist

Richard_Gao 发布于2019-08-21 17:35 / 1826人阅读

摘要：强大的渐进式渲染引擎使得我们越来越不需要手动控制数据的变化，那么下面我们来看一看。上面所有的依赖在下面引入就可以了。

Vue强大的渐进式渲染引擎使得我们越来越不需要手动控制数据的变化，那么下面我们来看一看。如何用Vue写一个todolist。

开始

首先，创建一个文件夹，用命令行初始化
npm init -y
然后安装需要的插件
npm i -S underscore vue todomvc-app-css
在这里我们需要用到vue ，css样式npm上的todo-app-css 插件html我们可以采用http://todomvc.com/examples/b...上面的html并将其格式化，然后下载underscore对数组进行操作。
上面所有的依赖在下面引入就可以了。

新建实例

新建vue的实例
写一个默认的任务：todoList: [{}]



删除任务方法
methods: {
  ...
  // 删除任务
  deleteTodo(todo) {
    this.todoList = _.without(this.todoList, todo)
  }
}
编辑任务

添加一个数据项：
data: {
  // 正在编辑的任务索引
  editingIndex: -1,
  ...
}
绑定双击事件：
{{ todo.text }}
methods: {
  ...
  // 编辑任务
  editTodo(index) {
    // 设置一下当前正在编辑的索引
    this.editingIndex = index;
  }
}
加上class
  v-for="(todo,index) in todoList" :key=""todo-"+index" >```
自定义指令：
// 注册一个全局自定义指令 v-focus
Vue.directive("focus", {
  // 当绑定元素插入到 DOM 中。
  inserted(el) {
    // 聚焦元素
    el.focus()
  },
  // 当绑定元素更新的时候
  update(el) {
    el.focus();
  }
})
使用自定义指令

添加保存todo, 实际上就是把input框取消

保存的方法
methods: {
  ...
  // 保存任务，因为是动态绑定的，不需要再保存，只需要把input框隐藏即可
  saveTodo(todo) {
    this.editingIndex = -1
    if (todo.text.trim().length < 1) {
      this.deleteTodo(todo)
    }
  }
}
未完成的数量
computed: {
  ....
  // 未完成的任务数量
  activeCount() {
    return this.todoList.filter(item => {
      return !item.checked
    }).length;
  }
}
数据持久化到本地localStorage
新建store.js
var STORAGE_KEY = "todoList"
window.todoStorage = {
    fetch() {
    try {
      return JSON.parse(localStorage.getItem(STORAGE_KEY) || "[]");
    } catch(error) {
      return [];
    }
    },
    save(todoList) {
        localStorage.setItem(STORAGE_KEY, JSON.stringify(todoList));
    }
}
引入store.js

修改初始化数据：
data: {
  ...
  todoList: todoStorage.fetch()
}
在Vue实例中添加一个属性变化观察
// 观察属性变化
watch: {
  todoList: {
    deep: true,
    handler: todoStorage.save
  }
},
全部完成功能
添加计算属性：
computed: {
  // 是否所有任务都完成
  allDone: {
    get() {
      // 未完成的数量为0表示全部完成,全部完成返回true
      return this.activeCount === 0;
    },
    set(value) {
      this.todoList.forEach(todo => {
        todo.checked = value
      });
    }
  }
}
使用v-model绑定：

实现过滤所有，已完成，未完成的功能
在实例化Vue对象外面放一个普通的过滤对象：
// 一个普通的过滤的对象, 用来过滤任务列表
var filters = {
  all: function (todos) {
    return todos;
  },
  active: function (todos) {
    return todos.filter(function (todo) {
      return !todo.checked;
    });
  },
  completed: function (todos) {
    return todos.filter(function (todo) {
      return todo.checked;
    });
  }
};
添加一个属性visibility 来表示我们要显示所有，还是显示未完成，或已完成
data: {
  visibility: "all",
}
修改一下未完成的数量这个计算属性，使用上面的filters对象去过滤
computed: {
   // 未完成的任务数量
  activeCount() {
    return filters.active(this.todoList).length;
  },
}
添加任务过滤的计算属性：
computed: {
  // 过滤任务列表
  filteredTodoList: function () {
    return filters[this.visibility](this.todoList);
  }
}
在DOM当中添加点击事件，点击的时候修改visiblity属性即可
  所有
  未完成
  已完成
列表渲染的循环语句修改：

添加一个变量，得到hash值：
var visibility = location.hash.substr(location.hash.indexOf("/")+1);
visibility = visibility === "" ? "all" : visibility
设置visibility属性的值为当前的这个变量：
data: {
  visibility: visibility,
 }
点击清空已完成功能：
添加一个已完成的任务数量计算属性：
computed: {
  // 已完成的任务数量
  completedCount() {
    return filters.completed(this.todoList).length;
  }
}
添加一个清空已完成的方法：
methods: {
  // 清空已完成的任务列表
  clearCompleted() {
    this.todoList = filters.active(this.todoList)
  }
}
DOM元素绑定事件，以及v-show:

好了，到这里我们的功能基本就实现了，可以看看效果todolist.html,后面的话我们还可以加路由了解数据库然后做成云端todolist，还可以上线。

服务器托管云服务器云服务器搭建vue项目腾讯云服务器部署vue项目 vue项目放到云服务器上阿里云服务器搭建vue项目

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/89725.html

应用vue2+vuex+vue-router+webpack2+es6+express+mysql技

摘要：其实这里还是有漏洞的，坐等高手指出来微笑脸后台没有用生成一个完整的架构。来自不同视图的行为需要变更同一状态。最近对vue很感兴趣，趁闲暇时间，模仿了wunderlist里面的部分功能，编写了前后端分离的基于vue技术栈和express的todolist小项目。写这篇博文来总结思考下。项目所在github,可以自行参考克隆。本人博客总体概览整个项目最终做成的样子如下： showI...

voidking 2019-08-20 16:09 评论0 收藏0
TodoList：适合初学者的vue+node小项目

摘要：一个简单的项目，前端由实现，后端由，数据库采用。路由项目启动项目进入项目，安装依赖安装客户端依赖安装服务器端依赖启动项目启动服务器启动客户端开发模式浏览器访问完整代码点我，有用的话给个哦，谢谢 TodoList 一个简单的vue + nodejs项目，前端由vue实现，后端由nodejs(express)，数据库采用mongodb。 github项目地址在线效果展示 showI...

lovXin 2019-06-26 17:59 评论0 收藏0
vue的TodoMVC事例总结

摘要：缩写为数据键盘事件添加事项指令指令监听事件。这块内容只会在指令的表达式返回值的时候被渲染。清空已办事项全选取消全选方法用于调用数组的每个元素，并将元素传递给回调函数。 gitHub地址：https://github.com/gaozhixiao... 功能拆分：渲染数据键盘事件：添加事项鼠标点击事件：移除事项显示未办事项数据全部事项、未办事项、已办事项状态切换清除全部完成...

CKJOKER 2019-08-26 10:10 评论0 收藏0
用Vue搭建一个应用盒子（一）：todo-list

摘要：最近在研究的相关知识，最好的学习方法莫过于自己开发一个，这样带着问题来学习，进步自然飞速。在首页里，我们会用写一个导航，通过的路由导航到不同的应用。我们在文件夹里创建一个新的组件。最近在研究vue的相关知识，最好的学习方法莫过于自己开发一个SPA，这样带着问题来学习，进步自然飞速。于是边查边写差不多花了2周写完了一个todo-list，功能不够完备，但是麻雀虽小，却也是五脏俱全，基本...

MAX_zuo 2019-08-26 11:32 评论0 收藏0
简单抽象工厂

摘要：抽象工厂模式定义抽象工厂模式是指当有多个抽象角色时，使用的一种工厂模式。抽象工厂模式定义：抽象工厂模式是指当有多个抽象角色时，使用的一种工厂模式。抽象工厂模式可以向客户端提供一个接口，使客户端在不必指定产品的具体的情况下，创建多个产品族中的产品对象优点： 1.它分离了具体的类 2.它使得易于交换产品系列 3.它有利于产品的一致性缺点：难以支持新种类的产品 showImg...

Tony 2019-08-23 18:00 评论0 收藏0