《Vue3实战》第八章自定义指令

「爱情、让人受尽委屈。」 2023-09-26 20:56 38阅读 0赞

《Vue3实战》篇章整体栏目  
—————————————————————————————  
[【第一章】node.js/npm安装、配置][node.js_npm]  
[【第二章】创建项目和目录结构][Link 1]  
[【第三章】基础语法][Link 2]  
[【第四章】条件语句、循环语句][Link 3]  
[【第五章】计算、监听属性][Link 4]  
[【第六章】样式绑定和事件处理][Link 5]  
[【第七章】表单][Link 6]  
[【第八章】自定义指令][Link 7]  
[【第九章】路由][Link 8]  
[【第十章】Element plus指南][Element plus]  
【第十一章】Vue3实战之打造新闻系统前端模板  
—————————————————————————————

#### 目录 ####

*  前言
 *  1、例子1 获取输入框焦点
 *   *  1.1、钩子函数
     *   *  1.1.1、钩子函数参数
         *   *  1、el
             *  2、binding
             *  3、vnode
             *  4、prevNode

—————————————————————————————

## 前言 ##

Vue 允许注册自定义指令

## 1、例子1 获取输入框焦点 ##

<template>
      <div>
        <input type='text' v-focus/>
      </div>
    </template>
    <script>
    export default {
        
      name: 'HelloWorld',
      directives:{
        
        focus:{
        
          mounted(el){
        
            el.focus();
          }
        }
      }
    }
    </script>

### 1.1、钩子函数 ###

指令定义函数提供了几个钩子函数（可选）

<table> 
 <thead> 
  <tr> 
   <th align="left">钩子函数</th> 
   <th align="left">作用</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">created</td> 
   <td align="left">: 在绑定元素的属性或事件监听器被应用之前调用。</td> 
  </tr> 
  <tr> 
   <td align="left">beforeMount</td> 
   <td align="left">: 指令第一次绑定到元素并且在挂载父组件之前调用。</td> 
  </tr> 
  <tr> 
   <td align="left">mounted</td> 
   <td align="left">: 在绑定元素的父组件被挂载后调用。</td> 
  </tr> 
  <tr> 
   <td align="left">beforeUpdate</td> 
   <td align="left">: 在更新包含组件的 VNode 之前调用。。</td> 
  </tr> 
  <tr> 
   <td align="left">updated</td> 
   <td align="left">: 在包含组件的 VNode 及其子组件的 VNode 更新后调用。</td> 
  </tr> 
  <tr> 
   <td align="left">beforeUnmount</td> 
   <td align="left">: 当指令与在绑定元素父组件卸载之前时，只调用一次。</td> 
  </tr> 
  <tr> 
   <td align="left">unmounted</td> 
   <td align="left">: 当指令与元素解除绑定且父组件已卸载时，只调用一次。</td> 
  </tr> 
 </tbody> 
</table>

![在这里插入图片描述][93d4c734276a40bda26769e81dd4dad1.png]

#### 1.1.1、钩子函数参数 ####

钩子函数的参数有：

##### 1、el #####

el 指令绑定到的元素。这可用于直接操作 DOM。

##### 2、binding #####

binding 是一个对象，包含以下属性：

*  instance：使用指令的组件实例。
 *  value：传递给指令的值。例如，在v-my-directive=“1 + 1” 中，该值为 2。
 *  oldValue：先前的值，仅在beforeUpdate 和updated 中可用。值是否已更改都可用。
 *  arg：参数传递给指令 (如果有)。例如在 v-my-directive:foo 中，arg 为"foo"。
 *  modifiers：包含修饰符 (如果有) 的对象。例如在v-my-directive.foo.bar 中，修饰符对象为\{foo: true，bar: true\}。
 *  dir：一个对象，在注册指令时作为参数传递。例如，在以下指令中

{
        
      mounted(el) {
        
        el.focus()
      }
    }

##### 3、vnode #####

作为 el 参数收到的真实 DOM 元素的蓝图。

##### 4、prevNode #####

上一个虚拟节点，仅在 beforeUpdate 和 updated 钩子中可用。

[node.js_npm]: https://blog.csdn.net/s445320/article/details/130107403
[Link 1]: https://blog.csdn.net/s445320/article/details/130108162
[Link 2]: https://blog.csdn.net/s445320/article/details/130198834
[Link 3]: https://blog.csdn.net/s445320/article/details/130200350
[Link 4]: https://blog.csdn.net/s445320/article/details/130200783
[Link 5]: https://blog.csdn.net/s445320/article/details/130200903
[Link 6]: https://blog.csdn.net/s445320/article/details/130213404
[Link 7]: https://blog.csdn.net/s445320/article/details/130213662
[Link 8]: https://blog.csdn.net/s445320/article/details/130110029
[Element plus]: https://blog.csdn.net/s445320/article/details/130197081
[93d4c734276a40bda26769e81dd4dad1.png]: https://img-blog.csdnimg.cn/93d4c734276a40bda26769e81dd4dad1.png