# 全局指令
// 注册一个全局自定义指令 `v-focus`
Vue.directive('focus', {
// 当被绑定的元素插入到 DOM 中时……
inserted: function (el) {
// 聚焦元素
el.focus()
}
})
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
# 局部指令，组件中也接受一个 directives 的选项
directives: {
focus: {
// 指令的定义
inserted: function (el) {
el.focus()
}
}
}
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
# 具名插槽
- 组件写法
<!-- drag组件 -->
<template>
<div class="drag-box" ref="box">
<div class="left">
<!--左侧div内容-->
<slot name="drag-left"></slot>
</div>
<div class="resize" title="收缩侧边栏">
⋮
</div>
<div class="mid">
<!--右侧div内容-->
<slot name="drag-right"></slot>
</div>
</div>
</template>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
- 引用组件，让用户可以拓展组件，去更好地复用组件和对其做定制化处理
<drag>
<div slot="drag-left">
<!-- 自定义内容 -->
</div>
<div slot="drag-right">
<!-- 自定义内容 -->
</div>
</drag>
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
# 普通监听
watch: {
initData(newV, oldV) {
// do something, 可使用this
// console.log(newV)
}
}
1
2
3
4
5
6
2
3
4
5
6
# 深度监听
watch: {
initData: { //深度监听，可监听到对象、数组的变化
handler(newV, oldV) {
// do something, 可使用this
// console.log(newV)
},
immediate: true,
deep: true
}
}
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10