如何理解：`自定义指令主要是为了重用涉及普通元素的底层 DOM 访问的逻辑` 这句话？

Question

Vue的自定义指令：

自定义指令主要是为了重用涉及普通元素的底层 DOM 访问的逻辑。

如何理解这句话呢？

Answer 1

因为你的自定义指令，最终都会绑定在一个元素上面。
就以 v-model 和 v-show 来举例，v-model 会获取输入框元素内的数据，然后重新赋值给 state。v-show 会按照一些条件去展示/隐藏元素。

都可以看到 v-model 和 v-show 都会去操作真实的DOM元素。

其实也可以看Vue的文档自定义指令 — Vue.js，里面其实也举例了实际使用自定义指令的场景。

Answer 2

在Vue.js中，自定义指令就是给HTML元素添加一些特殊的功能，这些功能通常涉及到对HTML元素的底层DOM操作。你可以把自定义指令看作是一种工具，它可以让你更方便地重复使用一些DOM操作。比如，你可以创建一个自定义指令来让输入框自动获取焦点，然后在任何需要自动获取焦点的输入框上使用这个指令。