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 相关文章推荐
检测input每次的输入是否合法遇到汉字输入就有问题
May 23 Javascript
jQuery中ajax的get()方法用法实例
Dec 26 Javascript
jQuery中removeClass()方法用法实例
Jan 05 Javascript
js实现仿百度汽车频道选择汽车图片展示实例
May 06 Javascript
jquery插件jquery.nicescroll实现图片无滚动条左右拖拽的方法
Aug 10 Javascript
纯jquery实现模仿淘宝购物车结算
Aug 20 Javascript
Angular.Js之Scope作用域的学习教程
Apr 27 Javascript
Angularjs Promise实例详解
Mar 15 Javascript
详解VUE自定义组件中用.sync修饰符与v-model的区别
Jun 26 Javascript
详解从react转职到vue开发的项目准备
Jan 14 Javascript
js屏蔽退格键(backspace或者叫后退键与F5)
Feb 10 Javascript
微信小程序事件对象中e.target和e.currentTarget的区别详解
May 08 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
php中使用preg_replace函数匹配图片并加上链接的方法
2013/02/06 PHP
用JavaScript调用WebService的示例
2008/04/07 Javascript
javascript 程序库的比较(一)之DOM功能
2010/04/07 Javascript
分享一道笔试题[有n个直线最多可以把一个平面分成多少个部分]
2012/10/12 Javascript
解决Jquery鼠标经过不停滑动的问题
2014/03/03 Javascript
JQuery EasyUI 数字格式化处理示例
2014/05/05 Javascript
js自定义select下拉框美化特效
2016/05/12 Javascript
jQuery的deferred对象使用详解
2016/09/25 Javascript
JavaScript易错知识点整理
2016/12/05 Javascript
Bootstrap datepicker日期选择器插件使用详解
2017/07/26 Javascript
vue-resource + json-server模拟数据的方法
2017/11/02 Javascript
使用elementUI实现将图片上传到本地的示例
2018/09/04 Javascript
js事件触发操作实例分析
2019/06/21 Javascript
使用vue构建多页面应用的示例
2020/10/22 Javascript
[02:40]2018年度DOTA2最佳新人-完美盛典
2018/12/16 DOTA
[59:53]DOTA2-DPC中国联赛 正赛 VG vs Elephant BO3 第二场 3月6日
2021/03/11 DOTA
python使用os模块的os.walk遍历文件夹示例
2014/01/27 Python
用实例分析Python中method的参数传递过程
2015/04/02 Python
在Python中使用全局日志时需要注意的问题
2015/05/06 Python
深入理解Python中的内置常量
2017/05/20 Python
关于python写入文件自动换行的问题
2018/06/23 Python
python3+selenium自动化测试框架详解
2019/03/17 Python
Python实现的爬取百度贴吧图片功能完整示例
2019/05/10 Python
PyQt编程之如何在屏幕中央显示窗体的实例
2019/06/18 Python
Python爬取12306车次信息代码详解
2020/08/12 Python
使用CSS3代码绘制可爱的Hello Kitty猫
2016/08/03 HTML / CSS
html5适合移动应用开发的12大特性
2014/03/19 HTML / CSS
总经理任命书
2014/03/29 职场文书
创先争优活动个人总结
2015/03/04 职场文书
参观监狱警示教育心得体会
2016/01/15 职场文书
小学六一儿童节活动开幕词
2016/03/04 职场文书
2016年安全月活动总结
2016/04/06 职场文书
Python 循环读取数据内存不足的解决方案
2021/05/25 Python
Python识别花卉种类鉴定网络热门植物并自动整理分类
2022/04/08 Python
Python 视频画质增强
2022/04/28 Python
Java Spring读取和存储详细操作
2022/08/05 Java/Android