Vue30-自定义指令:对象式

一、需求:创建fbind指定

要用js代码实现自动获取焦点的功能!

二、实现

2-1、步骤一:绑定元素 

2-2、步骤二:input元素获取焦点 

此时,页面初始化的时候,input元素并没有获取焦点,点击按钮,修改n的值只有,才获取焦点。

因为:focus函数的位置不对!!!

1、html说明focus函数的位置 

若是将focus函数放在appendchild函数前面,则不生效!!! 

大部分在appendChild之前都可以,有一些功能要在appendChild之后 

2、自定义函数的生命周期 

 

解决方式:fbind写成对象形式,因为函数形式只有两种时机才会调用。

写成对象形式,对象中可以写多个函数!

①、常见的自定义函数对象形式里面的函数: 

 

②、bind函数

bind函数类似于html中的这一部分的代码。

3、解决获取焦点的问题 

注意:

        因为bind函数和update函数的内容一般差不多,所以,要是自定义指令写成函数形式,相当于是对象形式的bind+uodate函数都写了。 

相关推荐

  1. Vue定义指令

    2024-06-14 07:56:03       30 阅读
  2. Vue定义指令

    2024-06-14 07:56:03       31 阅读
  3. Vue-------定义指令

    2024-06-14 07:56:03       18 阅读
  4. Vue定义指令

    2024-06-14 07:56:03       8 阅读
  5. (详解)Vue定义指令

    2024-06-14 07:56:03       40 阅读
  6. vue3定义指令

    2024-06-14 07:56:03       39 阅读

最近更新

  1. WPF自定义模板--Lable

    2024-06-14 07:56:03       0 阅读
  2. 自动化发布:Conda包依赖的持续集成之旅

    2024-06-14 07:56:03       0 阅读
  3. 探索Conda世界:使用conda list命令的全面指南

    2024-06-14 07:56:03       0 阅读
  4. Spark SQL----内置函数Aggregate Functions

    2024-06-14 07:56:03       0 阅读
  5. 掌握Conda配置术:conda config命令的深度指南

    2024-06-14 07:56:03       0 阅读
  6. 常见加密算法介绍

    2024-06-14 07:56:03       1 阅读
  7. Unity3D批量修改名称工具

    2024-06-14 07:56:03       1 阅读
  8. Istio在微服务中释放服务网格的力量

    2024-06-14 07:56:03       1 阅读

热门阅读

  1. IETAB 在线用印失败的问题排查

    2024-06-14 07:56:03       8 阅读
  2. HTML5 新元素

    2024-06-14 07:56:03       10 阅读
  3. 综合数据分析及可视化实战

    2024-06-14 07:56:03       9 阅读
  4. 【React】React 的useDebugValue作用是什么,怎么使用

    2024-06-14 07:56:03       5 阅读
  5. 介绍react

    2024-06-14 07:56:03       6 阅读
  6. van-list 遇到的问题

    2024-06-14 07:56:03       5 阅读
  7. postman接口测试工具详解

    2024-06-14 07:56:03       7 阅读
  8. React@16.x(27)useCallBack

    2024-06-14 07:56:03       10 阅读
  9. 深入理解服务器路由功能:配置与应用详解

    2024-06-14 07:56:03       7 阅读