zoukankan      html  css  js  c++  java
  • 前端——框架——Vue——指令(自定义)

      创建自定义指令的方式有两种,

    第一种方式调用Vue的directive方法,它是全局的。

    第二种使用组件的directives属性,它只适用于此组件。

    示例参考

    1、格式

    指令的格式如下:

    v-directiveName:[argument].modifiers=“value”
    

      directiveName:名称,例如v-for的名称为for

    argument:参数, 大部分指令没有

    modifiers:修饰符,例如v-on.prevent,其中prevent为on指令的修饰符

    value:指令的值,它有三种形式,第一种是值,第二种是表达式,第三种是组件的属性名。第一种,第三种较为常见。

    2、 实现方式

    格式如下:

    Vue.directive('name', {
       // 钩子函数
       hookFunctionName: function(argument){
    
       },
       anotherFunctionName:function(argument){
    
       }
    })
    

      其中name为指令的名称, hookFunctionName为钩子方法的名称,argument为其参数。

      当钩子函数只有bind,update时,还有另外一种格式,此时function被共用

    Vue.directive('name',function(){
       // 函数体
    })
    

    3、 钩子方法

    bind:当指令绑定到节点时触发,绑定过程只有一次,所以只会触发一次。

    inserted:当节点被插入到父节点时触发。

    update:当节点需要更新时触发,即元素以及其子节点数据存在变化时触发。

    componentUpdated:只有节点自身更新时触发

    unbind:当指令解绑时触发,解绑过程只有一次,只会触发一次。

    4、参数

    el:全称为element,为绑定的DOM节点

    binding:它是一个对象,描述指令的信息,

      1. name:指令名称
      2. value:指令的值,如果是属性时,是属性的值,其他情形下不变
      3. oldValue:指令的旧值,只有在update,componentUpdated钩子方法时使用
      4. expression:指令的表达式,只有当value为表达式时,才有值。
      5. arg:指令的参数,可以是任意的JS类型,数组,对象,字面量都可行。
      6. modifiers:指令的修饰符

    vnode:虚拟的vNode,它对应DOM节点

    oldVnode:虚拟的旧vNode,它对应旧的DOM节点

  • 相关阅读:
    JWebFileTrans(JDownload): 一款可以从网络上下载文件的小程序(二)
    JWebFileTrans: 一款可以从网络上下载文件的小程序(一)
    Jcompress: 一款基于huffman编码和最小堆的压缩、解压缩小程序
    Codeigniter框架前后台部署(多目录部署)
    ubuntu-server部署php+mysql运行环境
    成熟的标志就是生活越来越专注
    西门子PLC存储器、地址区
    VS快捷键
    SQL Server 连接字符串和身份验证 学习
    C#特性
  • 原文地址:https://www.cnblogs.com/rain144576/p/14752857.html
Copyright © 2011-2022 走看看