Vue基础教程（54）指令之自定义指令：别愣着了！Vue自定义指令真香警告：让你的代码从此“开挂”！

哎，哥们儿姐们儿，咱学Vue的时候，是不是把v-model, v-for, v-if这几个指令玩得飞起？感觉已经能驾驭整个世界了？但写着写着，是不是偶尔会遇到一些让你抓耳挠腮的场景？

场景一： 你做个搜索页面，有个输入框，需求是页面一打开，光标就得自动怼进那个框里。你吭哧吭哧写了个mounted生命周期，在里面document.getElementById(‘input’).focus()。一个页面还行，要是有十个页面都需要呢？你是不是得把这坨代码复制粘贴十遍？

场景二： 产品经理一拍大腿：“我们要做个‘一键复制’功能，用户点一下按钮就能复制优惠码！” 你心里一凉，又得去和那个有点反人类的Clipboard API打交道，然后又在各个组件里重复编写document.execCommand(‘copy’)之类的代码。

这时候，你内心OS一定是：”Vue啊Vue，你不是号称响应式、组件化吗？这种DOM操作能不能也优雅一点？“

答案当然是：能！而且必须能！

这就是咱们今天要盘的主角——Vue自定义指令。它不是什么黑科技，而是Vue留给我们的一个超级灵活的“后门”，专门用来处理这种直接操作底层DOM的脏活累活。说白了，它就是让你可以自己发明一个以v-开头的“新指令”！

一、自定义指令是个啥？能吃吗？

你可以把Vue内置的指令（比如v-bind）想象成智能手机出厂自带的APP，比如相机、短信，能满足基本需求。而自定义指令，就是你从应用商店下载的APP！比如“美图秀秀”、“王者荣耀”，专门解决特定问题，让你的手机（项目）功能更强大、更个性化。

它的核心思想是：将频繁的DOM操作封装成一个可复用的指令，哪里需要就“贴”在哪里，像贴符一样好用！

二、手搓一个指令：从“Hello World”开始

在Vue里，注册指令有两种方式：

1. 全局注册： 就像开连锁店，在全村（整个应用）都有效。用Vue.directive方法。
2. 局部注册： 就像私人订制，只在当前组件生效。在组件的options里写directives选项。

咱先来个最简单的全局指令v-focus，解决上面提到的“自动聚焦”问题。