当前位置: 首页 > 编程笔记 >

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

冯俊英
2023-03-14
本文向大家介绍vue2的todolist入门小项目的详细解析,包括了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的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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持小牛知识库。

 类似资料:
  • 主要内容:一、前情提示,二、ack机制回顾,三、ack机制实现原理:delivery tag,四、RabbitMQ如何感知到仓储服务实例宕机,五、仓储服务处理失败时的消息重发,六、阶段总结一、前情提示 生产者投递出去的消息,可能会丢失,丢失的原因有很多,比如消息在网络传输到一半的时候因为网络故障就丢了,或者是消息投递到MQ的内存时,MQ突发故障宕机导致消息就丢失了。 针对这种生产者投递数据丢失的问题,RabbitMQ实际上是提供了一些机制的。 比如,有一种重量级的机制,就是事务消息机制。采用类事

  • 本文向大家介绍超详细的cmake入门教程,包括了超详细的cmake入门教程的使用技巧和注意事项,需要的朋友参考一下 什么是cmake 你或许听过好几种 Make 工具,例如 GNU Make ,QT 的 qmake ,微软的 MSnmake,BSD Make(pmake),Makepp,等等。这些 Make 工具遵循着不同的规范和标准,所执行的 Makefile 格式也千差万别。这样就带来了一个严

  • 本文向大家介绍vue.js实例todoList项目,包括了vue.js实例todoList项目的使用技巧和注意事项,需要的朋友参考一下 新建组件todoList.vue,在App.vue中引入  三处缺一不可,第一处引入文件,第二处注册组件,第三处声明组件位置 由于html中不区分大小写,所以驼峰命名方式中的大写变为-,即第三处中写成todo-list,不理解的可以动手实验一下! todoList

  • 本文向大家介绍SELinux 入门详解,包括了SELinux 入门详解的使用技巧和注意事项,需要的朋友参考一下 回到 Kernel 2.6 时代,那时候引入了一个新的安全系统,用以提供访问控制安全策略的机制。这个系统就是 Security Enhanced Linux (SELinux),它是由美国国家安全局(NSA)贡献的,它为 Linux 内核子系统引入了一个健壮的强制控制访问Mandator

  • 本文向大家介绍超详细的Spring Boot入门笔记(总结),包括了超详细的Spring Boot入门笔记(总结)的使用技巧和注意事项,需要的朋友参考一下 1. Spring Boot 入门 Spring Boot是Spring社区较新的一个项目。该项目的目的是帮助开发者更容易的创建基于Spring的应用程序和服务,让更多人的人更快的对Spring进行入门体验,让Java开发也能够实现Ruby o

  • 本文向大家介绍NodeJS中的MongoDB快速入门详细教程,包括了NodeJS中的MongoDB快速入门详细教程的使用技巧和注意事项,需要的朋友参考一下 MongoDB 是一个基于分布式文件存储的数据库。由 C++ 语言编写。旨在为 WEB 应用提供可扩展的高性能数据存储解决方案。 MongoDB 是一个介于关系数据库和非关系数据库之间的产品,是非关系数据库当中功能最丰富,最像关系数据库的。 一