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

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

(0)

相关推荐

  • vue实现ToDoList简单实例

    一.需求与准备 1.准备 使用bootstrap实现页面的基础样式(依赖jquery),使用vue实现功能需要 2.功能需求 1).表单实现输入任务清单后加入到展示项中 2).点击删除按钮弹出警告框询问是否删除(bootstarp模态框插件) 3).确定删除时,删除对应项(单项删除,全部删除) 4).任务列表为空时,显示"数据为空" v-show 二.实例 1.静态页面 demo使用bootstrap来快速搭建页面 1).表单组件: .form, form-group, form-co

  • 基于vuejs实现一个todolist项目

    用vue.js实现一个todolist项目:input输入框输入的值会呈现在下方,并且会保存在localStorage里面,而且下方的列表点击之后也会有变化: 完整代码: App.vue <template> <div id="app"> <h1 v-html = "title"></h1> <input v-model="newItem" v-on:keyup.enter="add

  • vue实现留言板todolist功能

    通过前面两篇文章的的学习,我们掌握了vue的基本用法. 本文,就利用这些基础知识来实现一个留言板, 老外把他称之为todolist. 第一步.使用bootstrap做好布局 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <link rel="stylesheet&quo

  • 利用vue写todolist单页应用

    网上有很多关于vue的todolist小程序.大多是利用vue-cli脚手架工具开发的,这个官网的文档也不支持新手从单文件开始学习.所以用大家熟悉的开发方式写了这个todolist,希望和大家一起学习. 1.vue是啥? Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的 渐进式框架.简单说是一个模板引擎,做过后端的应该很清楚,以前靠服务器端渲染的dom,放在浏览器端端渲染,vue拿到数据渲染成dom.当然vue不仅仅是用来干这个的,数据驱动,数据双向绑定,赋予了用户很

  • Vue.js实现简单ToDoList 前期准备(一)

    一.前言 最近开始学习轻量级的mvvm框架Vue.js.就中文文档来说,算是很齐全了.之前本来在学习1.0版本,某日突然打开官网发现已更新为2.0.便把之后的都改为了2.0的语法.ps:如果恰好你是Vue的初学者的话,慕课网上有一个视频倒是可以去学习参考(我就是参考那个写了个ToDoList的小玩具,在这记录一下学习过程). 二.开篇 mvvm框架是前端现在比较热门的话题,去拉勾网上转一圈,基本70%都有要求.所以不说虚的,只是为了多挣点钱,咱们也该跟上时代的步伐不是.推荐一篇博文'http:/

  • vue.js实例todoList项目

    新建组件todoList.vue,在App.vue中引入 import TodoList from "./components/todoList"; export default { name: 'app', components: { TodoList } } <template> <div id="app"> <h1>TO DO LIST !</h1> <todo-list></todo-list

  • vue实现todolist单页面应用

    刚学习vue的小伙伴不知道从哪入手,很多网上的教程一来就搭建脚手架环境,可以新手更本看不懂,建议还是用引入script的方式引入vue.js,然后看官网的教程,再拿那这个demo练练手,也可以看看官网的demo,然后再去熟悉安装,搭建单页面应用. 效果: 功能: 在input输入文字点击按钮或者enter,下面会添加一个带复选框和文字还有删除按钮的li 用到的vue函数: data,methods,watch,还有localstorage 页面非常简单: 先写外面的盒子,这里用到v-model双

  • 详解Vue的computed(计算属性)使用实例之TodoList

    最近倒腾了一会vue,有点迷惑其中methods与computed这两个属性的区别,所以试着写了TodoList这个demo,(好土掩面逃~); 1. methods methods类似react中组件的方法,不同的是vue采用的与html绑定事件. 给个例子 /*html*/ <input type="button" value="点击" v-on:click='handlClick' id="app"> /*js*/ var ap

  • 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 安装谷歌插件vue.js devtools 下载vue.js的

  • 对MySQL配置参数 my.ini/my.cnf的详细解析

    以下的文章主要描述的是对MySQL配置参数 my.ini/my.cnf的详细解析,我们主要是以实例演示的方式来对MySQL配置参数 my.ini/my.cnf的实际操作步骤进行说明,以下就是相关内容的具体描述. 1.获取当前配置参数 要优化MySQL配置参数,首先要了解当前的配置参数以及运行情况.使用下列命令可以获得目前服务器使用的配置参数: 复制代码 代码如下: mysqld –verbose –help mysqladmin variables extended-status –u root

  • Java 负载均衡算法作用详细解析

    目录 前言 轮询算法 随机算法 加权随机算法 加权轮询算法 源地址hash算法 最小请求数算法 前言 负载均衡在Java领域中有着广泛深入的应用,不管是大名鼎鼎的nginx,还是微服务治理组件如dubbo,feign等,负载均衡的算法在其中都有着实际的使用 负载均衡的核心思想在于其底层的算法思想,比如大家熟知的算法有 轮询,随机,最小连接,加权轮询等,在现实中不管怎么配置,都离不开其算法的核心原理,下面将结合实际代码对常用的负载均衡算法做一些全面的总结. 轮询算法 轮询即排好队,一个接一个的轮着

  • Java static关键字详细解析

    目录 static目的 static范围 静态(static)修饰 静态变量 静态方法 静态代码块 静态类 static变量存储在方法区(Method Area) static目的 java中的static关键字主要用于内存管理. static范围 使用范围:java static关键字可以用在变量.方法.代码块和嵌套类中. 作用范围:static关键字属于类,而不是类的实例. 静态(static)修饰 变量.方法:称为类变量/方法.静态变量/方法:修饰变量或方法,表示这个变量/方法属于这个类,

  • SpringBoot快速入门及起步依赖解析(实例详解)

    目录 一.SpringBoot简介 1.1 SpringBoot快速入门 1.1.1 开发步骤 1.1.2 对比 1.1.3 官网构建工程 1.1.4 SpringBoot工程快速启动 1.2 SpringBoot概述 1.2.1 起步依赖 1.2.2 程序启动 1.2.3 切换web服务器 一.SpringBoot简介 SpringBoot 是由 Pivotal 团队提供的全新框架,其设计目的是用来简化 Spring 应用的初始搭建以及开发过程. 使用了 Spring 框架后已经简化了我们的开

  • Mysql中复制详细解析

    1.mysql复制概念 指将主数据库的DDL和DML操作通过二进制日志传到复制服务器上,然后在复制服务器上将这些日志文件重新执行,从而使复制服务器和主服务器的数据保持同步.复制过程中一个服务器充当主服务器(master),而一个或多个其它服务器充当从服务器(slaves).主服务器将更新重新写入二进制日志文件,并维护文件的一个索引以跟踪日志循环.这些日志可以记录发送到从服务器的更新.当一个从服务器连接主服务器时,它通知主服务器.从服务器在日志中读取的最后一次成功更新的位置.从服务器接受从那时起发

  • 远程数据库的表超过20个索引的影响详细解析

    昨天同事参加了一个研讨会,有提到一个案例.一个通过dblink查询远端数据库,原来查询很快,但是远端数据库增加了一个索引之后,查询一下子变慢了. 经过分析,发现那个通过dblink的查询语句,查询远端数据库的时候,是走索引的,但是远端数据库添加索引之后,如果索引的个数超过20个,就会忽略第一个建立的索引,如果查询语句恰好用到了第一个建立的索引,被忽略之后,只能走Full Table Scan了. 听了这个案例,我查了一下,在oracle官方文档中,关于Managing a Distributed

  • MySQL DELETE语法使用详细解析

    以下的文章主要描述的是MySQL DELETE语法的详细解析,首先我们是从单表语法与多表语法的示例开始的,假如你对MySQL DELETE语法的相关内容十分感兴趣的话,你就可以浏览以下的文章对其有个更好的了解. 单表语法: 复制代码 代码如下: DELETE [LOW_PRIORITY] [QUICK] [IGNORE] FROM tbl_name   [WHERE where_definition]   [ORDER BY ...]   [LIMIT row_count] 多表语法: 复制代码

  • Tomcat中的catalina.bat原理详细解析

    前言 本文主要给大家详细解析了关于Tomcat中catalina.bat原理的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. tomcat 的真正启动是在 catalina.bat 设置并启动的.startup.bat 只是找到catalina.bat 然后执行catalina.bat 来启动tomat的.下面我们来分析下catalina.bat 验证CATALINA_HOME 环境变量 验证CATALINA_HOME 设置是否正确,如果不正确,重新设置CATALIN

  • log4j使用详细解析

    简单的说log4j就是帮助开发人员进行日志输出管理的API类库.它最重要的特点就可以配置文件灵活的设置日志信息的优先级.日志信息的输出目的地.日志信息的输出格式 Log4j 除了可以记录程序运行日志信息外还有一重要的功能就是用来显示调试信息. 程序员经常会遇到脱离Java ide环境调试程序的情况,这时大多数人会选择使用System.out.println语句输出某个变量值的方法进行调试.这样会带来一个非常麻烦的问题:一旦哪天程序员决定不要显示这些System.out.println的东西了就只

随机推荐