美文网首页vue
vue自定义全局指令

vue自定义全局指令

作者: crayona | 来源:发表于2019-10-14 10:45 被阅读0次

Vue.directive('指令名',{

钩子函数1(){},

钩子函数2(){}

})

-------------------------

钩子函数 

bind第一次绑定时调用

inserted被绑定的元素插入父节点时

update  vnode更新时调用  虚拟节点更新时调用

componentUpdated  指令所在的组件的vnode更新或者其子vnode全部更新时调用

Unbind解绑时调用

-----------------------------

钩子函数的参数

1.el指令所绑定的元素   指DOM

2.binding对象 

name

value

oldValue

expression表达式

arg参数

modifiers  包含修饰符的对象

3.vnode编译生成的虚拟节点

4.oldvnode

------------------------------------------------------

例子  自动聚焦输出框

<tempate><div><input value=""   v-focus="true"></div></template>

Vue.diective('focus',

inserted(el,binding){

if(binding.name=="focus"&&binding.value){

el.focus()

}

})

相关文章

  • Vue基础(五)--自定义指令与过渡

    1.自定义指令 分类:全局指令、局部指令 1.1 自定义全局指令 使用全局方法 Vue.directive(指令I...

  • vue入门6---vue基本指令、自定义指令、插件

    一、vue常用指令概览 二、vue自定义指令 注册全局指令Vue.directive('my-directive'...

  • Vue之自定义指令

    分类:全局指令、局部指令 1、自定义全局指令 使用全局方法Vue.directive(指令ID,定义对象) 注:使...

  • Vue div节点滚动事件-加载更多

    使用Vue.directive注册全局指令 绑定事件 对于Vue自定义指令不明白的同学请移步: Vue自定义指令 ...

  • Vue.js 学习笔记(二)

    自定义指令 示例,文本框自动获取焦点 自定义全局指令 使用 Vue.directive() 定义全局指令。 和样式...

  • 自定义指令

    一、自定义全局指令Vue中所有指令都以(v-)开头。使用Vue.directive('name',{})定义全局指...

  • Vue指令钩子函数

    Vue指令上篇文章有讲过了,现在分析Vue指令钩子函数。 自定义指令 全局定义:Vue.directive( ' ...

  • 自定义指令

    通过Vue.directive()注册全局自定义指令

  • vue2中的directives

    directives: 用于自定义vue指令 注册全局自定义指令:调directive(id, fun) 注册局部...

  • vue 有自定义指令

    vue 的自定义指令,分为全局自定义指令和局部自定义指令,局部自定义指令等价于局部组件。 自定义指令可以对DOM进...

网友评论

    本文标题:vue自定义全局指令

    本文链接:https://www.haomeiwen.com/subject/erilmctx.html