zoukankan      html  css  js  c++  java
  • 「Vue」自定义指令

    #全局自定义指令
    1.使用Vue.directive()定义全局的指令 v-focus
    2.参数1 指令的名称,在定义的时候,指令的名称前面不需要加v-前缀
    3.但是在调用的时候必须在指令名称前 加上v-前缀进行调用
    4.参数2是一个对象,这个对象身上,有一些指令相关的函数,这些函数在特定阶段执行相关操作
    例1:获取DOM聚焦
    Vue.directive('focus',{
    bind:function(el){ 1.每当指令绑定到元素的时候,就立即执行这个bind函数,只执行一次
    2.每个函数中,第一个参数永远是el,表示被绑定了指令的那个元素,这个el是一个原生的JS DOM对象
    },
    inserted:function(el){ 表示元素插入到DOM中的时候,会执行inserted函数
    el.focus()
    },
    updated:function(el){ 当VNode更新的时候,会执行updated,可能会触发多次

    }
    }
    例2:改变DOM颜色,前段传参
    v-color="'red'" 传参包裹在''中即传入的是字符串,不包裹就会在VM data中找
    Vue.directive('color',{
    bind:function(el,binding){
    el.style.color = binding.value
    binding:一个对象,包含以下属性:
    name:指令名,不包括 v- 前缀。
    value:指令的绑定值,例如:v-my-directive="1 + 1" 中,绑定值为 2。
    oldValue:指令绑定的前一个值,仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
    expression:字符串形式的指令表达式。例如 v-my-directive="1 + 1" 中,表达式为 "1 + 1"。
    arg:传给指令的参数,可选。例如 v-my-directive:foo 中,参数为 "foo"。
    modifiers:一个包含修饰符的对象。例如:v-my-directive.foo.bar 中,修饰符对象为 { foo: true, bar: true }。
    }
    })
    #私有自定义指令
    /* 指令名称不能有大写 */
    <td v-fontsize="'30px'">{{item.id}}</td> 也可以传入int值
    directives:{
    fontsize:{
    inserted:function(el,binding){
    el.style.fontSize = parseInt(binding.value)+'px' 增加代码的兼容性
    }
    }
    }
    bind 和 update函数可以简写
    directives:{
    fontsize:function(el,binding){
    el.style.fontSize = parseInt(binding.value)+'px'
    }
    }

  • 相关阅读:
    172. Factorial Trailing Zeroes
    96. Unique Binary Search Trees
    95. Unique Binary Search Trees II
    91. Decode Ways
    LeetCode 328 奇偶链表
    LeetCode 72 编辑距离
    LeetCode 226 翻转二叉树
    LeetCode 79单词搜索
    LeetCode 198 打家劫舍
    LeetCode 504 七进制数
  • 原文地址:https://www.cnblogs.com/wrxblog/p/10504410.html
Copyright © 2011-2022 走看看