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'
    }
    }

  • 相关阅读:
    一对一关联
    一对多关联
    软删除
    分层控制器
    系统的助手函数
    tp5命令行基础介绍
    PHP 开启跨域
    生成数据库模型文件
    REST API 安全设计指南
    jquery-Ajax请求用例码
  • 原文地址:https://www.cnblogs.com/wrxblog/p/10504410.html
Copyright © 2011-2022 走看看