test

v-cloak: 使用 v-cloak 指令可以有效解决屏幕闪动。

有时候，页面没渲染之前就会出现vue代码块，例如下图。使用v-cloak可以很好解决这种问题。
在这里插入图片描述

{{ content }}

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

官网是这么解释的:

在这里插入图片描述

例如：可以实现页面缓存，比如从编辑页切出去再切进来，页面还是处于编辑状态.

需要在router.js中设置meta属性，meta下的keepAlive属性设置为true，代表这个页面需要进行缓存。

import Vue from ‘vue’
import Router from ‘vue-router’
import HelloWorld from ‘@/components/HelloWorld’
import is from ‘@/view/is’
import list from ‘@/view/list’
import detail from ‘@/view/detail’

Vue.use(Router)

export default new Router({
routes: [
{
path: ‘/’,
name: ‘HelloWorld’,
component: HelloWorld,
meta: {
keepAlive: false,
title: ‘HelloWorld’
}
},
{
path: ‘/is’,
name: ‘is’,
component: is,
meta: {
keepAlive: false,
title: ‘is’
}
},
{
path: ‘/list’,
name: ‘list’,
component: list,
meta: {
keepAlive: true,
title: ‘list’
}
},
{
path: ‘/detail’,
name: ‘detail’,
component: detail,
meta: {
keepAlive: true,
title: ‘detail’
}
}
]
})
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
在app.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
在详情页detail.vue中，注意beforeRouteEnter和beforeRouteLeave两个方法。

New York London Sydney - Male Female On Off Submit Cancel 跳转到列表页 跳转到is页

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
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
插槽slot
解构插槽 Prop：可以传递子组件的变量

// 子组件

// 父组件

<template #one="{childStr}">{{childStr}}

two


default


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
效果：// i am a child two default

强制刷新某个div

vue实现F5刷新整个页面无空白无间隔时间

修饰符
事件修饰符：

.stop：相当于原生JS中event.stopPropagation()，阻止事件冒泡。

.prevent：相当于原生JS中event.preventDefault()，阻止默认事件的发生。

.capture：事件冒泡的方向相反，事件捕获由外到内。即有冒泡发生时，有该修饰符的dom元素会先执行，如果有多个，从外到内依次执行。

.self：只会触发自己范围内的事件，不包含子元素。
在这里插入图片描述

.once：事件只能触发一次。

.passive：事件会执行默认方法。

注：

每次事件产生，浏览器都会去查询一下是否有preventDefault阻止该次事件的默认动作。我们加上passive就是为了告诉浏览器，不用查询了，我们没用preventDefault阻止默认动作。
passive和prevent冲突，不能同时绑定在一个监听器上
按键修饰符： 去官网查看即可，这里不过多解释。Vue.js-修饰符

:is: 动态组件

优点：使代码更符合HTML语法验证

官网是这么解释的：
在这里插入图片描述

// 父组件：

// 子组件：

我是tr

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
@click.native: 在封装好的组件上使用，要加上.native才能click。

router-link 加上@click事件，绑定的事件会无效因为：router-link的作用是单纯的路由跳转，会阻止click事件，你可以试试只用click不用native,事件是不会触发的。此时加上.native，才会触发事件。
根据Vue2.0官方文档关于父子组件通讯的原则，父组件通过prop传递数据给子组件，子组件触发事件给父组件。但父组件想在子组件上监听自己的click的话，需要加上native修饰符。
// router-link
<router-link :to="{name:‘detail’}" @click.native=“handleNative”>
测试native

// 自己封装的组件
<is-component @click.native=“handleNative”>