18.Composition API（四）高级语法补充

1.自定义指令

之前我们学习了各种指令：v-model、v-for、v-show等，除了这些指令外，Vue允许我们自定义指令。

什么时候使用自定义指令？
需要对DOM元素进行底层操作，这个时候就会用到自定义指令。

注意：在Vue中，代码的复用和抽象主要还是通过组件。

自定义指令分为两种：
自定义局部指令：组件中通过directives选项，只能在当前组件中使用。
自定义全局指令：app的directive方法，可以在任意组件中使用。

案例：某个元素挂载完成后自动获取焦点。
(1)默认实现,不使用自定义指令.

<template>
	<div>
		<input type="text" ref="input">
	</div>
</template>

<script>
	import {
		ref,
		onMounted
	} from "vue";
	export default {
		setup() {
			const input = ref(null)
			onMounted(() => {
				input.value.focus();
			})
			return {
				input
			}
		}
	}
</script>

(2)定义局部指令

<input type="text" v-focus>

export default {
		// 局部指令
		directives:{
			focus:{
				mounted(el){
					el.focus()
				}
			}
		}
	}

(3)定义全局指令
在main.js中定义

const app = createA