- 1. 能够了解更新监测, key作用, 虚拟DOM, diff算法
- 2. 能够掌握设置动态样式
- 3. 能够掌握过滤器, 计算属性, 侦听器
- 4. 能够完成品牌管理案例
一.Vue基础_更新监测和key
1.v-for更新监测
目标：目标结构变化, 触发v-for的更新
- 情况1: 数组翻转
- 情况2: 数组截取
- 情况3: 更新值
口诀:
数组变更方法, 就会导致v-for更新, 页面更新
push方法是 JavaScript 数组对象的一个方法，用于向数组的末尾添加一个或多个新元素，并返回添加新元素后数组的新长度pop方法是 JavaScript 数组对象的一个方法，用于移除数组的最后一个元素，并返回被移除的元素。shift方法是 JavaScript 数组对象的一个方法，用于移除数组的第一个元素，并返回被移除的元素。unshift方法是 JavaScript 数组对象的一个方法，用于向数组的开头添加一个或多个新元素，并返回添加新元素后数组的新长度。splice方法是 JavaScript 数组对象的一个方法，用于在指定位置插入或删除元素，并返回被删除的元素组成的数组。sort方法是 JavaScript 数组对象的一个方法，用于对数组的元素进行排序。默认情况下，sort方法会将数组的元素转换为字符串，然后按照 Unicode 码点顺序进行排序。reverse方法是 JavaScript 数组对象的一个方法，用于颠倒数组中元素的顺序，即将数组中的元素从后向前排列。
数组非变更方法, 返回新数组, 就不会导致v-for更新, 可采用覆盖数组或this.$set()
filter方法可以帮助程序员方便地对数组进行筛选，从而得到符合特定条件的元素集合。
新建一个文件夹，用vscode打开文件，在用命令vue create demo创建项目
<template>
<div>
<ul>
<li v-for="(val,index) in arr" :key="index">{{ val }}</li>
</ul>
<button @click="revBtn">数组翻转</button>
<button @click="sliceBtn">截取前三个</button>
<button @click="updateBtn">点击改掉第一个元素的值</button>
</div>
</template>
<script>
export default {
data(){
return {
arr: [5,3,9,2,1]
}
},
methods: {
revBtn(){
// 1.数据翻转可以让v-for更新
this.arr.reverse()
},
sliceBtn(){
// 2.数组slice方法不会造成v-for更新
// slice不会改变原始数组
this.arr.slice(0,3)
// console.log(re)
// 解决v-for更新 ---覆盖原始数组
let newArr = this.arr.slice(0,3)
this.arr = newArr
},
updateBtn(){
// 3.更新某个值的时候，v-for是监测不到的
// this.arr[0] = 1000;
// 解决-This.$set()
// 参数1:更新目标结构
// 参数2：更新位置
// 参数3:更新值
this.$set(this.arr,0,1000)
}
}
}
</script>
<style>
</style>
在截取前三个问题中，如何解决v-for更新，如下图:
在点击改掉第一个元素的值中，如何解决v-for更新问题，如下:
1. 哪些数组方法会导致v-for更新页面?
可以改变原数组的方法
2. 有的数组方法不导致v-for更新页面, 如何处理?
拿返回的新数组, 直接替换旧数组 this.$set()方法更新某个值
2.v-for就地更新
目标：当数组改变后是如何更新的
旧-虚拟DOM结构: 新-虚拟DOM结构：
新旧DOM产生后对比, 然后决定是否复用真实DOM/更新内容
<template>
<div>
<ul>
<li v-for="(val, ind) in arr" :key="ind">{{ val }}</li>
</ul>
<button @click="btn">下标1位置插入新来的</button>
</div>
</template>
<script>
export default {
data(){
return {
arr: ["老大","老二","老三"]
}
},
methods: {
btn(){
this.arr.splice(1,0,'新来的')
}
}
}
</script>
<style>
</style>
v-for更新时, 是如何操作DOM的?
循环出新的虚拟DOM结构, 和旧的虚拟DOM
结构对比, 尝试复用标签就地更新内容
3.真实DOM
目标：在document对象上, 渲染到浏览器上显示的标签
虚拟DOM
目标：本质是保存节点信息, 属性和内容的一个JS对象 ,真实DOM属性过多, 遍历耗时
目标：在内存中比较变化部分, 然后给真实DOM打补丁(更新)
-
内存中生成一样的虚拟DOM结构(==本质是个JS对象==)
因为真实的DOM属性好几百个, 没办法快速的知道哪个属性改变了
比如template里标签结构
<template> <div id="box"> <p class="my_p">123</p> </div> </template>对应的虚拟DOM结构
const dom = { type: 'div', attributes: [{id: 'box'}], children: { type: 'p', attributes: [{class: 'my_p'}], text: '123' } } -
以后vue数据更新
-
生成新的虚拟DOM结构
-
和旧的虚拟DOM结构对比
-
利用diff算法, 找不不同, 只更新变化的部分(重绘/回流)到页面 - 也叫打补丁
-
==好处1: 提高了更新DOM的性能(不用把页面全删除重新渲染)==
==好处2: 虚拟DOM只包含必要的属性(没有真实DOM上百个属性)==
1. 虚拟DOM是什么?
本质就是一个JS对象, 保存DOM关键信息
2. 虚拟DOM好处?
提高DOM更新的性能, 不频繁操作真实DOM,
在内存中找到变化部分, 再更新真实DOM(打补丁)
3.diff算法
目标：同级比较-根元素变化-整个dom树删除重建
旧虚拟DOM
<div id="box">
<p class="my_p">123</p>
</div>新虚拟DOM
<ul id="box">
<li class="my_p">123</li>
</ul>情况2: 根元素没变, 属性改变, ==元素复用==, 更新属性
旧虚拟DOM
<div id="box">
<p class="my_p">123</p>
</div>新虚拟DOM
<div id="myBox" title="标题">
<p class="my_p">123</p>
</div>01、第一章webpack+vue基础/1-20 虚拟DOM+Diff算法
1. diff算法如何比较新旧虚拟DOM? 同级比较
2. 根元素变化? 删除重新建立整个DOM树
3. 根元素未变, 属性改变? DOM复用, 只更新属性
4.无key
目标:从第二个往后更新内容 – 性能不高
情况3: 根元素没变, 子元素没变, 元素内容改变
无key - 就地更新
v-for不会移动DOM, 而是尝试复用, 就地更新，如果需要v-for移动DOM, 你需要用特殊 attribute key 来提供一个排序提示
<ul id="myUL">
<li v-for="str in arr">
{{ str }}
<input type="text">
</li>
</ul>
<button @click="addFn">下标为1的位置新增一个</button>export default {
data(){
return {
arr: ["老大", "新来的", "老二", "老三"]
}
},
methods: {
addFn(){
this.arr.splice(1, 0, '新来的')
}
}
};
目标：最大限度尝试就地修改/复用相同类型元素
有key, 值为索引
目标：有key属性, 基于key的来比较新旧虚拟DOM, 移除key不存在元素
目标：先产生新旧虚拟DOM, 根据key比较, 还是就地更新
有key, 值唯一不重复的字符串或数字
目标：有key属性, 基于key的来比较新旧虚拟DOM, 移除key不存在元素
- 给每个数据换成对象, 准备id, 把id的值作为key
有key, 值为id
目标：先产生新旧虚拟DOM, 根据key比较
key的值只能是唯一不重复的, 字符串或数值
v-for不会移动DOM, 而是尝试复用, 就地更新，如果需要v-for移动DOM, 你需要用特殊 attribute key 来提供一个排序提示
新DOM里数据的key存在, 去旧的虚拟DOM结构里找到key标记的标签, 复用标签
新DOM里数据的key存在, 去旧的虚拟DOM结构里没有找到key标签的标签, 创建
旧DOM结构的key, 在新的DOM结构里没有了, 则==移除key所在的标签==
<template>
<div>
<ul>
<li v-for="obj in arr" :key="obj.id">
{{ obj.name }}
<input type="text">
</li>
</ul>
<button @click="btn">下标1位置插入新来的</button>
</div>
</template>
<script>
export default {
data() {
return {
arr: [
{
name: '老大',
id: 50
},
{
name: '老二',
id: 31
},
{
name: '老三',
id: 10
}
],
};
},
methods: {
btn(){
this.arr.splice(1, 0, {
id: 19,
name: '新来的'
})
}
}
};
</script>
<style>
</style>1. 子元素或者内容改变会分diff哪2种情况比较?
无key, 就地更新
有key, 按照key比较
2. key值要求是?
唯一不重复的字符串或者数值
3. key应该怎么用?
有id用id, 无id用索引
4. key的好处? 可以配合虚拟DOM提高更新的性能
v-for什么时候会更新页面呢?
数组采用更新方法, 才导致v-for更新页面
vue是如何提高更新性能的?
采用虚拟DOM+diff算法提高更新性能
虚拟DOM是什么?
本质是保存dom关键信息的JS对象
diff算法如何比较新旧虚拟DOM?根元素改变 – 删除当前DOM树重新建
根元素未变, 属性改变 – 更新属性
根元素未变, 子元素/内容改变
无key – 就地更新 / 有key – 按key比较
5.动态class
目标: 用v-bind给标签class设置动态的值
- 语法 :class="{类名: 布尔值}"
<template>
<div>
<!-- 语法:
:class="{类名:布尔值}"
使用场景:vue变量控制标签是否应该有类名-->
<p :class="{red_str: bool}">动态class</p>
</div>
</template>
<script>
export default {
data(){
return {
bool : true
}
},
methods: {
}
}
</script>
<style scoped>
.red_str{
color: red;
}
</style>
如何给标签class属性动态赋值?
:class=“{类名: 布尔值}”, true使用, false不用
6.动态style
目标: 给标签动态设置style的值
语法 :style="{css属性名: 值}"
<template>
<div>
<!-- 动态stule语法
:style="{css属性名: 值}" -->
<!-- backgroundColor是一个变量 -->
<!-- <p :style="{backgroundColor: 'red'}">动态class</p> -->
<p :style="{ backgroundColor: color }">动态class</p>
</div>
</template>
<script>
export default {
data(){
return {
color : 'red'
}
},
methods: {
}
}
</script>
<style>
</style>
给style赋值和class区别是?
:class="{类名: 布尔值}”, true使用, false不用
:style="{css属性名: 值}"
7.案例-品牌管理(铺)
- 需求1: 把默认数据显示到表格上
- 需求2: 注意资产超过100的, 都用红色字体标记出来
- ① 先铺设静态页面 --- 去.md文档里, 复制数据和标签模板
- ② 此案例使用bootstrap, 需要下载, 并导入到工程main.js中
- ③ 用v-for配合默认数据, 把数据默认铺设到表格上显示
- ④ 直接在标签上, 大于100价格, 动态设置red类名
用到了哪些技术点?
布局用bootstrap, yarn下载引入使用
v-for把数据渲染到表格里
:class动态判断价格给红色类名
首先使用npm install bootstrap命令下载bootstrap
在main.js中引入bootstrap
<template>
<div id="app">
<div class="container">
<!-- 顶部框模块 -->
<div class="form-group">
<div class="input-group">
<h4>品牌管理</h4>
</div>
</div>
<!-- 数据表格 -->
<table class="table table-bordered table-hover mt-2">
<thead>
<tr>
<th>编号</th>
<th>资产名称</th>
<th>价格</th>
<th>创建时间</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="obj in list" :key="obj.id">
<td>{{ obj.id }}</td>
<td>{{ obj.name }}</td>
<!-- 如果价格超过100，就有red这个类 -->
<td :class="{ 'red': obj.price > 100 }">{{ obj.price }}</td>
<td>{{ obj.time }}</td>
<td><a href="#">删除</a></td>
</tr>
</tbody>
<!--
<tfoot >
<tr>
<td colspan="5" style="text-align: center">暂无数据</td>
</tr>
</tfoot>
-->
</table>
<!-- 添加资产 -->
<form class="form-inline">
<div class="form-group">
<div class="input-group">
<input type="text" class="form-control" placeholder="资产名称" />
</div>
</div>
<div class="form-group">
<div class="input-group">
<input type="text" class="form-control" placeholder="价格" />
</div>
</div>
<!-- 阻止表单提交 -->
<button class="btn btn-primary">添加资产</button>
</form>
</div>
</div>
</template>
<script>
// 1. 明确需求
// 2. 标签+样式+默认数据
// 3. 下载bootstrap, main.js引入bootstrap.css
// 4. 把list数组 - 铺设表格
// 5. 修改价格颜色
export default {
data() {
return {
name: "", // 名称
price: 0, // 价格
list: [
{ id: 100, name: "外套", price: 199, time: new Date('2010-08-12') },
{ id: 101, name: "裤子", price: 34, time: new Date('2013-09-01') },
{ id: 102, name: "鞋", price: 25.4, time: new Date('2018-11-22') },
{ id: 103, name: "头发", price: 19900, time: new Date('2020-12-12') }
],
};
},
};
</script>
<style >
.red {
color: red;
}
</style>
8.案例-品牌管理(增)
品牌数据增加, 功能实现
- 需求1: 实现表单数据新增进表格功能
- 需求2: 判断用户输入是否为空给提示
分析
- ① 添加资产按钮 – 绑定点击事件
- ② 给表单v-model绑定vue变量收集用户输入内容
- ③ 添加数组到数组中
- ④ 判断用户内容是否符合规定
<template>
<div id="app">
<div class="container">
<!-- 顶部框模块 -->
<div class="form-group">
<div class="input-group">
<h4>品牌管理</h4>
</div>
</div>
<!-- 数据表格 -->
<table class="table table-bordered table-hover mt-2">
<thead>
<tr>
<th>编号</th>
<th>资产名称</th>
<th>价格</th>
<th>创建时间</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="obj in list" :key="obj.id">
<td>{{ obj.id }}</td>
<td>{{ obj.name }}</td>
<!-- 如果价格超过100，就有red这个类 -->
<td :class="{ 'red': obj.price > 100 }">{{ obj.price }}</td>
<td>{{ obj.time }}</td>
<td><a href="#">删除</a></td>
</tr>
</tbody>
<!--
<tfoot >
<tr>
<td colspan="5" style="text-align: center">暂无数据</td>
</tr>
</tfoot>
-->
</table>
<!-- 添加资产 -->
<form class="form-inline">
<div class="form-group">
<div class="input-group">
<input type="text" class="form-control" placeholder="资产名称" v-model="name"/>
</div>
</div>
<div class="form-group">
<div class="input-group">
<input type="text" class="form-control" placeholder="价格" v-model="price" />
</div>
</div>
<!-- 阻止表单提交(刷新网页数据又回去了) -->
<button class="btn btn-primary" @click.prevent="addFn">添加资产</button>
</form>
</div>
</div>
</template>
<script>
// 目标:新增
// 1.按钮 - 事件
// 2.给表单v-model绑定vue变量
export default {
data() {
return {
name: "", // 名称
price: 0, // 价格
list: [
{ id: 100, name: "外套", price: 199, time: new Date('2010-08-12') },
{ id: 101, name: "裤子", price: 34, time: new Date('2013-09-01') },
{ id: 102, name: "鞋", price: 25.4, time: new Date('2018-11-22') },
{ id: 103, name: "头发", price: 19900, time: new Date('2020-12-12') }
],
};
},
methods:{
addFn(){
// 5.判断是否为空
if (this.name.trim().length == 0 || this.price === 0){
alert('不能为空')
return
}
// 3.把值以对象形式-插入list
this.list.push({
// 当前数组最后一个对象的id+1作为新对象id值
id: this.list[this.list.length - 1] .id +1,
name: this.name,
price: this.price,
time:new Date()
})
}
}
};
</script>
<style >
.red {
color: red;
}
</style>
涉及到了哪些技术点?
@绑定事件
v-model收集表单数据
.prevent阻止按钮提交表单刷新页面
v-model修饰符 数组取最后一个元素
9.案例-品牌管理(删)
需求1: 点击删除的a标签, 删除数据
需求2: 删除没数据了要提示暂无数据的tfoot
- ① a标签绑定点击事件
- ② 给事件方法传id
- ③ 通过id, 找到对应数据删除
- ④ 删除光了要让tfoot显示
- ⑤ 删除光了再新增, 有bug(id值问题)需要修复
<template>
<div id="app">
<div class="container">
<!-- 顶部框模块 -->
<div class="form-group">
<div class="input-group">
<h4>品牌管理</h4>
</div>
</div>
<!-- 数据表格 -->
<table class="table table-bordered table-hover mt-2">
<thead>
<tr>
<th>编号</th>
<th>资产名称</th>
<th>价格</th>
<th>创建时间</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="obj in list" :key="obj.id">
<td>{{ obj.id }}</td>
<td>{{ obj.name }}</td>
<!-- 如果价格超过100，就有red这个类 -->
<td :class="{ red: obj.price > 100 }">{{ obj.price }}</td>
<td>{{ obj.time }}</td>
<td><a href="#" @click="delFn(obj.id)">删除</a></td>
</tr>
</tbody>
<tfoot v-show="list.length === 0">
<tr>
<td colspan="5" style="text-align: center">暂无数据</td>
</tr>
</tfoot>
</table>
<!-- 添加资产 -->
<form class="form-inline">
<div class="form-group">
<div class="input-group">
<input type="text" class="form-control" placeholder="资产名称" v-model="name" />
</div>
</div>
<div class="form-group">
<div class="input-group">
<input type="text" class="form-control" placeholder="价格" v-model.number="price" />
</div>
</div>
<button class="btn btn-primary" @click.prevent="addFn">添加资产</button>
</form>
</div>
</div>
</template>
<script>
// 目标: 删除功能
// 1. 删除a标签-点击事件
// 2. 对应方法名
// 3. 数据id到事件方法中
// 4. 通过id, 找到这条数据在数组中的下标
// 5. splice方法删除原数组里的对应元素
// 6. 设置tfoot, 无数据给出提示
// 7. 无数据再新增, id要判断一下
export default {
data() {
return {
name: "", // 名称
price: 0, // 价格
list: [
{ id: 100, name: "外套", price: 199, time: new Date('2010-08-12') },
{ id: 101, name: "裤子", price: 34, time: new Date('2013-09-01') },
{ id: 102, name: "鞋", price: 25.4, time: new Date('2018-11-22') },
{ id: 103, name: "头发", price: 19900, time: new Date('2020-12-12') }
],
};
},
methods: {
addFn() {
if (this.name.trim().length === 0 || this.price === 0) {
alert("不能为空")
return
}
// 解决bug: 无数组新增-list没有数据, id需要给一个固定值(以后id都是后台生成, 现在是模拟给一个id)
let id = this.list.length > 0 ? this.list[this.list.length - 1].id + 1 : 100
this.list.push({
// 当前数组最后一个对象的id+1作为新对象id值
id: id,
name: this.name,
price: this.price,
time: new Date()
})
},
delFn(id) {
// 通过id找到这条数据在数组中下标
let index = this.list.findIndex(obj => obj.id === id)
this.list.splice(index, 1)
}
}
};
</script>
<style >
.red {
color: red;
}
</style>
涉及到了哪些技术点?
事件传id
删除数组元素方法
id值判断问题
二.Vue基础_过滤器
1.过滤器_定义使用
目标: 转换格式, 过滤器就是一个函数, 传入值返回处理后的值
过滤器只能用在, 插值表达式和v-bind动态属性里
Vue中的过滤器场景
- 字符串翻转, "输入hello, world", 输出"dlrow ,olleh”
- 字母转大写, 输入"hello", 输出"HELLO”
语法:
- Vue.filter("过滤器名", (值) => {return "返回处理后的值"})
- filters: {过滤器名字: (值) => {return "返回处理后的值"}
<template>
<div>
<p>原来的样子:{{ msg }}</p>
<!-- 2.过滤器使用
语法: {{ 值 | 过滤器名字 }} -->
<p>使用翻转过滤器: {{ msg | reverse }}</p>
<p :title="msg | toUp">鼠标长度</p>
</div>
</template>
<script>
export default {
data(){
return {
msg: 'Hello, Vue'
}
},
// 方式2:局部 - 过滤器
// 只能在当前vue文件内使用
/*
语法:
filters：{
过滤器名字(val){
return 处理后的值
}
}
*/
filters:{
toUp(val){
return val.toUpperCase()
}
}
}
</script>
<style>
</style>第三个是鼠标悬浮的时候会出现翻转
1. Vue中过滤器作用?
传入一个值, 处理后返回另外一个值
2. 如何定义过滤器?
main.js – Vue.filter('过滤器名字', 函数体)
某.vue文件 – filters: {'过滤器名字': 函数体}
3. 如何使用过滤器? Vue变量 | 过滤器名字
4. 过滤器注意事项? 插值表达式 / 动态属性
2.过滤器_传参和多过滤器
目标: 可同时使用多个过滤器, 或者给过滤器传参
语法:
- 过滤器传参: vue变量 | 过滤器(实参)
- 多个过滤器: vue变量 | 过滤器1 | 过滤器2
<template>
<div>
<p>原来的样子:{{ msg }}</p>
<!-- 1.给过滤器传参
语法:vue变量 | 过滤器名(值)
-->
<p>使用翻转过滤器: {{ msg | reverse('|') }}</p>
<!-- 2.
多个过滤利使用
语法:vue变量 | 过滤器1 | 过滤器2 -->
<p :title="msg | toUp | reverse('|')">鼠标长度</p>
</div>
</template>
<script>
export default {
data() {
return {
msg: 'Hello, Vue'
}
},
filters: {
toUp(val) {
return val.toUpperCase()
}
}
}
</script>
<style></style>点击第三个会出现右图所出现的
1. 多个过滤器使用?
vue变量 | 过滤器1 | 过滤器2
2. 如何给过滤器传额外值
vue变量 | 过滤器(值)
3.案例-品牌管理(时间格式化)
需求: 表格里的时间用过滤器+moment模块, 格式化成YYYY-MM-DD 格式
- ① 下载moment模块到当前工程
- ② 定义过滤器, 传入时间, 用moment模块格式化, 返回我们想要的格式
涉及到了哪些技术点?
yarn下包
过滤器定义和使用
moment复习
先使用npm install moment 下载moment
在main.js中引入moment
<template>
<div id="app">
<div class="container">
<!-- 顶部框模块 -->
<div class="form-group">
<div class="input-group">
<h4>品牌管理</h4>
</div>
</div>
<!-- 数据表格 -->
<table class="table table-bordered table-hover mt-2">
<thead>
<tr>
<th>编号</th>
<th>资产名称</th>
<th>价格</th>
<th>创建时间</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="obj in list" :key="obj.id">
<td>{{ obj.id }}</td>
<td>{{ obj.name }}</td>
<!-- 如果价格超过100，就有red这个类 -->
<td :class="{red: obj.price > 100}">{{ obj.price }}</td>
<!-- 3. 使用过滤器 -->
<td>{{ obj.time | formatDate }}</td>
<td><a href="#" @click="delFn(obj.id)">删除</a></td>
</tr>
</tbody>
<tfoot v-show="list.length === 0">
<tr>
<td colspan="5" style="text-align: center">暂无数据</td>
</tr>
</tfoot>
</table>
<!-- 添加资产 -->
<form class="form-inline">
<div class="form-group">
<div class="input-group">
<input
type="text"
class="form-control"
placeholder="资产名称"
v-model="name"
/>
</div>
</div>
<div class="form-group">
<div class="input-group">
<input
type="text"
class="form-control"
placeholder="价格"
v-model.number="price"
/>
</div>
</div>
<button class="btn btn-primary" @click.prevent="addFn">添加资产</button>
</form>
</div>
</div>
</template>
<script>
// 目标: 处理时间
// 1. 下载moment模块
import moment from 'moment'
export default {
data() {
return {
name: "", // 名称
price: 0, // 价格
list: [
{ id: 100, name: "外套", price: 199, time: new Date('2010-08-12')},
{ id: 101, name: "裤子", price: 34, time: new Date('2013-09-01') },
{ id: 102, name: "鞋", price: 25.4, time: new Date('2018-11-22') },
{ id: 103, name: "头发", price: 19900, time: new Date('2020-12-12') }
],
};
},
methods: {
addFn(){
if (this.name.trim().length === 0 || this.price === 0) {
alert("不能为空")
return
}
// 解决bug: 无数组新增-list没有数据, id需要给一个固定值(以后id都是后台生成, 现在是模拟给一个id)
let id = this.list.length > 0 ? this.list[this.list.length - 1].id + 1 : 100
this.list.push({
// 当前数组最后一个对象的id+1作为新对象id值
id: id,
name: this.name,
price: this.price,
time: new Date()
})
},
delFn(id){
// 通过id找到这条数据在数组中下标
let index = this.list.findIndex(obj => obj.id === id)
this.list.splice(index, 1)
}
},
// 2. 定义过滤器, 编写内部代码
filters: {
formatDate (val){
return moment(val).format('YYYY-MM-DD')
}
}
};
</script>
<style >
.red{
color: red;
}
</style>
三.Vue基础_计算属性
1.计算属性_computed
目标: 一个变量的值, 依赖另外一些数据计算而来的结果
注意: 计算属性也是vue数据变量, 所以不要和data里重名, 用法和data相同
<template>
<div>
<p>{{ num }}</p>
</div>
</template>
<script>
export default {
data(){
return {
a: 10,
b: 20
}
},
// 计算属性
// 场景:一个变量的值，需要用另外变量计算而得来
/*
语法:
computed:{
计算属性名(){
retturn 值
}
}
*/
computed:{
num(){
return this.a + this.b
}
}
}
</script>
<style>
</style>
1. 计算属性使用场景?
当变量的值, 需要通过别人计算而得来
2. 计算属性特点?
函数内使用的变量改变, 重新计算结果返回
3. 计算属性注意事项?
计算属性名和data里名字不能重复
2.计算属性_缓存
目标: 计算属性, 基于依赖项的值进行缓存，依赖的变量不变, 都直接从缓存取结果
<template>
<div>
<p>{{ reverseMessage }}</p>
<p>{{ reverseMessage }}</p>
<p>{{ reverseMessage }}</p>
<p>{{ getMessage() }}</p>
<p>{{ getMessage() }}</p>
<p>{{ getMessage() }}</p>
</div>
</template>
<script>
export default {
data(){
return {
msg: "Hello, Vue"
}
},
// 计算属性优势:
// 带缓存
// 计算属性对应函数执行后，会把return值缓存起来
// 依赖项不变，多次调用都是从缓存取值
// 依赖项值-变化，函数会"自动"重新执行-并缓存新的值
computed:{
reverseMessage(){
console.log("计算属性执行了")
return this.msg.split("").reverse().join("")
}
},
methods: {
getMessage(){
console.log("函数执行了")
return this.msg.split("").reverse().join("")
}
}
}
</script>
<style>
</style>
1. 计算属性好处是?
带缓存
依赖项不变, 直接从缓存取
依赖项改变, 函数自动执行并重新缓存
2. 计算属性使用场景?
当变量值, 依赖其他变量计算而得来才用
3.案例-品牌管理(总价和均价)
完成总价和均价的显示结果
需求: 完成商品总价和均价的数据显示功能
分析:
- ① tbody最后新增一行tr
- ② 定义总价和均价2个计算属性, 在函数里编写计算过程返回结果
- ③ 把计算属性用到相应标签处
<template>
<div id="app">
<div class="container">
<!-- 顶部框模块 -->
<div class="form-group">
<div class="input-group">
<h4>品牌管理</h4>
</div>
</div>
<!-- 数据表格 -->
<table class="table table-bordered table-hover mt-2">
<thead>
<tr>
<th>编号</th>
<th>资产名称</th>
<th>价格</th>
<th>创建时间</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="obj in list" :key="obj.id">
<td>{{ obj.id }}</td>
<td>{{ obj.name }}</td>
<!-- 如果价格超过100，就有red这个类 -->
<td :class="{ red: obj.price > 100 }">{{ obj.price }}</td>
<td>{{ obj.time | formatDate }}</td>
<td><a href="#" @click="delFn(obj.id)">删除</a></td>
</tr>
<tr style="background-color: #eee">
<td>统计:</td>
<td colspan="2">总价钱为: {{ allPrice }}</td>
<td colspan="2">平均价: {{ avgPrice }}</td>
</tr>
</tbody>
<tfoot v-show="list.length === 0">
<tr>
<td colspan="5" style="text-align: center">暂无数据</td>
</tr>
</tfoot>
</table>
<!-- 添加资产 -->
<form class="form-inline">
<div class="form-group">
<div class="input-group">
<input type="text" class="form-control" placeholder="资产名称" v-model="name" />
</div>
</div>
<div class="form-group">
<div class="input-group">
<input type="text" class="form-control" placeholder="价格" v-model.number="price" />
</div>
</div>
<button class="btn btn-primary" @click.prevent="addFn">添加资产</button>
</form>
</div>
</div>
</template>
<script>
// 目标: 总价和均价显示
// 1. 末尾补tr - 显示总价和均价
import moment from 'moment'
export default {
data() {
return {
name: "", // 名称
price: 0, // 价格
list: [
{ id: 100, name: "外套", price: 199, time: new Date('2010-08-12') },
{ id: 101, name: "裤子", price: 34, time: new Date('2013-09-01') },
{ id: 102, name: "鞋", price: 25.4, time: new Date('2018-11-22') },
{ id: 103, name: "头发", price: 19900, time: new Date('2020-12-12') }
],
};
},
methods: {
addFn() {
if (this.name.trim().length === 0 || this.price === 0) {
alert("不能为空")
return
}
// 解决bug: 无数组新增-list没有数据, id需要给一个固定值(以后id都是后台生成, 现在是模拟给一个id)
let id = this.list.length > 0 ? this.list[this.list.length - 1].id + 1 : 100
this.list.push({
// 当前数组最后一个对象的id+1作为新对象id值
id: id,
name: this.name,
price: this.price,
time: new Date()
})
},
delFn(id) {
// 通过id找到这条数据在数组中下标
let index = this.list.findIndex(obj => obj.id === id)
this.list.splice(index, 1)
}
},
filters: {
formatDate(val) {
return moment(val).format("YYYY-MM-DD");
},
},
// 2. 计算属性
computed: {
allPrice() {
// 3. 求总价
return this.list.reduce((sum, obj) => sum += obj.price, 0)
},
avgPrice() {
// 4. 求均价 - 保留2位小数
return (this.allPrice / this.list.length).toFixed(2)
}
}
};
</script>
<style >
.red {
color: red;
}
</style>
涉及到的知识点?
computed定义和使用计算属性
数组reduce方法累积运算
4.计算属性_完整写法
目标: 计算属性也是变量
网页输入的值无法传到后端上
<template>
<div>
<span>姓名:</span>
<input type="text" v-model="full">
</div>
</template>
<script>
// 问题:给计算属性赋值 - 需要setter
// 解决:
/*
完整语法:
computed:{
"计算属性名" (){},
"计算属性名":{
set(值){
},
get(){
return 值
}
}
}
*/
export default {
data(){
return {
}
},
computed:{
full:{
// 给full赋值触发set方法
set(val){
console.log(val);
},
// 使用full赋值触发get方法
get(){
return "无名氏"
}
}
}
}
</script>
<style>
</style>
1. 何时用计算属性完整写法?
给计算属性变量赋值时
2. set函数和get函数什么执行?
set接收要赋予的值
get里要返回给这个计算属性具体值
5.案例-小选影响全选
需求: 小选框都选中(手选), 全选自动选中
分析:
- ① 先静态后动态, 从.md拿到静态标签和数据
- ② 循环生成复选框和文字, 对象的c属性和小选框的选中状态, 用v-model双向绑定
- ③ 定义isAll计算属性, 值通过小选框们统计c属性状态得来
小选框如何影响全选框选中状态的?
v-model给全选框绑定isAll计算属性
isAll计算属性里返回统计小选框选中状态结果
6.案例-全选影响小选
- 需求1: 获取到全选状态 – 改装isAll计算属性
- 需求2: 全选状态同步给所有小选框
分析:
- ①: isAll改成完整写法, set里获取到全选框, 勾选的状态值
- ②: 遍历数据数组, 赋给所有小选框v-model关联的属性
全选如何影响小选框选中状态的?
小选框v-model, 关联数组里对象的c属性
isAll计算属性的set方法, 拿到全选框状态
状态值赋给, 数组里每个对象的c属性
7.案例-反选
需求: 点击反选, 让所有小选框, 各自取相反勾选状态
分析:
- ①: 小选框的勾选状态, 在对象的c属性
- ②: 遍历所有对象, 把对象的c属性取相反值赋予回去即可
反选如何实现的? 遍历每个对象, 把c属性的值取反再赋予回去
<template>
<div>
<span>全选:</span>
<!-- 4. v-model 关联全选 - 选中状态 -->
<input type="checkbox" v-model="isAll" />
<button @click="btn">反选</button>
<ul>
<li v-for="(obj, index) in arr" :key="index">
<!-- 3. 对象.c - 关联 选中状态 -->
<input type="checkbox" v-model="obj.c" />
<span>{{ obj.name }}</span>
</li>
</ul>
</div>
</template>
<script>
// 目标: 小选框 -> 全选
// 1. 标签+样式+js准备好
// 2. 把数据循环展示到页面上
export default {
data() {
return {
arr: [
{
name: "猪八戒",
c: false,
},
{
name: "孙悟空",
c: false,
},
{
name: "唐僧",
c: false,
},
{
name: "白龙马",
c: false,
},
],
};
},
// 5. 计算属性-isAll
computed: {
isAll: {
set(val) {
// 7. 全选框 - 选中状态(true/false)
this.arr.forEach(obj => obj.c = val)
},
get() {
// 6. 统计小选框状态 -> 全选状态
// every口诀: 查找数组里"不符合"条件, 直接原地返回false
return this.arr.every(obj => obj.c === true)
}
}
},
methods: {
btn() {
// 8. 让数组里对象的c属性取反再赋予回去
this.arr.forEach(obj => obj.c = !obj.c)
}
}
};
</script>
<style></style> 
四.Vue基础_侦听器
1.侦听器_watch
目标: 可以侦听data/computed属性值的改变
如何侦听到某个变量值改变呢? 使用watch配置项, key是要侦听的data/计算属性名
<template>
<div>
</div>
</template>
<script>
export default {
data(){
return {
name:""
}
},
// 目标:侦听到name值的改变
/*
语法:
watch:{
变量名(newVal,oldVal){
// 变量名对应值改变这里自动触发
}
}
*/
watch:{
// newVal:当前最新值
// oldVal：上一刻值
name(newVal,oldVal){
console.log(newVal,oldVal);
}
}
}
</script>
<style>
</style>
2.侦听器_深度侦听和立即执行
目标: 侦听复杂类型, 或者立即执行侦听函数
1. 如何侦听一个对象/数组呢? 把侦听器写成对象形式, 给handler方法和deep:true
2. 侦听器函数马上执行? immediate: true
<template>
<div>
<input type="text" v-model="user.name">
<input type="text" v-model="user.age">
</div>
</template>
<script>
export default {
data() {
return {
user: {
name: "",
age: 0
}
}
},
// 目标: 侦听对象
/*
语法:
watch: {
变量名 (newVal, oldVal){
// 变量名对应值改变这里自动触发
},
变量名: {
handler(newVal, oldVal){
},
deep: true, // 深度侦听(对象里面层的值改变)
immediate: true // 立即侦听(网页打开handler执行一次)
}
}
*/
watch: {
user: {
handler(newVal, oldVal) {
// user里的对象
console.log(newVal, oldVal);
},
deep: true,
immediate: true
}
}
}
</script>
<style></style>3.案例-品牌管理(数据缓存)
需求1: 把品牌管理的数据实时同步到本地缓存
分析:
- ① 在watch侦听list变化的时候, 把最新的数组list转成JSON字符串存入到localStorage本地
- ② data里默认把list变量从本地取值, 如果取不到给个默认的空数组
效果:
新增/删除 – 刷新页面 – 数据还在
<template>
<div id="app">
<div class="container">
<!-- 顶部框模块 -->
<div class="form-group">
<div class="input-group">
<h4>品牌管理</h4>
</div>
</div>
<!-- 数据表格 -->
<table class="table table-bordered table-hover mt-2">
<thead>
<tr>
<th>编号</th>
<th>资产名称</th>
<th>价格</th>
<th>创建时间</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="obj in list" :key="obj.id">
<td>{{ obj.id }}</td>
<td>{{ obj.name }}</td>
<!-- 如果价格超过100，就有red这个类 -->
<td :class="{ red: obj.price > 100 }">{{ obj.price }}</td>
<td>{{ obj.time | formatDate }}</td>
<td><a href="#" @click="delFn(obj.id)">删除</a></td>
</tr>
<!-- 4. 统计得有数据才显示 -->
<tr v-if="list.length !== 0" style="background-color: #eee">
<td>统计:</td>
<td colspan="2">总价钱为: {{ allPrice }}</td>
<td colspan="2">平均价: {{ avgPrice }}</td>
</tr>
</tbody>
<tfoot v-show="list.length === 0">
<tr>
<td colspan="5" style="text-align: center">暂无数据</td>
</tr>
</tfoot>
</table>
<!-- 添加资产 -->
<form class="form-inline">
<div class="form-group">
<div class="input-group">
<input type="text" class="form-control" placeholder="资产名称" v-model="name" />
</div>
</div>
<div class="form-group">
<div class="input-group">
<input type="text" class="form-control" placeholder="价格" v-model.number="price" />
</div>
</div>
<button class="btn btn-primary" @click.prevent="addFn">添加资产</button>
</form>
</div>
</div>
</template>
<script>
// 目标: 侦听list改变 - 同步到本地localStorage里
// 1. 侦听器-list
import moment from "moment";
export default {
data() {
return {
name: "", // 名称
price: 0, // 价格
// 3. 本地取出缓存list
list: JSON.parse(localStorage.getItem('pList')) || [],
};
},
methods: {
addFn() {
if (this.name.trim().length === 0 || this.price === 0) {
alert("不能为空");
return;
}
let id =
this.list.length === 0 ? 100 : this.list[this.list.length - 1].id + 1;
this.list.push({
// 当前数组最后一个对象的id+1作为新对象id值
id: id,
name: this.name,
price: this.price,
time: new Date(),
});
},
delFn(id) {
// 通过id找到这条数据在数组中下标
let index = this.list.findIndex(obj => obj.id === id)
this.list.splice(index, 1)
}
},
filters: {
formatDate(val) {
return moment(val).format("YYYY-MM-DD");
},
},
computed: {
allPrice() {
return this.list.reduce((sum, obj) => sum += obj.price, 0)
},
avgPrice() {
return (this.allPrice / this.list.length).toFixed(2)
}
},
watch: {
list: {
handler() {
// 2. 存入本地
localStorage.setItem('pList', JSON.stringify(this.list))
},
deep: true
}
}
};
</script>
<style >
.red {
color: red;
}
</style>涉及到了哪些知识点?
watch深度侦听数组, deep: true
localStorage本地缓存里只能存储字符串
JSON.stringify和JSON.parse使用
逻辑或
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
