vue 小练习之 todos(土豆丝)
第二天
TODOMVC
一 : 准备工作
vue-TodoMVC
演示效果 :
当前任务:敲代码、视频、游戏
下载模板地址
git clone https://github.com/tastejs/todomvc-app-template.git
安装依赖包 :
npm i
二 : 配置 vue
安装 vue :
npm i vue
导入 vue :
<script src="./node_modules//vue/dist/vue.js"></script>
在
index.html
里的app.js
导入之前导入,因为 app.js 里 就要用到 vue 了实例化 vue :在
app.js
中创建 vue 示例,并设置好边界el:'#app'
找到 index.html ,给 section 标签添加一个 id
测试 vue :
data 中随便来一个 msg 看能不能显示到视图中
三: 列表渲染
todoList 数组里面都是对象
id name done
id : (唯一标识 ) 删除需要 name : (名称) 展示需要done : (是否完成任务) 选中状态需要
去掉线 :
:class="{ completed : item.done }"
多选框选中状态 :
v-model='item.done'
四 : 添加任务
/*** 添加任务*/addTodo( e ) {console.log('添加任务',this.todoName); // 0. 判断不能为空if (this.todoName.trim() === '') {return;} // 1. 添加任务if (e.keyCode === 13) {this.todoList.push({id : 4,name : this.todoName,done:false})//2. 清空文本框内容this.todoName = ''} }
五 : 删除任务
传 id,过滤不是 id 的
this.todoList = this.todoList.filter(item => item.id != id)
六 : 编辑任务 (难点)
画图
三步 :
在
data
中存一个数据 :editId
, 记录选中的文本框:class = {editing: item.id === editId }
判断 选中的是哪一个,是选一个都返回true, 显示编辑状态双击 :
@dblclick="editTodo(item.id)"
在editTodo 函数里 保存选中的id
this.editId = id
回车 : 编辑状态消除 : this.editId = -1
Vue中数据更新的特点:只要Vue中的数据发生改变,页面中所有的指令和表达式都会被重新计算一次
七 : 按键修饰符
记住 keyCode 太麻烦了
只有在键盘事件中生活效, (keydown keypress keyup)
语法 : @keyup.enter='事件函数'.enter 就是一个按键修饰符,意思就是当按回车的时候,事件才会被触发
@keyup.13 也可以,但是 keyCode 也是要记住的
完善 TodoMVC + 按键修饰符
八 : v-if 和 v-show
代码
<h1 v-if='isShow'>我是h1 v-if</h1> <h1 v-show='isShow'>我是h1 v-show</h1>
异同点
v-if 和 v-show 的异同点 1. 相同点 : 可以切换元素的显示与隐藏 2. 不同点 : 切换显示和隐藏的实现不同 v-if : 显示:创建节点 隐藏: 删除节点 v-show : 显示: display:block 隐藏 : display:none 3. 使用场景 : v-if因为要不断的创建和删除来切换显示与隐藏 ,所以性能不高 v-if : 切换次数不频繁的时候, v-show : 切换次数频繁的时候
完善 TodoMVC + v-show
九 : Footer 的显示与隐藏
直接写
v-show="todoList.length > 0"
封装到一个函数里
组件 :
v-show="isFooter()"
// 代码显示 isFooterShow() { // 只要 vue里的数据发生了变化, 页面中所有的指令和表达式都会重新计算 // 所以只要文本框里的内容发生改变,.todoName也会发送改变,这里就会不断的打印,,性能不好 console.log('改变了');return this.todoList.length > 0 }
有问题
3.1 只要 vue 里的数据发生了变化, 页面中所有的指令和表达式都会重新计算3.2 所以只要文本框里的内容发生改变,.todoName 也会发送改变,这里就会不断的打印,,性能不好3.3 我们要做的是 只要数组列表的个数改变才会影响底部的变化, 文本不管内容文字再多都不应该影响底部的变化3.4 下面需要
计算属性
十 : 计算属性 computed
计算属性其实就是一个属性
说明 : 计算属性只跟随相关的数据变化而变化 ,解决底部显示隐藏问题,
怎么使用?
在 computed 里面
写起来像一个方法
用起来像一个属性
特点 :
计算属性一定要有返回值, 返回的值,就会标签要展示的内容
计算属性可以使用data里之前已知的值
(重要) 只要 计算属性
相关的数据
发生了变化,计算属性会重新计算
(说一下 :) num1就是totalNum计算属性的相关属性,所以num1变了,计算属性会重新计算,
但是num2不是相关的属性,所以不管你num2怎么变,计算属性都不会重新计算
注意点 :
4.1. 一定要有返回值
4.2. 用起来的时候,不能当方法用,因为它本来就是一个属性
4.3. 计算属性(computed里面的属性) 不能和 data里的属性重名
什么时候使用 计算属性?
根据已知的值,得到一个新值
并且 , 新值只想跟相关的数据(已知的值)的变化而变化 (实时更新)
案例 : 计算器
num1 <input type="text" v-model="num1" /> + num2 <input type="text" v-model="num2" /> = <span>{{ num3 }}</span><hr /> <input type="text" v-model="test" />
完善 TodoMVC + 计算属性 + 底部显示与隐藏 / 左边的剩余未完成数 / 右边清除完成按钮显示与隐藏
十一 : key
说明 :
Vue 中推荐, 在使用 v-for 的时候,添加 key 属性
看官网
介绍 就地复用
<!-- 显示组件 --> <p v-for="(item,index) in list" :key="index">{{ item.name}} <input type="text" /> </p> <!-- 数据 --> data: { list : [ { id : 1, name : '老罗' },{ id : 2, name : '涛涛' }, { id : 3, name : '聪聪' } ]} <!-- 演示 --> vm.list.unshift({id:4,name:'马哥'})
怎么使用 key
如果数组的元素是一个对象 : 使用对象里固定属性,唯一
一般情况下,对象里都有 id, 99%都是取
item.id
如果数组的元素是一个简单类型,不是一个对象, 就可以取索引作为 key
语法 :
:key='item.id'
以后,写了
v-for
之后,立马写好:key
完善 TodoMVC + key
十二 : 其他指令 v-else-if 和 v-else
v-else : 两种情况的
<h1 v-if="num > 40">第一个</h1> <h1 v-else>第三个</h1>
v-else-if : 三种以上情况
<h1 v-if="num >= 40">第一个</h1> <h1 v-else-if="num >= 30 && num < 40">第二个</h1> <h1 v-else>第三个</h1>
vue 小练习之 todos(土豆丝)相关推荐
- 10大玄机为你揭开炒土豆丝爽脆的秘密——尖椒土豆丝
时光如轮旋,一年的时间过得好快,转眼到了2010年的最后一天.不想回忆过去,只想保留美!时光如梭,岁月无情而留下的是生活的痕迹,快乐留给幸福的人源源的生活乐趣.在点点滴滴的过往中经历风雨,磨练自 ...
- 基于vue和vuex的todos效果展示及源码分享
todos,待做项目经常被以各种方式来实现,js,node, 这里分享一个基于vue和vuex的todos 主要有三部分代码main.js,index.js,App.vue import Vue fr ...
- vue小程序开发(四)首页 推荐
vue小程序开发(四)首页 推荐 编写 首页-推荐 模块 推荐-最顶部模块 推荐-月份模块 月份模块标题样式 推荐-热门模块 基本布局 使用scroll-view改造容器 分页功能分析 实现头部固定 ...
- 简单的vue小demo——小黑记事本
简单的vue小demo--小黑记事本 整体效果:完整代码在这里 一个简单的记事本,可实现简单的添加,删除,统计,清空,隐藏. 1.新增 1.1生成列表结果(v-for数组) 1.2获取用户输入(v-m ...
- vue小案例(小黑记事本和购物车)
vue小案例 小黑记事本小案例 <footer class="footer" ><span class="todo-count" v-if=& ...
- 适合初学者练手的vue小项目(附github源码)
vue慢慢的成为了前端最受欢迎的框架之一,在很多项目之中开发都能用得到,如今也已经发展到3.0了,可能是因为这个框架可以提高工作效率,因此受到大家的追捧,在之前的文章里面也说过,2019年,大前端学习 ...
- Vue小案例1:计数器
Vue小案例1:计数器 html页面: 准备两个按钮分别绑定两个事件对应加减add,sub:还有一个span容器放置数据,样式自己写没有太大要求 <div id="app"& ...
- springboot vue 小程序小区物业管理系统【物业手机版(小程序)+物业系统后端+物业系统前端+业主手机端(小程序)】(功能较丰富)
springboot vue 小程序小区物业管理系统[物业手机版(小程序)+物业系统后端+物业系统前端+业主手机端(小程序)](功能较丰富) 高清视频演示: https://www.bilibili. ...
- 秋农家常菜——老干妈蒜香土豆丝and秘制炝炒莴笋叶
老干妈蒜香土豆丝: 材料: 油 盐 酱油 老干妈 干辣椒 蒜末 土豆丝(切大块点) 步骤: 1.锅烧热,下油,放盐(少一点): 2.待油煮沸,放干辣椒(别太多): 3.注意观察干辣椒,待干辣椒变的有点 ...
最新文章
- 【微信支付】微信端的手机网页支付 开发流程
- win7删除桌面文件需要刷新才会消失(2种解决方法)
- 20165320 第十周课上测试补做
- sql 除以_使用SQL分析游戏运营情况
- [Network Architecture]DPN(Dual Path Network)算法详解(转)
- 优化Windows电脑常见方法,提高速度,释放硬盘C盘
- mysql 5.7 无法启动 服务没有报告任何错误
- linux运维、架构之路-Kubernetes集群部署TLS双向认证
- 桑心啊,ListT.FindAll()的效率竟然比for循环还差。
- wifi频谱仪测试软件,无线局域网频谱分析仪 (Spectrum XT)
- IDEA项目启动配置
- php加密=>python解密或者python加密=>php解密
- 全奖热招 | TUM、HKU、McGill、UTS等8所高校全奖博士招生信息汇总
- 团队管理之绩效考核(OKR、KPI)
- python通过周数得到日期_python中根据时间获取周数,通过周数获取时间
- 替换Word文档里面的多个空格
- 德州扑克算法幕后研发者CMU博士Brown专访:AI如何打败顶级人类牌手?
- 机器学习小组知识点14:均匀分布(Uniform Distribution)
- 一个简单的音乐网站设计与实现(HTML+CSS)---爵士乐音乐 3页
- 【多线程并发编程】十一 生产者和消费者问题(面试必问)