vue学习—基于vue2中的vue指令、插槽、内置组件

1.vue的指令

1.1 v-pre

让标签内容原样显示，而不是先编译后显示

{{msg}}
    
{{1+1}}
1
2

1.2 v-once

作用：让元素/组件只渲染一次，为了避免无效的更新

元素只渲染一次，当页面运行的时候将msg渲染到页面当点击后msg会变但是不会再次渲染到页面

{{msg}}

 data(){
    return {
      msg:'Vuejs项目'
    }
  }
1
2
3
4
5
6
7

1.3 v-cloak

避免元素在渲染结束前显示双大括号

解决将渲染结束后的结果渲染到页面上，双大括号不会出现

 
{{msg}}
 
 data(){
    return {
      msg:'Vuejs项目'
    }
  }
1
2
3
4
5
6
7

2.插槽

表格组件，轮播图组件中都可以用到插槽

2.1默认插槽

当是默认插槽时可以直接在父组件中写内容，在子组件中用占位使得在父组件中写的内容在子组件的位置渲染

父组件中：

      
      
      
    
1
2
3
4
5

子组件中：

            
1
2

2.2具名插槽

当是具名插槽时，用template模板包裹需要渲染的内容，在template标签中写上子组件插槽对应的名字

v-slot:名字 可以缩写#名字

用插槽动态决定组件内部内容是什么，在组件内部占个位置，通过内容决定，不同插槽有不同的名字

父组件中：

1
2
3

子组件中：

 
            

1
2
3

2.3作用域插槽

作用域插槽可以延伸子组件内数据的使用范围，接收的数据只能在子组件模板中使用不能 在其他地方使用

#名字=“scope” 为了接收子组件中的数据 要在子组件中将内容放到插槽中

父组件中：

1
2
3
4

子组件中：

data(){
    return {
        visible:false,
        // 作用域仅限于当前子组件内容
        msg:'我是dialog组件',
    }
},
1
2
3
4
5
6
7
8
9

3.内置的组件

3.1动态组件

component：根据下标的变化，动态的切换组件（卸载上一个组件，搭载下一个组件）

特点是：is属性的值可以是具体的组件，也可以是组件的名字

3.2动画组件

transition：其中name属性可以规定动画名称的前缀，mode设置入场动画，出··场动画的顺序，out-in 先出后入，in-out 先入后出

3.3缓存组件

keep-alive：内部组件在切换时会缓存起来，组件在切换时不需要显示的组件会缓存在计算机内存中而不是销毁当组件重新显示时只是从缓存中取出显示即可不会重新实例化，当组件第一次显示的时候会被实例化并挂载

keep-alive 内的max属性，一旦缓存的组件过多会占用过多的计算机内存，可以用max来设置，最多可以缓存多少个组件

keep-alive 缓存组件需要紧挨着动态组件的位置否则没有效果

keep-alive中的属性：

max属性：如果max最多可以容纳十个组件，当第十一个组件的时候会将队列中最先放进去的组件销毁掉，将第十一个放进去，一直保持内存中放十个 可以控制内存的大小，缓解内存占用情况

include=“组件名” 手动指定内部组件在切换时只有包含该名字的组件才会被缓存其他组件会被销毁，并不是每个组件都需要缓存，同时也不一定缓存一个可以缓存多个组件，多个组件之间用逗号隔开

exclude=“组件名” 用于指定的组件不会被缓存，有多个组件只有几个组件不需要缓存时可以用exclude属性

对于需要频繁切换的组件而言可以用缓存组件，缺点：存在内存泄漏的风险

示例代码

父组件：

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
92
93
94
95
96
97
98
99
100
101
102

Home子组件

  
  
  
  
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

Mine子组件

  
  
  
  
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

Order子组件

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

3.4扩展的生命周期函数

activated和deactivated都是缓存相关生命周期钩子

1. activated：组件激活了（在激活的时候重新执行某些代码比如重新发请求到最新的数据）
2. deactivated：组件缓存了
3. errorCaptured：错误捕获函数