Vue.js框架入门经典项目TodoMVC

1. 介绍

项目地址：http://todomvc.com/
github模板下载地址：https://github.com/tastejs/todomvc-app-template
可通过git和npm下载。
下载完毕之后主要修改app.js和index.html这两个文件。

2. index.html代码：

<!doctype html>
<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>Template • TodoMVC</title><link rel="stylesheet" href="node_modules/todomvc-common/base.css"><link rel="stylesheet" href="node_modules/todomvc-app-css/index.css"><!-- CSS overrides - remove if you don't need it --><link rel="stylesheet" href="css/app.css"></head><body><section class="todoapp"><header class="header"><h1>todos</h1><input class="new-todo" v-model="inputVal" @keyup.enter="addTodo" placeholder="What needs to be done?" autofocus></header><!-- This section should be hidden by default and shown when there are todos --><section class="main"><input id="toggle-all" class="toggle-all" type="checkbox" @change="selectAll" v-model="isAll"><label for="toggle-all">Mark all as complete</label><ul class="todo-list"><!-- Twhese are here just to show the structure of the list items --><!-- List items should get the class `editing` when editing and `completed` when marked as completed --><!-- <li class="completed"><div class="view"><input class="toggle" type="checkbox" checked><label>Taste JavaScript</label><button class="destroy"></button></div><input class="edit" value="Create a TodoMVC template"></li> --><li @dblclick="changeStatus(index)" v-for="(item,index) in currentTodoList" :class="{completed:item.isCompeleted,editing:currentIndex===index}"><div class="view"><input class="toggle" type="checkbox" v-model="item.isCompeleted" @change="changeOneStatus"><label>{{item.content}}</label><button class="destroy" @click="deleteTodo(index)"></button></div><input @blur="currentIndex=''" v-focus class="edit" value="Rule the web" v-model="item.content"></li></ul></section><!-- This footer should hidden by default and shown when there are todos --><footer class="footer"><!-- This should be `0 items left` by default --><span class="todo-count"><strong>{{leftCount}}</strong> item left</span><!-- Remove this if you don't implement routing --><ul class="filters"><li><a :class="{selected:hash=='#/'}" href="#/">All</a></li><li><a :class="{selected:hash=='#/active'}" href="#/active">Active</a></li><li><a :class="{selected:hash=='#/completed'}" href="#/completed">Completed</a></li></ul><!-- Hidden if no completed items are left ↓ --><button class="clear-completed" @click="clearCompleted">Clear completed</button></footer></section><footer class="info"><p>Double-click to edit a todo</p><!-- Remove the below line ↓ --><p>Template by <a href="http://sindresorhus.com">Sindre Sorhus</a></p><!-- Change this out with your name and url ↓ --><p>Created by <a href="http://todomvc.com">you</a></p><p>Part of <a href="http://todomvc.com">TodoMVC</a></p></footer><!-- Scripts here. Don't remove ↓ --><script src="node_modules/vue/dist/vue.min.js"></script><script src="js/app.js"></script></body>
</html>

3. app.js代码

var vm = new Vue({el: ".todoapp",data: {inputVal: '',todoList: [],isAll: false,currentIndex: '',hash: ''},//默认hash值为'#/'created() {window.addEventListener("load", () => {window.location.hash = "#/";this.hash = "#/";this.todoList=this.getStorage();})//根据本地hash值的改变，改变数据模型中的hash值window.addEventListener("hashchange", () => {this.hash = window.location.hash;})},computed: {//计数leftCount() {return this.todoList.reduce((total, item) => {if (item.isCompeleted) {return total;} else {total += 1;return total;}}, 0)},//根据hash值 改变显示数据currentTodoList() {if (this.hash == "#/") {return this.todoList} else if (this.hash == "#/active") {return this.todoList.filter((item) => {return item.isCompeleted == false;})} else if (this.hash == "#/completed") {return this.todoList.filter((item) => {return item.isCompeleted == true;})} else {return this.todoList}}},//创建自定义属性   聚焦directives: {focus(el) {el.focus()}},methods: {//1.设置本地存储setStorage(todoList){window.localStorage.setItem("list",JSON.stringify(todoList))},//2.读取本地数据getStorage(){return window.localStorage.getItem("list")?JSON.parse(window.localStorage.getItem("list")):[]},//添加数据addTodo() {var obj = {content: this.inputVal,isCompeleted: false}this.todoList.push(obj);this.inputVal = '';this.setStorage(this.todoList);},//删除数据deleteTodo(index) {this.todoList.splice(index, 1);this.setStorage(this.todoList);},//全选/全不选selectAll() {// console.log(this.isAll)this.todoList.forEach((item) => {item.isCompeleted = this.isAll;})this.setStorage(this.todoList);},//编辑状态索引等于鼠标双击索引changeStatus(index) {// console.log(index)this.currentIndex = index;},//删除选中数据clearCompleted() {this.todoList = this.todoList.filter((item) => {return item.isCompeleted == false;})this.setStorage(this.todoList);},//状态改变，本地存储数据跟随改变   true/flasechangeOneStatus(){this.setStorage(this.todoList);}}
})

4. 效果图

Vue.js框架入门经典项目TodoMVC相关推荐

前端《Vue.js从入门到项目实战》PDF课件+《微信小程序实战入门第2版》PDF代码调试
JS进行开发,正如一切的编程语言都立足于电元信号的正负极,即01码,可为什么软件都不采用二进制编码来进行开发呢?这里面牵扯到一个成本的问题,这正是影响项目领导者进行决策的关键因素.Vue项目与原生J ...
[Vue.js 1] 入门基础知识与开发
最近接触的几个项目框架全部用到了Vue.js技术,没办法只能对vuejs进行深入学习,不过可喜的是Vue.js学习路线非常快,上手也是非常快的,所以对于前端开发也是主流的开发框架了.不过其中的js部分 ...
Vue.js 框架从入门到精通，只需要它！
点击蓝字关注我们你还在一行一行低效代码吗?你还在不停地操作 DOM 吗?你的代码还会频繁出现 CSS.Javascript 配置文件冲突吗? Vue3 框架快速解决你的代码低效问题! 01 Vue ...
前端_快速入门Vue.js框架
文章目录快速入门Vue.js框架 0.前言 1.Vue.js框架 1.1.Vue简介 1.2.第一个Vue程序 1.3.el:挂载点 2.Vue指令 2.2.v-html 2.3.v-on 2.4. ...
Vue.js快速入门+项目实战（源码）
Vue.js电影网站项目 github 链接(如果觉得有用记得start哦~): 项目源代码链接目录前言安装 Vue.js 1.Vue.js主要特性 2.Vue.js实例 3.Vue.js路由 ...
Vue.js框架简介（1）
1.Vue.js框架简介 Vue(读音 /vju:/,发音类似于 view)是一套用于构建用户界面的渐进式的JavaScript框架. 1.1.为什么要学习Vue.js 什么是Vue.js Vue.j ...
前端Vue.js框架是什么？有哪些特点？
前端Vue.js框架是什么?有哪些特点?Vue.js是一个前端框架,用于构建用户界面的渐进式框架.在Vue中一个核心的概念是让用户不再操作DOM元素解放了用户的双手,让程序员可以更多的时间去关注业务逻 ...
从零吃透 Vue.js 框架，这里全部有！
点击蓝字关注我们你还在一行一行低效代码吗?你还在不停地操作 DOM 吗?你的代码还会频繁出现 CSS.Javascript 配置文件冲突吗? Vue3 框架快速解决你的代码低效问题! 01 Vue ...
前端-Vue.js从入门到精通基础笔记（理论+实操+知识点速查）
#[2022.3]尚硅谷Vue.js从入门到精通基础笔记(理论+实操+知识点速查) 前言本文完全基于参考资料:加工整理而成,包括其代码,案例,资源等.前置知识是学习尚硅谷的视频教程,本文配合其教程 ...

Vue.js框架入门经典项目TodoMVC

1. 介绍

2. index.html代码：

3. app.js代码

4. 效果图

Vue.js框架入门经典项目TodoMVC相关推荐

最新文章

热门文章