vue2的todolist入门小项目的详细解析


Posted in Javascript onMay 11, 2017

看完vue2的官方文档后,找个入门项目巩固下知识点,简单的todolsit是个不错的选择。

项目用到了vue.js vue.cli webpack ES6 node环境,完成项目后会对这些技术栈有了些了解。

准备开发环境

$ npm install -g vue-cli
$ vue init ,比如 vue init webpack todolist
$ cd todolist
$ npm install
$ npm run dev
  1. 安装谷歌插件vue.js devtools
  2. 下载vue.js的webpack模板
  3. 下载todomvc的模板 (提供html和css)(也可以直接$ git clone https://github.com/tastejs/todomvc-app-template.git 来下载)
  4. 把todomvc的index.html拖到todolist文件夹去覆盖里面的index.html
  5. 打开todomvc的json文件,会看到 “todomvc-app-css”: “^2.0.0”,就是要你 npm install todomvc-app-css -S 从而下载该css
  6. 删点todolsit index.html的默认css,js引用,src文件夹下的main.js引入模板css(import‘todomvc-app-css/index.css')
  7. 引入vue(import Vue form ‘vue')
  8. 等写完代码后 $npm run build 一键打包构建,会看到dist文件夹

main.js的代码

//后面的为注释讲解, ~表示串联index.html的对应内容

import 'todomvc-app-css/index.css'
import Vue from 'vue'
//添加localStorage
var STORAGE_KEY = 'todos-vuejs-2.0'
var todoStorage = {
 fetch: function () {
  var todos = JSON.parse(localStorage.getItem(STORAGE_KEY) || '[]')
  todos.forEach(function (todo, index) {
   todo.id = index
  })
  todoStorage.uid = todos.length
  return todos
 },
 save: function (todos) {
  localStorage.setItem(STORAGE_KEY, JSON.stringify(todos))
 }
}
//用过滤器筛选出三种状态
var filters = {
 all(todos) {
  return todos
 },
 active(todos) {
  return todos.filter((todo) => {
   return !todo.completed
  })
 },
 completed(todos) {
  return todos.filter((todo) => {
   return todo.completed
  })
 },
}
let app = new Vue({
 el: '.todoapp',  // ~ <section class="todoapp">
 data: {
  msg: 'hello world',
  title: '待做清单',  // 渲染标题 ~ {{title}}
  newTodo: '',
   todos: todoStorage.fetch(), // ~ v-show="todos.length" ; ~ {{todos.length>1?'items':'item'}} 渲染 li ~ v-for="(todo,index) in filteredTodos" 
  editedTodo: '',  // 空的编辑对象
  hashName: 'all'  
 },
 
 watch: {
  todos: {
   handler: function (todos) {
    todoStorage.save(todos)
   },
   deep: true
  }
 },
 
 computed: {
  remain() {
   return filters.active(this.todos).length  //未完成事项的数量 ~ {{remain}}
  }, 
  isAll: {   // ~ v-model="isAll"
   get() {
    return this.remain === 0
   },
   set(value) {
    this.todos.forEach((todo) => {
     todo.completed = value
    })
   }
  },
  filteredTodos() {  //用hashName过滤出当前页面的todos ~ v-for="(todo,index) in filteredTodos" 
   return filters[this.hashName](this.todos)
  }
 },
 methods: {
  addTodo(e) { //输入值为空时,不添加(trim去除前后空格) ~ v-model.trim="newTodo" 
   if (!this.newTodo) {
    return
   }
   this.todos.push({
    id: todoStorage.uid++,
    content: this.newTodo,
    completed: false //结合v-model 根据completed状态绑定样式 ~:class="{completed:todo.completed; ~ v-model="todo.completed"
   })
   this.newTodo = ''
  },
  removeTodo(index) {  //绑定x样式,点击删除该todo ~ @click="removeTodo(index)"
   this.todos.splice(index, 1)
  },
  editTodo(todo) {     //编辑 ~ @dblclick="editTodo(todo)"
   this.editCache = todo.content //储存编辑前的内容
   this.editedTodo = todo // 点击编辑里面的内容而不是只是空文本框~ editing:todo==editedTodo}"
  },
  doneEdit(todo, index) { //失去焦点后 ~ @blur="doneEdit(todo)";@keyup.enter="doneEdit(todo)"
   this.editedTodo = null //不存在编辑了或者说编辑已完成
   if (!todo.content) { //如果编辑后没有内容了,删除该todo
    this.removeTodo(index)
   }
  },
  cancelEdit(todo) {  //按esc键取消此次编辑操作 ~ @keyup.esc="cancelEdit(todo)">
   this.editedTodo = null   
   todo.content = this.editCache //当esc取消编辑时,还原编辑前的内容
  },
  clear() { //点击清除已完成的功能 ~ @click="clear"
   this.todos = filters.active(this.todos) //获取并渲染未完成的事项 ~ 
  }
 },
 directives: {  //自定义属性 ~ v-focus="todo == editedTodo"
  focus(el, value) { //文本框双击获取焦点
   if (value) {
    el.focus()
   }
  }
 }
})
//hash(url地址中#以及之后的字符)
function hashChange() { 
// ~ :class="{selected:hashName=='all'}";:class="{selected:hashName=='active'}";:class="{selected:hashName=='completed'}"
 let hashName = location.hash.replace(/#\/?/, '') //正则表达式去除#/?,获取如all,active,completed
 if (filters[hashName]) {  //如果过滤状态的hashName存在
  app.hashName = hashName //给整个app变量里的hashName赋上那个值
 } else {
  location.hash = ''  //取消
  app.hashName = 'all' //否则就赋值‘all',回到全部事项的页面
 }
}
window.addEventListener('hashchange', hashChange) //全局监听hash

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript 变量作用域 两个可能会被忽略的小特性
Mar 23 Javascript
javascript中的数字与字符串相加实例分析
Aug 14 Javascript
JS+css 图片自动缩放自适应大小
Aug 08 Javascript
基于Vue2的移动端开发环境搭建详解
Nov 03 Javascript
JS插件plupload.js实现多图上传并显示进度条
Nov 29 Javascript
jQuery实现判断控件是否显示的方法
Jan 11 Javascript
bootstrap网格系统使用方法解析
Jan 13 Javascript
深入理解ES6学习笔记之块级作用域绑定
Aug 19 Javascript
Vue中render方法的使用详解
Jan 26 Javascript
Vuex的各个模块封装的实现
Jun 05 Javascript
javascript实现放大镜功能
Dec 09 Javascript
一文帮你理解PReact10.5.13源码
Apr 03 Javascript
ionic实现底部分享功能
May 11 #Javascript
学习使用Bootstrap栅格系统
May 11 #Javascript
jQuery实现的简单在线计算器功能
May 11 #jQuery
学习使用Bootstrap页面排版样式
May 11 #Javascript
Angularjs 与 bower安装和使用详解
May 11 #Javascript
学习使用Bootstrap输入框、导航、分页等常用组件
May 11 #Javascript
es6学习笔记之Async函数基本教程
May 11 #Javascript
You might like
博士208HAF收音机实习报告
2021/03/02 无线电
linux php mysql数据库备份实现代码
2009/03/10 PHP
php adodb介绍
2009/03/19 PHP
PHP中static关键字原理的学习研究分析
2011/07/18 PHP
php之curl实现http与https请求的方法
2014/10/21 PHP
WordPress的主题编写中获取头部模板和底部模板
2015/12/28 PHP
理清PHP在Linxu下执行时的文件权限方法
2017/06/07 PHP
PHP使用PDO操作sqlite数据库应用案例
2019/03/07 PHP
js判断变量是否未定义的代码
2020/03/28 Javascript
JS简单的轮播的图片滚动实例
2013/06/17 Javascript
ExtJS实现文件下载的方法实例
2013/11/09 Javascript
js实现按钮控制图片360度翻转特效的方法
2015/02/17 Javascript
纯javascript实现的小游戏《Flappy Pig》实例
2015/07/27 Javascript
深入理解JavaScript中Ajax
2016/08/02 Javascript
Javascript生成带参数的二维码示例
2016/10/10 Javascript
20个最常见的jQuery面试问题及答案
2018/05/23 jQuery
js中async函数结合promise的小案例浅析
2019/04/14 Javascript
layui 实现二级弹窗弹出之后 关闭一级弹窗的方法
2019/09/18 Javascript
用Python进行TCP网络编程的教程
2015/04/29 Python
Python制作数据导入导出工具
2015/07/31 Python
解决已经安装requests,却依然提示No module named requests问题
2018/05/18 Python
Python使用一行代码获取上个月是几月
2018/08/30 Python
详解pandas数据合并与重塑(pd.concat篇)
2019/07/09 Python
selenium中get_cookies()和add_cookie()的用法详解
2020/01/06 Python
使用Keras预训练模型ResNet50进行图像分类方式
2020/05/23 Python
Python特殊属性property原理及使用方法解析
2020/10/09 Python
如何用 Python 处理不平衡数据集
2021/01/04 Python
巴西家用小家电购物网站:Polishop
2016/08/07 全球购物
加拿大领先的优质厨具产品在线购物网站:Golda’s Kitchen
2017/11/17 全球购物
瑞典手机壳品牌:Richmond & Finch
2018/04/28 全球购物
Cinque网上商店:德国服装品牌
2019/03/17 全球购物
市场营销专业个人求职信范文
2013/12/14 职场文书
支部书记四风问题自我剖析材料
2014/09/29 职场文书
2015年服务员工作总结
2015/04/08 职场文书
新闻稿件写作技巧
2015/07/18 职场文书
Kubernetes中Deployment的升级与回滚
2022/04/01 Servers