VUE训练营——Todo List
来源:互联网 发布:电脑听新闻的软件 编辑:程序博客网 时间:2024/05/17 07:25
VUE训练营——Todo List
简易的Todo List-github地址.
项目截图
项目技术点
项目比较简单,主要包括:
- vue-cli
- vue基本指令
- vue-router
关键代码
关键代码均在TodoList.vue中,这里只贴出js相关处理:
<script> let store = { save (key, value) { localStorage.setItem(key, JSON.stringify(value)) }, fetch (key) { return JSON.parse(localStorage.getItem(key)) || [] } } let list = store.fetch('all') let filter = { all: function (list) { return list }, finished: function (list) { return list.filter(function (item) { return item.isChecked }) }, unfinished: function () { return list.filter(function (item) { return !item.isChecked }) } } export default { name: 'todoList', data () { return { todo: '', list: list, editorTodoItem: null, beforeTodoContent: '', hash: 'all', hashItems: [ { title: '所有任务', isActive: true, hash: 'all' }, { title: '未完成的任务', isActive: false, hash: 'unfinished' }, { title: '完成的任务', isActive: false, hash: 'finished' } ] } }, methods: { addTodo () { let item = {title: this.todo, isChecked: false} this.list.push(item) this.todo = '' }, deleteTodo (index) { this.list.splice(index, 1) }, editTodo (item) { this.beforeTodoContent = item.title this.editorTodoItem = item }, isEditorItem (item) { return item === this.editorTodoItem }, editCompleted () { this.editorTodoItem = null }, cancelEdit (item) { item.title = this.beforeTodoContent this.editorTodoItem = null }, handleHash (item) { for (let i = 0; i < this.hashItems.length; i++) { this.hashItems[i].isActive = false } item.isActive = true this.hash = item.hash } }, computed: { noCheckedLength: function () { let count = 0 for (let i = 0; i < this.list.length; i++) { if (!this.list[i].isChecked) { count++ } } return count }, filterList: function () { return filter[this.hash] ? filter[this.hash](this.list) : this.list } }, directives: { 'focus': { update (el, binding) { if (binding.value) { el.focus() } } } }, watch: { list: { handler: function () { store.save('all', this.list) }, deep: true } } }</script>
vue-cli脚手架使用
运行如下命令,创建一个名为todolist的vue项目,通过本地8080端口启动服务
# install vue-clinpm install -g vue-cli# create todo list projectvue init webpack todolist# install dependenciesnpm install# serve with hot reload at localhost:8080npm run dev# build for production with minificationnpm run build# build for production and view the bundle analyzer reportnpm run build --report
在运行bash vue init webpack todolist
后,会依次要求输入以下配置内容:
- 项目名称(Project name)
- 项目描述(Project description)
- 项目作者(Author)
- 选择vue构建方式:
- 运行+编译(Runtime + Compiler)
- 运行时(Runtime only)
- 是否安装vue-router(Install vue-router)
- 是否使用ESLint(Use ESLint to your code)
- 标准模式(Standard)
- Airbnb
- 自定义模式(none)
- 是否使用Karma+Mocha的单元测试(Setup unit tests with Karma + Mocha)
- 是否使用Nightwatch e2e测试(Setup e2e tests with Nightwatch).
npm install安装完成后,项目目录结构如下:
|-- build // 项目构建相关代码| |-- build.js // 生产环境构建代码| |-- check-version.js // 检查npm、node等相关版本| |-- dev-client.js // 热重载相关| |-- dev-server.js // 构建本地服务器| |-- utils.js // 构建工具相关| |-- webpack.base.conf.js // webpack基础配置| |-- webpack.dev.conf.js // webpack开发环境配置| |-- webpack.prod.conf.js // webpack生产环境配置|-- config // 项目开发环境配置| |-- dev.env.js // 开发环境变量| |-- index.js // 项目一些配置变量(例如ProxyTable)| |-- prod.env.js // 生产环境变量|-- node_modules // 依赖项目存放目录|-- src // 项目源码目录| |-- assets // 资源文件目录| |-- components // 组件目录| |-- router // 路由目录| |-- App.vue // 页面入口文件| |-- main.js // 程序入口文件|-- .babelrc // ES6语法编译配置|-- .editorconfig // 定义代码格式|-- .eslintignore // ESLint检查忽略的文件|-- .eslistrc.js // ESLint文件|-- index.html // 项目入口页面|-- package.json // 项目配置信息
1 0
- VUE训练营——Todo List
- IMweb训练营作业—-Todo List(vue)
- [IMWeb训练营作业]vue实现简单的todo list
- 【IMWeb训练营作业】 使用 Vue 实现一个 TODO List
- Vue.js 第一发【 todo list (IMWeb训练营作业)】
- 【IMWeb训练营作业】第一次Vue作业-todo list
- Vue小案例—todo list
- IMWeb训练营作业——todo list
- IMWeb训练营作业——todo list
- 学习 Vue.js 第一发【 todo list (IMWeb训练营作业)】
- 【IMWeb训练营作业】 vue.js todo list 作业(写作中...)
- 【IMWeb训练营作业】todo list项目
- 【IMWeb训练营作业】之Todo List
- IMWeb训练营 todo list作业
- 【IMWeb训练营作业】todo list
- 【IMWeb训练营作业】Todo List制作
- 【IMWeb训练营作业】todo list
- 【IMWeb训练营作业】 --- todo list
- 库函数实现全排列
- CSDN博客数量超过500个的大牛的主页
- 神经网络(持续更新)
- 杭电ACM 1003 Max Sum
- HDU:1166 敌兵布阵(线段树)
- VUE训练营——Todo List
- C++: wstring与string互转
- 域名和网络地址
- Shape from shading(SFS)的原理和我的实现结果
- LeetCode (Merge Two Sorted Lists)
- soundtouch 变声使用和算法
- mysql 触发器
- dns关闭ipv6
- No repository found containing: osgi.bundle,org.tigris.subversion.clientadapter.javahl,1.9.3