Vue.js经典项目：TodoMvc

1、github拉取只含静态页面的项目

2、app.js文件

(function (Vue) {const STORAGE_KEY='todo-items';const itemStorage={//获取数据fetch:function(key){return JSON.parse(localStorage.getItem(key)||'[]'); //json字符串转数组返回},//保存数据save:function(key,items){localStorage.setItem(key,JSON.stringify(items)); //json字符串}};const items = [{id: 1,content: "C#",isCompleted: false}, {id: 2,content: "Java",isCompleted: false}, {id: 3,content: "Python",isCompleted: false}];//注册全局指令Vue.directive('input-focus', {inserted(el, binding) {el.focus();},update(el, binding) {if (binding.value) {el.focus();}}});var vm = new Vue({el: "#todoapp",data: {title: 'todos',//items, //ES6对象属性的简写 items:itemsitems:itemStorage.fetch(STORAGE_KEY),currentItem: null,filterStatus: 'all'},//侦听器watch:{//items:function(newItems,oldItems){};//数组监听//深度监听 监听数组中对象属性是否发生变化 deep:trueitems:{deep:true,handler:function(newItems,oldItems){//处理函数itemStorage.save(STORAGE_KEY,newItems);//监听到变化则保存到本地}}},//计算属性computed: {filterItems() {switch (this.filterStatus) {case 'active':return this.items.filter(item => !item.isCompleted);break;case 'completed':return this.items.filter(item => item.isCompleted);break;default:return this.items;break;}},toggleAll: {get() { //必须有返回值return this.remaining === 0;},set(newStatus) {this.items.forEach(item => item.isCompleted = newStatus);}},//剩余未完成的数量remaining() { //remaining：function()简写//const unCompletedItems=this.items.filter(function(item){//  return !item.isCompleted;//});//return unCompletedItems.length;return this.items.filter(item => !item.isCompleted).length;},itemOrItems() {if (this.remaining === 1) {return 'Item';}else {return 'Items';}},hasCompletedItem() {return this.items.some(item => item.isCompleted);}},methods: {toEdit(item) {this.currentItem = item;},cancleEdit() {this.currentItem = null;},finishedEdit(item, index, event) {const newContent = event.target.value;if (!newContent) {this.removeItem(index);}item.content = newContent;this.currentItem = null;},addItem(event) {const content = event.target.value.trim();let maxId = Math.max.apply(Math, this.items.map(item => item.id));//对象组id最大值if (content.length > 0) {this.items.push({id: maxId + 1,content,isCompleted: false});event.target.value = "";}},removeItem(index) {this.items.splice(index, 1);},clearAll() {this.toggleAll = false;},addClass(e) {let element = e.currentTarget;if (!element.classList.contains('editing')) {element.classList.toggle('editing');}}}});//路由hash值改变时调用window.onhashchange = () => {const hash = window.location.hash.substr(2) || 'all';vm.filterStatus = hash;};//刷新页面的时候调用window.onhashchange();
})(Vue);

3、index.html页面vuejs绑定

<!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" id="todoapp"><header class="header"><h1>{{title}}</h1><!--回车监听--><input v-on:keyup.enter="addItem" class="new-todo" placeholder="What needs to be done?" v-input-focus></header><!-- This section should be hidden by default and shown when there are todos --><template v-if="items.length"><section class="main"><input v-model="toggleAll" id="toggle-all" class="toggle-all" type="checkbox"><label for="toggle-all">Mark all as complete</label><ul class="todo-list"><!-- These 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 v-for="(item,index) in filterItems"  @dblclick="toEdit(item)" v-bind:class="{completed:item.isCompleted,editing:item===currentItem}"><div class="view"><input class="toggle" type="checkbox" v-model="item.isCompleted"><label>{{item.content}}</label><button class="destroy" v-bind:value="item.id" @click="removeItem(index)"></button></div><input v-input-focus="item===currentItem" class="edit" v-bind:value="item.content" @keyup.esc="cancleEdit" @keyup.enter="finishedEdit(item,index,$event)" @blur="finishedEdit(item,index,$event)"></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>{{remaining}}</strong> {{itemOrItems}} left</span><!-- Remove this if you don't implement routing --><ul class="filters"><li><a :class="{selected:filterStatus==='all'}" href="#/">All</a> </li><li><a :class="{selected:filterStatus==='active'}" href="#/active">Active</a></li><li><a :class="{selected:filterStatus==='completed'}" href="#/completed">Completed</a></li></ul><!-- Hidden if no completed items are left ↓ --><button v-show="hasCompletedItem" @click="clearAll" class="clear-completed">Clear completed</button></footer></template></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.js"></script><script src="node_modules/todomvc-common/base.js"></script><script src="js/app.js"></script>
</body></html>

Vue.js经典项目：TodoMvc相关推荐

Vue.js经典开源项目汇总
Vue.js经典开源项目汇总 Vue是什么? Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计 ...
【前端】Vue.js经典开源项目汇总
Vue.js经典开源项目汇总原文链接:http://www.cnblogs.com/huyong/p/6517949.html Vue是什么? Vue.js(读音 /vjuː/, 类似于 view) ...
2018最新vue.js实战项目：美团外卖平台
vue.js实战项目:美团外卖平台第1章课程简介 1-1 课程简介 1-2 课程安排第2章 Vue.js介绍 2-1 Vuejs介绍-近年来前端开发趋势 2-2 Vuejs介绍-MVVM框架 2 ...
美团外卖平台vue.js实战项目(完整)
vue.js实战项目:美团外卖平台第1章课程简介 1-1 课程简介 1-2 课程安排第2章 Vue.js介绍 2-1 Vuejs介绍-近年来前端开发趋势 2-2 Vuejs介绍-MVVM框架 2 ...
火速拿来用！对比 12,000 个 Vue.js 开源项目发现最实用的 TOP45！
在过去一年里,前端开发发展迅速,前端工程师的薪资亦是水涨船高.2019 更是热度不减,而作为近年来尤为热门的前端框架,Vue.js 自是积累了大量关注.本文将为你介绍 2019 年最值得关注的 45 ...
vue.js 构建项目_使用Vue.js和AWS Amplify构建Chatbot
vue.js 构建项目 Over the last few years, chatbots have exploded in popularity. It makes sense that busin ...
vue.js的项目实战 1
vue.js的项目实战需求背景组件库是做UI和前端日常需求中经常用到的,把一个按钮,导航,列表之类的元素封装起来,方便日常使用,调用方法只需直接写上或者这样的代码就可以,是不是很方便呢,接下来我们 ...
python django vue_Django+Vue.js构建项目
本文主要讲述如何从0开始,用Django和Vue.js构建一个项目.文章提要:Django与vue.js整合开发原理从头新建一个Django项目新建一个前端页面,使用vue应用在Django中设 ...
vue.js的项目实战
欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由蔡述雄发表于云+社区专栏需求背景组件库是做UI和前端日常需求中经常用到的,把一个按钮,导航,列表之类的元素封装起来,方便日常使用, ...

Vue.js经典项目：TodoMvc

Vue.js经典项目：TodoMvc相关推荐

最新文章

热门文章