Vue 学习笔记 2.0 --- TodoMVC(demo)实操

最新推荐文章于 2022-02-04 23:59:27 发布

吸猫患者

最新推荐文章于 2022-02-04 23:59:27 发布

阅读量376

点赞数

分类专栏： vue 文章标签： Vue.js

本文链接：https://blog.csdn.net/weixin_44781484/article/details/88704942

版权

vue 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

第一步 : 下载模板显示样式

下载模板 : git clone https://github.com/tastejs/todomvc-app-template.git
npm i
打开 index.html

第二步 : 安装 vue + 配置

安装 vue npm i vue
引入 vue

<!-- 在 app.js 引入的上面引入 vue , 因为在app.js里 要使用vue了 -->
<script src="./node_modules/vue/dist/vue.js"></script>
<script src="js/app.js"></script>

实例化 vue + 测试

第三步 : 展示列表 + 准备数据

准备 list
展示列表

展示内容 item.name
完成: 内容划横线 :class="{ completed : item.done }"
多选框都选中了也要处理 v-model='item.done'

第四步 : 删除任务

给删除按钮注册删除事件
传给我们一个值 : index/ id

// 方式1 : 接收过来的是一个索引 ==> 根据索引直接删除
// arr.splice(start,deletedCount)
//  从start下标开始,删除几个
// this.list.splice(index,1)

// 方式2 : 接收过来的是一个id  ==> 根据id找到对应的索引 => 再删除
// console.log('点击删除按钮', id);
// 根据id 找到对应的索引
// const index = this.list.findIndex(item => item.id === id);
// console.log(index);
// this.list.splice(index, 1);

// 方法3 : 接收过来的是一个id => 过滤出来不等于当前id的新数组, 把新的数组 赋值给list
this.list = this.list.filter(item => item.id !== id);

根据索引/id 删除对应的对象

第五步 : 添加任务

获取任务名称: todoName
拼成一个对象,把对象添加到数组里
1. 注意: 不要用unshift 用 push
优化 :
1. id 不能重复, 需要添加独一的id
2. 思路: 拿到数组里最后一个元素的id + 1
3. 当list的长度为 0 时, 需要设置默认值 id = 1 (做三元判断)

第六步 : 按键修饰符 (vue官网按键码)

因为记 keyCode 比较麻烦 , 所以要掌握用按键修饰符

初始版 : if( e.keyCode === 13) { }
中级版 : @keyup.13=“addTodo” 不用在事件里使用 if判断了
最终版 : @keyup.enter=“addTodo”

链接 : https://cn.vuejs.org/v2/guide/events.html#按键修饰符

第七步 : 更新任务

双击内容 => 显示编辑状态

实现思路:

先在 data 中添加一个临时值 editId : -1 只要保证 editId 与 list中的元素不同即可
从静态页面给的信息得知, 如果要显示编辑框的话,就需要添加 editing 类, 所以可以通过判断 editId 是否与 item.id相同, editing : { item.id == editId }
在 app.js 中写一个方法, 双击label 框时, 接收到 item.id 然后将item.id 的值赋值给 editId 即可

思路 :

先在data 里添加中间临时值 editId = -1
item.id === editId
双击内容了 => 获取到了对应的id了吗? => 拿到对应的id ,把id 赋值给 editId
改值 => 就是一个双向数据绑定 v-model=‘item.name’
回车 => 隐藏编辑状态
this.editId = -1
原则 :
如果vue中的data 值 ,发生了变化,视图中的指令和表达式会重新执行一遍

第八步: 底部的显示与隐藏 ( v-if 和 v-show )

v-if  格式 : v-if = "布尔"  true => 显示   	false =>  隐藏

v-show  格式 : v-show = '布尔'  true => 显示  	false => 隐藏


v-if 和 v-show 的异同点
相同点: 都是可以进行切换显示和隐藏
不同点: 实现方式不同

v-if  显示: 创建节点	隐藏: 删除节点
//通过不断的创建节点和删除节点去实现显示和隐藏

v-show  显示: display-block	隐藏: display-none
//通过不断的设置样式 display 来实现隐藏


//使用场景
因为 v-if 不断的删除和创建节点, 性能不好
如果切换显示和隐藏 很频繁 => v-show
不频繁 => v-if

思路: 如果底部的长度 > 0 就显示 v-show

方式1:

v.show = “list.length > 0”

注意: 如果标签里的代码比较多,可以提出来放到一个函数里

方式2:

v-show=" isFooterShow() " 记得调用

isFooterShow () {

return this.list.length > 0

}

问题: 使用方式2, 确实能实现效果, 而且在代码很少的情况下使用也没有问题, 但是,如果随着项目的增大 / 代码很多或者在涉及到一些耗时操作, 在上面的文本框里随意改一点数据, 这个方法就会重新调用, 这样是很影响性能的

为什么会重新调用??

在 vue 中, 只要data里的数据发生了变化, 页面中的指令和表达式就会重新计算

我们想要什么效果??

数组的长度变化了才调用,其他不应该影响到我

方式3:

利用 计算属性 来解决上面的问题

注意: 写起来像方法 , 在页面中使用时,像属性.

计算属性( 很重要 )

data : {

num : 100,

test : 200

}

computed : {

num1() {

return this.num + 20

}

}

说明 : 计算属性也是一种属性
怎么使用:
- 计算属性写在 computed 里面 computed与 data 同级
- 写起来像个方法, 用起来像一个属性
特点:
- 计算属性一定要有返回值, 返回的值,就是要显示的值
- 计算属性里面可以使用 data 里存在的值
  
  – ( 重要 ) 计算属性会随着 相关的数据 发生变化而变化,只要相关数据变化, 计算属性会重新计算
注意点:
- 要有返回值
- 计算属性不能当方法用
- 计算属性不能和data里的属性重名
以后什么时候使用计算属性呢 ??? 使用场景
- 根据 data 已知的值, 想得到一个新值
- 这个新值, 只跟相关的数据变化而变化, 其他的一概不理