（22）Vue.js 综合案例：TodoMVC
一、TodoMVC介绍
TodoMVC 是一个经典项目，让开发者快速实践到框架开发方式。
官网地址：http://todomvc.com/
TodoMVC一句话评价：功能完备不冗余，多样实现引深思。
其实就说的是我们可以再内容中去使用到Vue.js的语法，但不会为了去练习语法而练习语法，再不同的场景体会语法带来的不同效果，对语法进行更深刻的理解。
二、TodoMVC准备工作
• 从 github 克隆项目模板。
• git clone https://github.com/tastejs/todomvc-app-template.git
• 进入项目目录，安装项目依赖
• cd 项目目录
• npm install
• 安装 Vue.js
• npm install vue
通过服务的方式打开网页，我们打开控制台发现，有404资源未找到的错误。
解决404报错问题
我们将base.js文件引入的地方删掉，就可以啦！
三、TodoMVC需求分析
一、事项列表展示
• 有事项的情况
• 没有事项的情况
• 引入 vue.js 文件，创建 Vue 实例设置挂载元素。
引入未压缩的vue.js文件，方便我们使用DevTools插件调试。压缩的vue.js文件无法使用该插件。
• 在 data 中设置 todos 存储初始数据。
app.js文件
(function (window) {'use strict';// Your starting point. Enjoy the ride!new Vue({el: '#app',data: {todos: [//todos用于存储所有事项信息{ id: 1, title: '示例内容1', completed: true},{ id: 2, title: '示例内容2', completed: false},{ id: 3, title: '示例内容3', completed: false},]}})})(window);
设置事项视图：
index.html文件
<li v-for="todo in todos" :key="todo.id" :class="{completed:todo.completed}"><div class="view"><!-- 选框 --><input class="toggle" type="checkbox" v-model="todo.completed"><label>{{ todo.title }}</label><button class="destroy"></button></div><input class="edit" value="Rule the web"> </li>
设置有无事项时的显示状态：
index.html文件
<section class="main" v-show="todos.length">...</section> <footer class="footer" v-show="todos.length">...</footer>
二、状态栏信息展示
需要实现的功能为：• 个数展示 • 单位处理
• 个数展示
app.js文件
computed: { //用于获取待办事项个数remainning() {//return this.todos.filter(todo => !todo.complted).length;return this.todos.filter(function (todo) {return !todo.completed;})}}
index.html文件
<footer class="footer" v-show="todos.length"><!-- This should be `0 items left` by default --><span class="todo-count"><strong>{{ remaining }}</strong> item left</span><!-- Remove this if you don't implement routing --><ul class="filters"><li><a class="selected" href="#/">All</a></li><li><a href="#/active">Active</a></li><li><a href="#/completed">Completed</a></li></ul><!-- Hidden if no completed items are left ↓ --><button class="clear-completed">Clear completed</button> </footer>
• 单位处理（方法一）
app.js文件
methods: {//单位处理，当待办事项为1时，显示item，当为除了1以外其他数字时为items//注意：0也是itemspluralize: function () {return this.remaining === 1 ? 'item' : 'items';}}
index.html文件
<footer class="footer" v-show="todos.length"><!-- This should be `0 items left` by default --><span class="todo-count"><strong>{{ remaining }}</strong> {{ pluralize() }} left</span><!-- Remove this if you don't implement routing --><ul class="filters"><li><a class="selected" href="#/">All</a></li><li><a href="#/active">Active</a></li><li><a href="#/completed">Completed</a></li></ul><!-- Hidden if no completed items are left ↓ --><button class="clear-completed">Clear completed</button> </footer>
• 单位处理（方法二）
app.js文件
methods: {//单位处理，当待办事项为1时，显示item，当为除了1以外其他数字时为items//注意：0也是itemspluralize: function (word) {return word + (this.remaining === 1 ? '' : 's');}}
index.html文件
<footer class="footer" v-show="todos.length"><!-- This should be `0 items left` by default --><span class="todo-count"><strong>{{ remaining }}</strong> {{ pluralize() }} left</span><!-- Remove this if you don't implement routing --><ul class="filters"><li><a class="selected" href="#/">All</a></li><li><a href="#/active">Active</a></li><li><a href="#/completed">Completed</a></li></ul><!-- Hidden if no completed items are left ↓ --><button class="clear-completed">Clear completed</button> </footer>
三、事项状态切换
需要实现的功能为：• 单个事项切换 • 多个事项切换
单个事项切换通过 v-model 的设置已经实现了，体会双向数据绑定的好处。
多个事项切换分为 2 部分功能：• 单个事项操作 • 全部切换选框操作
单个事项切换会导致 toggle-all 状态变化，我们可以通过remaining 来进行判断：
四、TodoMVC功能实现
（22）Vue.js 综合案例：TodoMVC相关推荐
- [Vue.js] 深入 -- 案例 - 购物车
案例 - 购物车 按照组件化方式实现业务需求 根据业务功能进行组件化划分 标题组件(展示文本) 列表组件(列表展示.商品数量变更.商品删除) 结算组件(计算商品总额) 功能实现步骤 实现整体布局和样式 ...
- [Vue.js] 基础 -- 案例之Tab选项卡
实现效果 实现步骤 实现静态UI效果 用传统的方式实现标签结构和样式 基于数据重构UI效果 将静态的结构和样式重构为基于Vue模板语法的形式 处理事件绑定和js控制逻辑 声明式编程 模板的结构和最终显 ...
- Vue.js 入门案例
理解MVVM模型 <!DOCTYPE html> <html lang="en"> <head><meta charset="U ...
- vue.js 入门案例，双向绑定实现任务清单
vue.js 开发环境安装成功. http://localhost:8080/ 使用vue.js双向绑定实现类似这样一个任务清单页面. 下面是我的学习笔记. //app.vue页面 <templ ...
- Vue.js小案例(2)
即时搜索 这个例子主要应用了vue.js的自定义过滤器,可以通过 Vue.filter() 注册一个全局过滤器,具体用法可以参考 这里,vue.js也提供了一些 内置过滤器. CSS代码: [v-cl ...
- vue ---- 指令综合案例
代码地址: https://codechina.csdn.net/weixin_44235759/vue-brand-list-demo 案例分析: 列表如何渲染 数据源 list: [{ id: 1 ...
- vue ---- 组件综合案例（购物车案例）
获取数据 装包npm i axios -S,在app.vue中导入axios APP组件中获取数据的方法,和 生命周期函数 methods: {//封装请求列表数据的方法async initCarLi ...
- 【服务端渲染】NuxtJs 综合案例
前言 笔记来源:拉勾教育 大前端高薪训练营 阅读建议:建议通过左侧导航栏进行阅读 Nuxt.js 综合案例 基本介绍 案例名称:RealWorld 一个开源的学习项目,目的就是帮助开发者快速学习新技能 ...
- [Vue.js] 基础 -- 综合案例 -- 图书管理
综合案例 – 图书管理 补充知识(数组相关API) 变异方法(修改原有数据) push() pop() shift() unshift() splice() sort() reverse() 替换数组 ...
最新文章
- Xamarin iOS开发中的编辑、连接、运行
- word样式基准_「word技巧」简单的排版技巧—给word文档添加各种样式边框线
- Controller向View传值方式总结
- Intel 64/x86_64/IA-32/x86处理器 - SIMD指令集 - MMX技术(7) - 状态清除指令 小结
- ubuntu 安装搜狗输入法（解决部分ubuntu安装完没有键盘选择栏）
- POJ - 3190
- CSS 用户界面样式
- Observer模式（观察者设计模式）
- 单目深度估计方法：算法梳理与代码实现
- 如何用div隐藏table中的某几行呢?
- Windows下效率必备软件
- Matlab求特征值和特征向量 + find函数的基本简单用法
- Hadoop HA架构图
- springboot中格林尼治时间转指定格式时间
- 青龙面板--京东试用申请
- 选队长游戏（Java）
- C语言中typedef的用法
- 神经网络（NN）网络构建及模型算法介绍
- win10无法安装完成若要在此计算机上,windows10无法完成安装怎么解决_win10提示windows无法完成安装的解决教程...
- [Spark进阶]--Spark配置参数说明