Vue(day2)
第二天
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 doneid : (唯一标识 ) 删除需要
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 里data的数据发生了变化, 页面中所有的指令和表达式都会重新计算
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>
