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

看完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的
3. 下载 (提供html和css)（也可以直接$ git clone 来下载）
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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。