Vue

drective自定义指令

联系站长 作者:web知道,未知,网络大神 来源:未知 2018-10-06 12:41 我要评论

创建自定义指令:Vue.drective(),它有两个参数,第一个是自定义的名称(建议全部小写,因为如果使用cemal命名法,那么vue在使用...

// 创建自定义指令:Vue.drective(),它有两个参数,第一个是自定义的名称(建议全部小写,因为如果使用cemal命名法,那么vue在使用的时候会将这些单词拆分开,同时使用-连接  例:v-my-focus),第二个自定义指定的配置项它是一个对象
 
// bind: 只调用一次,指令第一次绑定到元素时调用,用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。
// inserted: 被绑定元素插入父节点时调用(父节点存在即可调用,不必存在于 document 中)。
// update: 被绑定元素所在的模板更新时调用,而不论绑定值是否变化。通过比较更新前后的绑定值,可以忽略不必要的模板更新(详细的钩子函数参数见下)。
// componentUpdated: 被绑定元素所在模板完成一次更新周期时调用。
// unbind: 只调用一次, 指令与元素解绑时调用
 
 
    
// 创建获取焦点的自定义指令
Vue.directive('myFocus',{
    inserted(el,binding,node){
    // console.log(el)
    // console.log(binding)
    // console.log(node)
    //输入框自动聚焦
    el.focus()
    }
})
使用:v-my-focus
 
// inserted钩子函数:当dom元素插入到页面中完成时触发,并成功的添加指令
// inserted默认有三个参数
// el:当前添加了这个自定义指令的dom元素
// binding:数据,用户使用自定义指令时传递的数据-这个数据需要在data创建
// node:当前添加了这个自定义指令的dom节点--对象
 
 
 
 
// 创建设置颜色的全局自定义指令
Vue.directive('mycolor',{
    inserted(el,binding){
       // console.log(binding.value)
       el.style.color=binding.value
    }
})
 
 
//创建局部自定义指令
directives:{
  mycolor:{
    inserted(el,binding){
        el.style.color=binding.value
}
  }
}



本文如有侵犯版权请联系站长删除。

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源;3.作者投稿可能会经我们编辑修改或补充。

相关文章
网友点评