【IMWeb训练营作业】vue.js
来源:互联网 发布:霍尼韦尔监控软件下载 编辑:程序博客网 时间:2024/05/22 14:10
这几天跟着腾讯课堂里面的一门web前端课程(Vus.js框架)学习,自己也有一些收获,这篇文章主要是训练营的一个小作业。
作业大概要求是:用Vue.js框架完成一个任务列表的添加,修改以及删除。本文的Vue.js版本为v2.2.0,在Vue官网下载的。代码主要是跟着老师视频敲的,自己加了一些注释。
下面是html页面todos.html的代码。
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" href="index.css"><script src="vue.js"></script></head><body><div class="page-top"><div class="page-content"><h2>任务计划列表</h2></div></div><div class="main"><h3 class="big-title"> 添加任务: </h3><input type="text" class="task-input" placeholder="例如: 学习javaWeb; 提示:+回车即可添加任务" v-model="todo" v-on:keyup.13="addTodo()" /><ul class="task-count" v-show="list.length"><li>{{noCheckedLength}}个任务未完成</li><li class="action"><a :class="{active:visibility === 'all'}" href="#all">所有任务</a><a :class="{active:visibility === 'unfinished'}" href="#unfinished">未完成的任务</a><a :class="{active:visibility === 'finished'}" href="#finished">完成的任务</a></li></ul><h3 class="big-title">任务列表: </h3><div id="" class="tasks"><span id="" class="no-task-tip" v-show="!list.length">还未添加任何任务</span><ul class="todo-list"><li class="todo" :class="{completed:item.isChecked,editing:item===edtorTodos}" v-for="item in filteredList"><div class="view"><input class="toggle" type="checkbox" v-model="item.isChecked" /><label @dblclick="edtorTodo(item)">{{item.title}}</label><button class="destroy" @click="deleteTodo(item)"></button></div><input v-focus="edtorTodos===item" class="edit" type="text" v-model="item.title" @blur="edtorTodoed(item)" @keyup.13="edtorTodoed(item)" @keyup.esc="cancleTodo(item)" /></li></ul></div></div><!--注意此处的app.js不能放在上边--><script src="app.js"></script></body></html>下面是app.js的代码
//存取localStorage中的数据var store = {save(key, value) {localStorage.setItem(key, JSON.stringify(value));},fetch(key) {return JSON.parse(localStorage.getItem(key)) || [];}}//取出所有的值var list = store.fetch("miaov-class");//下面是过滤器,过滤的时候有三种情况 all finished unfinishedvar filter = {all: function(list) {return list;},finished: function(list) {return list.filter(function(item) {return item.isChecked;})},unfinished: function(list) {return list.filter(function(item) {return !item.isChecked;})}}var vm = new Vue({el: ".main",data: {list: list,todo: "",edtorTodos: '', //记录正在编辑的数据beforeTitle: '', //记录正在编辑的数据的titlevisibility: "all" //通过这个属性值的变化对数据进行筛选},watch: {//监控list这个属性,当这个属性对应的值发生变化就会执行函数list: {handler: function() {store.save("miaov-class", this.list);},deep: true//表示深度监控list}},computed: {noCheckedLength: function() {return this.list.filter(function(item) {return !item.isChecked}).length},filteredList: function() {//找到过滤函数就返回过滤后的数据,如果没有就返回所有数据return filter[this.visibility] ? filter[this.visibility](list) : list;}},methods: {addTodo() { //添加任务this.list.push({title: this.todo,isChecked: false});this.todo = '';},deleteTodo(todo) { //删除任务var index = this.list.indexOf(todo);this.list.splice(index, 1);},edtorTodo(todo) { //编辑任务console.log(todo);//编辑任务的时候,记录一下编辑这条任务的title,方便在取消编辑的时候重新给之前的title赋值this.beforeTitle = todo.title;this.edtorTodos = todo;},edtorTodoed(todo) { //编辑任务成功this.edtorTodos = '';},cancleTodo(todo) { //取消编辑任务todo.title = this.beforeTitle;this.boforeTitle = '';//让div显示出来,input隐藏this.edtorTodos = '';}},directives: {"focus": {update(el, binding) {if(binding.value) {el.focus();}}}}});function watchHashChange() {var hash = window.location.hash.slice(1);vm.visibility = hash;}watchHashChange();window.addEventListener("hashchange", watchHashChange)
效果图如下所示:
0 0
- 【IMWeb训练营作业】Vue.js便签
- 【IMWeb训练营作业】vue.js
- Vue.js 第一发【 todo list (IMWeb训练营作业)】
- IMWeb训练营作业-Vue.js-select下拉菜单
- [IMWeb训练营作业] Vue.js 仿今日头条
- 【IMWeb训练营作业】【Vue】TodoList
- 【IMWeb训练营作业01 vue todos】
- IMWeb训练营作业-----Vue+Bootstrap留言板
- 【IMWeb训练营作业】vue demo Todolist
- 【IMWeb训练营作业】--Vue-TODOList
- IMWeb训练营作业--VUE练习,ToDoList
- 【IMWeb训练营作业】vue-Todolist
- 【IMWeb训练营作业】:Vue清单应用
- 【IMWeb训练营作业】vue todoList
- 【IMWeb训练营作业】Vue TodoList Demo
- 【IMWeb训练营作业】 vue练习-todoList
- 【IMWeb训练营作业】Vue Select Demo
- 【IMWeb训练营作业】Vue组件
- 《Node.js入门》Windows 7下Node.js Web开发环境搭建总结笔记
- 【IMWeb训练营作业】-Todo List
- Unity3D 从入门到放弃 ——巡逻兵 观察者模式
- ArcSDE10.1+Oracle数据库环境配置教程(1)
- hihocoder 1284
- 【IMWeb训练营作业】vue.js
- jquery.bootstrap.wizard 动态添加li后渲染问题
- Go语言文件操作
- 青蛙过河 (sdut oj)
- Excel 正则表达式提取值
- Linux学习<二> 十三单元
- C++的静态函数
- Java代码bi邮箱验证,找回密码
- Android之路——开发环境变更:WIN10、AndroidStudio