Vue中的自定义指令(directive)


在vue中除了一些内置指令(v-if,v-model)外,我们还可以自定义一些指令,例如:


html结构层

<p v-class=“ ‘red’ ”>我是全局自定义指令</p>


js行为层


<script>

// 注册一个全局自定义指令 v-class

Vue.directive('class', {

// 当绑定元素插入到 DOM 中。

inserted: function (el,value) {

el.style.color=value.value;

}

})

</script>


效果图:


<div>

<input   v-focus>

</div>


new Vue({

el:"#app",

// 注册一个局部自定义指令 v-focus

directives:{

// 当绑定元素插入到 DOM 中。

focus:{

inserted: function (el) {

// 聚焦元素

el.focus()

}

}

}

})

效果图:


补充:钩子函数

指令定义函数提供了几个钩子函数(可选):

bind: 只调用一次,指令第一次绑定到元素时调用,用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。

inserted: 被绑定元素插入父节点时调用(父节点存在即可调用,不必存在于 document 中)。

update: 所在组件的 VNode 更新时调用,但是可能发生在其孩子的 VNode 更新之前。指令的值可能发生了改变也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。

componentUpdated: 所在组件的 VNode及其孩子的 VNode全部更新时调用。

unbind: 只调用一次, 指令与元素解绑时调用。

接下来我们来看一下钩子函数的参数 (包括el,binding,vnode,oldVnode) 。

在vue中除了一些内置指令(v-if,v-model)外,我们还可以自定义一些指令,例如:

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容