Vue中列表过滤+监测数据原理（数组案例）+Vue中过滤器的使用+v-text指令，尚硅谷Vue系列教程学习笔记（4）
尚硅谷Vue系列教程学习笔记（4）
- 参考课程：《尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通》
- 参考链接：https://www.bilibili.com/video/BV1Zy4y1K7SH?vd_source=4f4d3466cdc2c5a2539504632c862ce7
- 笔记上传说明：上述课程中共有168节小课，对每10次课的笔记整合之后上传一次。
- 详细代码案例请移步本人gitee仓库： vue_basic案例代码实现
目录
-
- 尚硅谷Vue系列教程学习笔记（4）
-
-
- 031-列表过滤
- 032-列表排序
- 033-更新时的一个问题
- 034-Vue监测数据的原理_对象
- 035-Vue.set()方法
- 036-Vue监测数据的原理_数组
- 037-总结Vue监视数据方法
- 038-收集表单数据
- 039-过滤器
- 040-v-text指令
-
031-列表过滤
实现对列表内容搜索的方法步骤：
1.收集用户的输入内容；
2.将收集到的内容应用到列表中；
案例—名字过滤：
//使用监视属性实现
遍历列表
-
{{p.name}}-{{p.id}}-{{p.age}}
//js代码如下：
new Vue({
el: "#root",
data: {
keyWords:"",
persons: [
{ id: '001', name: '张三', age: 22 },
{ id: '002', name: '李四', age: 24 },
{ id: '003', name: '王五', age: 26 },
{ id: '004', name: '一哥', age: 26 }
],
filPersons:[]
},
//用watch计算属性实现
watch:{
keyWords:{
immediate:true,
handler(val){
// console.log(val)
this.filPersons = this.persons.filter((p) => {
return p.name.indexOf(val) !== -1
})
}
}
}
})
2.使用计算属性实现
遍历列表
-
{{p.name}}-{{p.id}}-{{p.age}}
//js代码：
new Vue({
el: "#root",
data: {
keyWords:"",
persons: [
{ id: '001', name: '张三', age: 22 },
{ id: '002', name: '李四', age: 24 },
{ id: '003', name: '王五', age: 26 },
{ id: '004', name: '一哥', age: 26 }
]
},
//使用computed计算属性
computed:{
filPersons(val){
return this.persons.filter((p)=>{
return p.name.indexOf(this.keyWords) !== -1
})
}
}
})
032-列表排序
使用计算属性实现列表排序的案例：
遍历列表
-
{{p.name}}-{{p.id}}-{{p.age}}
//js代码
new Vue({
el: "#root",
data: {
keyWords:"",
sortType:0, //0代表原顺序，1代表升序，2代表降序
persons: [
{ id: '001', name: '张三', age: 22 },
{ id: '002', name: '李四', age: 24 },
{ id: '003', name: '王五', age: 26 },
{ id: '004', name: '一哥', age: 26 }
]
},
//使用computed计算属性
computed:{
filPersons(val){
//保留filPersons过滤后的数组
const arr = this.persons.filter((p)=>{
return p.name.indexOf(this.keyWords) !== -1
})
//然后进行排序
if(this.sortType !== 0){//表示需要排序
arr.sort((a,b)=>{
return this.sortType === 1 ? b.age- a.age : a.age - b.age
})
}
return arr
}
}
})
033-更新时的一个问题
更新时面对的问题：
遍历列表
-
{{p.name}}-{{p.id}}-{{p.age}}
//js代码如下：
上述代码中虽然点击按钮之后，在浏览器的控制台中调用vm.persons[0].name属性可以发现persons数组中的第一个项已经更改，但是Vue模板并没有监测到，这就是以这种方式进行更新时的一个问题。
具体原因解释详见034-Vue更新数据原理一节笔记。
034-Vue监测数据的原理_对象
Vue实现监测数据原理，下面为较简单的Vue监测数据代码：
上述代码中，只要是存在data中的数据，Vue都会解析到最后不是对象为止，然后分别为每个对象生成一个get和set方法，然后在用户修改vm中数据对象时，set方法会被调用，然后set方法中还有更新真实DOM的逻辑，进而Vue实现更改data中数据对象之后，前端真实DOM中也会发生改变的功能。
035-Vue.set()方法
重点：Vue中对undefined的属性值不显示。
对于在创建vm实例对象时没有设置的属性，在控制台中使用vm._data.sex = xxx之后，尽管在vm中存在新设置的sex属性，但是没有给sex属性创建get和set方法，因此Vue模板无法解析新创建的sex属性。
Vue不允许添加一个属性在vm实例身上，即下面的代码是不被Vue允许的：
Vue.set(vm._data,"sex","男")
使用Vue.set()方法实现点击之后给数据对象添加一个性别代码示例：
学校名称：{{name}}
学校地址：{{address}}
校长是：{{leader}}
学生姓名：{{student.name}}
学生年龄：真实{{student.age.rAge}}, 对外：{{student.age.sAge}}
学生性别：{{student.sex}}
- {{f.name}}-{{f.age}}
//js代码：
036-Vue监测数据的原理_数组
重点：Vue中不会对数组中的某个元素匹配get和set元素
Vue中更新数组数据的方法：
遍历列表
-
{{p.name}}-{{p.id}}-{{p.age}}
//js代码
//即使用vm对象为数组数据提供的splice()方法即可
重点：vm._data.arr.push === Array.prototype.push，结果为false，因为此时vm对象中调用的push方法是Vue提供的一个新的push方法。
总结：Vue对数组的监测实际上是对数组身上常用的数组方法进行包装之后，进行监视的。
037-总结Vue监视数据方法
总结上述Vue监视数据的方法案例代码：
学生信息
操作
姓名：{{student.name}}
年龄：{{student.age}}
性别：{{student.sex}}
该学生的爱好（多个）
- {{h}}
该学生的朋友（多个）
- {{f.name}}-{{f.age}}
文字总结：
1.Vue会监视data中所有层次的数据；
2.如何监视对象中的数据：
通过setter实现监视，且要在new Vue时就传入要监测的数据；
（1）对象中后追加的属性，Vue默认不做响应式处理；
（2）如需给后添加的属性做响应式处理，使用如下代码：
Vue.set(target,propertyName/index,value)
vm.$set(target,propertyName/index,value)
3.如何监测数组中的数据：
通过包裹数组更新元素的方法实现，本质就是做了两件事：
（1）调用原生对应的方法对数组进行更新；
（2）重新解析模板，进而更新页面；
4.在Vue中修改数组中间的某个元素一定要用如下方法：
（1）使用API：push()/pop()/shift()/unshift()/splice()/sort()/reverse()
（2）Vue.set()/vm.$set()
重点注意：Vue.set()/vm.$set() 不能给vm或vm的根数据对象 添加属性！！！
038-收集表单数据
重点：Vue中对于checkbox类型的勾选框，在勾选时，需要给每个checkbox框设置value值，然后设置v-model绑定的属性为[]数组类型即可，代码如下所示。
爱好：
学习
看电影
听音乐
//js代码
重点：使用v-model.lazy可以实现当输入框失去焦点时，才收集输入框中用户输入的内容。
使用Vue表单提交内容案例代码：
039-过滤器
重点：多个组件之间的过滤器配置不能够共享。
Vue中配置全局过滤器的方法：
//配置全局过滤器
Vue.filter('mySlice',function(value){
return value.slice(0,4)
})
Vue中的过滤器在页面中有两种配置方法：
1.插值语法实现：
//配置全局过滤器
Vue.filter('mySlice',function(value){
return value.slice(0,4)
})
//页面代码：
过滤器中设置只显示年份
{{time | timeFilters | mySlice}}
2.v-bind实现过滤器的配置：
//配置全局过滤器
Vue.filter('mySlice',function(value){
return value.slice(0,4)
})
//前端html页面中代码
测试过滤器的v-bind用法
过滤器总结：
1.定义：对要显示的数据进行特定格式化后再显示（适用于一些简单的逻辑处理）
2.语法：
（1）注册过滤器：Vue.filter(name, callback) 或 new Vue(filters:{})
（2）使用过滤器：{{xxx | 过滤器名}} 或 v-bind:属性 = “xxx | 过滤器名”
备注：
（1）过滤器也可以接收额外的参数，多个过滤器也可以实现串联
（2）并没有改变技术的数据，是产生新的对应的数据
040-v-text指令
重点：v-text会拿到name的值，然后替换掉div中原来的数据。
注意：v-text会将其中的数据都当做正常的文本进行解析，尽管其中含有很多’h2’等页面标签，但它并不会解析页面标签。
v-text作用：向其所在的标签中渲染data中的数据内容。
//截止到2022.8.16晚上22：56为止