vue 综合案例todos----重要

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" id="app"><header class="header"><h1>todos</h1><input class="new-todo" placeholder="What needs to be done?" autofocus v-on:keydown.enter="add" v-my-focus></header><!-- This section should be hidden by default and shown when there are todos --><template v-if="todos.length"><section class="main"><!--   <input id="toggle-all" class="toggle-all" type="checkbox" v-on:change="handleToggleAllChange" v-bind:checked="toggleAll"> --><input id="toggle-all" class="toggle-all" type="checkbox" v-model="toggleAll"><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 --><!-- 任务项有三种状态已完成 completed未完成 无样式编辑  edit --><li v-bind:class="{completed: item.completed, editing: currentEditing === item ? true : false}" v-for="(item,index) in filterTodos()"><div class="view"><input class="toggle" type="checkbox" v-model="item.completed"><!-- 注册双击事件 dblclick--><label v-on:dblclick="dblclick(item)">{{ item.title }}</label><button class="destroy" v-on:click="remove(index)"></button></div><input class="edit" v-bind:value="item.title" v-on:keyup.enter="keyupSave(item, index, $event)" v-on:blur="keyupSave(item, index, $event)" v-on:keyup.esc="escDontSave(item)" v-todo-focus="currentEditing === item"></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>{{ count }}</strong> item left</span><!-- Remove this if you don't implement routing --><ul class="filters"><li><a v-bind:class="{selected: todosText===''}" href="#/">All</a></li><li><a v-bind:class="{selected: todosText==='active'}" href="#/active">Active</a></li><li><a v-bind:class="{selected: todosText==='completed'}" href="#/completed">Completed</a></li></ul><!-- Hidden if no completed items are left ↓ --><!-- 只要有一个被选中就显示 --><button class="clear-completed" v-if="todos.some(item => item.completed)" v-on:click="clearCompleted">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/todomvc-common/base.js"></script> --><script src="node_modules/vue/dist/vue.js"></script><script src="js/app.js"></script></body>
</html>

app.js文件

;(function () {var todos = [{id: 1,ttle: '吃饭'},{id: 2,ttle: '睡觉'},{id: 3,ttle: '打豆豆'}]// 自定义指令实现刷新自动聚焦// 自定义聚焦指令不能放在bind钩子函数里，不会执行Vue.directive('my-focus', {// bind (el) {//    el.focus()// },inserted (el) {el.focus()}})// 自定义指令实现双机自动聚焦Vue.directive('todo-focus', {update (el) {el.focus()},})//var的形式在web端是不能访问的，需要挂载到window上window.app = new Vue({el: '#app',data: {todos: JSON.parse(window.localStorage.getItem('todos') || '[]'),/*message: 'jj'*/currentEditing: '',todosText: ''},watch: {//监视data里面某个数据的变化，只要一变化就执行，变化时做业务定制处理//引用类型只能监视一层，无法监视内部成员的变化todos: {//当监视到todos改变的时候会自动调用handler方法//监视的谁val就是谁//oldVal是变化之后的值handler (val, oldVal) {window.localStorage.setItem('todos', JSON.stringify(val))},//深度监视，只有这样才能监视到对象里面属性的变化deep: true,//无论变化与否，上来就执行一次immediate: true}},methods: {add: function (e) {//不用双向绑定，这个回车事件是由input表单绑定的，事件对象指向表单//事件对象指向绑定这个事件的对象//e.target.value指向表单输入的内容console.log(e.target.value)// 0、注册按下回车事件// 1、获取文本框内容var value = e.target.value.trim()// 2、数据校验if (!value) {return false }// 3、添加到todos里面var member = {id: this.todos.length ? this.todos[this.todos.length - 1].id + 1 : 1,title: value,completed: true}this.todos.push(member)  e.target.value = ''},handleToggleAllChange: function (e) {var change = e.target.checkedthis.todos.forEach(function (item, i) {item.completed = change})},remove: function (id) {this.todos.splice(id, 1)},dblclick: function (item) {this.currentEditing = item},keyupSave: function (item, index, e) {var value = e.target.value.trim()if (!value.length) {//当文本框中的内容为空，敲回车时删除这个文本框this.todos.splice(index, 1)   } else {// 当文本框不为空按enter键时，保存修改的值，并且清除这个文本框item.title = valuethis.currentEditing = null}},escDontSave: function (item) {console.log('111')this.currentEditing = null},clearCompleted: function () {// for循环实现// for(var i = 0; i < this.todos.length; i++) {//     if (this.todos[i].completed) {//        console.log(1)//        this.todos.splice(i, 1)//       //前面的被删了，后面的所有元素索引要减1，因为前面的被删了，后面的索引都变了//      i--//   }// }// 错误方法，不能再foreach里面删除数组元素，因为删除一个后面的索引变了// this.todos.forEach(function (item, i) {//     if (item.completed) {//         todos.splice(i, 1)//    }   // })// 简单粗暴的方法,数筛选，给todos重新赋值，把符合条件的放进去this.todos = this.todos.filter(item => !item.completed)  },// 通过hash的值来改变要渲染的内容filterTodos: function () {switch(this.todosText) {case 'active' :return this.todos.filter(t => !t.completed)break;case 'completed' :return this.todos.filter(t => t.completed)break;default:return this.todosbreak}}},//computed为计算行为的属性，这里面的方法不管调用几次，都只会执行一次//因为执行一次过后结果被存储起来了//本质上是方法，但是只能当属性来调用，就像data里面参数调用的方法一样computed: {//一个函数作为get方法，被调用时默认执行get方法//简写方式// count () {//    return this.todos.filter(item => !item.completed).length// }// 两个方法的方式//app.count 执行get方法//app.count = 124 执行set方法，但用get方法访问时，它的值没变count: {get () {return this.todos.filter(item => !item.completed).length},set () {console.log('set方法被调了！')}},// toggleAll: {//   get () {//      return todos.every(t => t.completed)//  }// }// 在computed里面实现全部选项的选中和不选中toggleAll: {//计算属性知道它依赖了todos，当todos发生变化时，计算属性会自动重新计算get () {return todos.every(t => t.completed)},// 在set里面访问this.toggleAll会调用这个方法的get方法set () {var checked = !this.toggleAll// 有一个没选中，点击时就让它全中，如果已经全中了，点击就让它全不中this.todos.forEach(item => {item.completed = checked})}}}}) window.onhashchange = function () {app.todosText = window.location.hash.substr(2)}onhashchange()})()

vue 综合案例todos----重要相关推荐

[Vue.js] 基础 -- 综合案例 -- 图书管理
综合案例 – 图书管理补充知识(数组相关API) 变异方法(修改原有数据) push() pop() shift() unshift() splice() sort() reverse() 替换数组 ...
黑马JavaWeb全功能综合案例（element-ui+mybatis+Vue+ajax）
目录 1,功能介绍 2,环境准备 2.1.项目结构 2.2 创建表 3.功能实现 3.1.查询所有功能后端实现前端实现 3.2.添加功能后端实现前端实现 3.3.servlet优化代码优化 ...
【服务端渲染】NuxtJs 综合案例
前言笔记来源:拉勾教育大前端高薪训练营阅读建议:建议通过左侧导航栏进行阅读 Nuxt.js 综合案例基本介绍案例名称:RealWorld 一个开源的学习项目,目的就是帮助开发者快速学习新技能 ...
WEB综合案例黑马面面 day04 用户与角色绑定功能登录用户菜单控制和权限效验
WEB综合案例 day04 用户与角色绑定功能登录用户菜单控制和权限效验 1. 用户与角色思路: 根据用户去找角色的信息,然后需要用到两个表的查询,在前端页面显示信息的时候用for:each通过遍 ...
VUEElement综合案例
VUE&Element 今日目标: 能够使用VUE中常用指令和插值表达式能够使用VUE生命周期函数 mounted 能够进行简单的 Element 页面修改能够完成查询所有功能能够完成添 ...
Web核心技术之Element组件库学习及综合案例
2,Element Element:是饿了么公司前端开发团队提供的一套基于 Vue 的网站组件库,用于快速构建网页. Element 提供了很多组件(组成网页的部件)供我们使用.例如超链接.按钮.图 ...
Mysql深入优化（四）--- MySQL常用工具、日志、主从复制、综合案例
序列号内容链接 1 Mysql深入优化 (一) ----- 索引.视图.存储过程.触发器 https://blog.csdn.net/qq_43061290/article/details/125 ...
Django综合案例之英雄人物1
用django + Vue实现游戏英雄人物的管理系统,系统分为djangoAPI 和 Vue页面 django API 实现流程如下所示: 创建django项目,创建APP 在指定目录下cmd回车 ...
2021年大数据Hive（十二）：Hive综合案例！！！
全网最详细的大数据Hive文章系列,强烈建议收藏加关注! 新文章都已经列出历史文章目录,帮助大家回顾前面的知识重点. 目录系列历史文章前言 Hive综合案例一.需求描述二.项目表的字段三.进 ...
CSS 背景(background)（背景颜色color、背景图片image、背景平铺repeat、背景位置position、背景附着、背景简写、背景透明、链接导航栏综合案例）
1. 背景颜色(color) background-color:颜色值; 默认的值是 transparent 透明的示例代码: <!DOCTYPE html> <html lang ...

vue 综合案例todos----重要

vue 综合案例todos----重要相关推荐

最新文章

热门文章