Vue2.x Todo指令自动聚焦，如何改写为长尾？

本文共计819个文字，预计阅读时间需要4分钟。

我们希望用户双击+todo+进入编辑状态后，直接输入框自动获取焦点，而不需要手动点击。输入框有一个+focus+方法可以帮助我们实现这个功能。目前的问题是，如何在Vue中获取这个焦点。

我们希望用户双击 todo 进入编辑状态后输入框自动获取焦点，而不是需要先手动点一下。input 元素有一个 focus 方法可以来帮我们完成这个事情，但现在的问题是如何在 Vue 中获得这个 input 元素，从而来操作它。Vue 的自定义指令可以完成这个功能。

我们先来看看 Vue 官网的一个示例：

然而，有的情况下，你仍然需要对普通 DOM 元素进行底层操作，这时候就会用到自定义指令。举个聚焦输入框的例子，如下：

一个输入框：

当页面加载时，该元素将获得焦点 (注意： autofocus 在移动版 Safari 上不工作)。事实上，只要你在打开这个页面后还没点击过任何内容，这个输入框就应当还是处于聚焦状态。