尚硅谷Vue系列教程学习笔记（4）

• 参考课程：《尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通》
• 参考链接：https://www.bilibili.com/video/BV1Zy4y1K7SH?vd_source=4f4d3466cdc2c5a2539504632c862ce7
• 笔记上传说明：上述课程中共有168节小课，对每10次课的笔记整合之后上传一次。

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
                        })
                    }
                }
            }


        })




1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

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
                    })
                }
            }
        })


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

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
                }
            }
        })


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56

033-更新时的一个问题

更新时面对的问题：

 


        
        

            
            
遍历列表
            点击更新张三的信息
            

                {{p.name}}-{{p.id}}-{{p.age}}
            
        

    

//js代码如下：
 


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

上述代码中虽然点击按钮之后，在浏览器的控制台中调用vm.persons[0].name属性可以发现persons数组中的第一个项已经更改，但是Vue模板并没有监测到，这就是以这种方式进行更新时的一个问题。

具体原因解释详见034-Vue更新数据原理一节笔记。

034-Vue监测数据的原理_对象

Vue实现监测数据原理，下面为较简单的Vue监测数据代码：

    

    


    


    



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

上述代码中，只要是存在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","男")

1
2

使用Vue.set()方法实现点击之后给数据对象添加一个性别代码示例：

        
学校名称：{{name}}
        
学校地址：{{address}}
        
校长是：{{leader}}

        


        点我增加性别属性
        
学生姓名：{{student.name}}
        
学生年龄：真实{{student.age.rAge}}, 对外：{{student.age.sAge}}
        
学生性别：{{student.sex}}

        

            
{{f.name}}-{{f.age}}
        
    



//js代码：


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53

036-Vue监测数据的原理_数组

重点：Vue中不会对数组中的某个元素匹配get和set元素

Vue中更新数组数据的方法：

        
        

            
            
遍历列表
            点击更新张三的信息
            

                {{p.name}}-{{p.id}}-{{p.age}}
            
        

    


//js代码




//即使用vm对象为数组数据提供的splice()方法即可
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

重点：vm._data.arr.push === Array.prototype.push，结果为false，因为此时vm对象中调用的push方法是Vue提供的一个新的push方法。

总结：Vue对数组的监测实际上是对数组身上常用的数组方法进行包装之后，进行监视的。

037-总结Vue监视数据方法

总结上述Vue监视数据的方法案例代码：

    

    

        
学生信息

        
操作
        年龄增加+1岁
        添加性别属性，默认值：男
        修改性别属性到与当前相反的值
        在列表首位添加一个朋友
        修改第一个朋友的名字为：张三
        添加一个爱好
        修改第一个爱好为：开车



        
姓名：{{student.name}}
        
年龄：{{student.age}}
        
性别：{{student.sex}}

        
该学生的爱好（多个）
        

            
{{h}}
        


        
该学生的朋友（多个）
        

            
{{f.name}}-{{f.age}}
        
    


    


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88

文字总结：
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代码
 


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

重点：使用v-model.lazy可以实现当输入框失去焦点时，才收集输入框中用户输入的内容。

使用Vue表单提交内容案例代码：

     

    

        

        账号：

    


        密码：

    


    性别：
    男：
    女：


    

    年龄：
    

    


    爱好：
    学习
    看电影
    听音乐

    


    所属校区：
    
        请选择校区：
        北京
        上海
        深圳
        武汉

    

    


    其他信息：
    

    



    阅读并同意遵守《用户协议》


    点击提交

            
        
        
    




    



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91

039-过滤器

重点：多个组件之间的过滤器配置不能够共享。

Vue中配置全局过滤器的方法：

 //配置全局过滤器
        Vue.filter('mySlice',function(value){
            return value.slice(0,4)
        })


1
2
3
4
5
6
7

Vue中的过滤器在页面中有两种配置方法：
1.插值语法实现：

//配置全局过滤器
        Vue.filter('mySlice',function(value){
            return value.slice(0,4)
        })

//页面代码：
过滤器中设置只显示年份
        {{time | timeFilters | mySlice}}

1
2
3
4
5
6
7
8
9
10

2.v-bind实现过滤器的配置：

//配置全局过滤器
        Vue.filter('mySlice',function(value){
            return value.slice(0,4)
        })



//前端html页面中代码

测试过滤器的v-bind用法
        

1
2
3
4
5
6
7
8
9
10
11
12

过滤器总结：
1.定义：对要显示的数据进行特定格式化后再显示（适用于一些简单的逻辑处理）
2.语法：
（1）注册过滤器：Vue.filter(name, callback) 或 new Vue(filters:{})
（2）使用过滤器：{{xxx | 过滤器名}} 或 v-bind:属性 = “xxx | 过滤器名”
备注：
（1）过滤器也可以接收额外的参数，多个过滤器也可以实现串联
（2）并没有改变技术的数据，是产生新的对应的数据

040-v-text指令

重点：v-text会拿到name的值，然后替换掉div中原来的数据。

 


1
2

注意：v-text会将其中的数据都当做正常的文本进行解析，尽管其中含有很多’h2’等页面标签，但它并不会解析页面标签。

v-text作用：向其所在的标签中渲染data中的数据内容。

//截止到2022.8.16晚上22：56为止