这次分享的是关于Vue自定义指令的使用方法,学习完基础后我们再来实战完成一个下拉列表,废话不多说,直接上干货
<>强基本用法强>
//全局注册 Vue。指令(my-directive, {//指令选项 })//局部注册 应用var=new Vue ({ 埃尔:“#应用” 指示:{ “my-directive”: {//指令选项 } }) >之前相信对Vue比较熟悉的人看完都知道,指令的写法与组件基本类似,只是方法名由组件改为了指令。上例只是注册了自定义指令v-my-directive,还没实现具体功能,下面具体介绍自定义指令的各个选项。
指令定义函数提供了几个钩子函数(可选):
<李>绑定:只调用一次,指令第一次绑定到元素时调用,用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。李> <李>插入:被绑定元素插入父节点时调用(父节点存在即可调用,不必存在于文档中)。李> <李>更新:所在组件的VNode更新时调用,但是可能发生在其孩子的VNode更新之前。指令的值可能发生了改变也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新(详细的钩子函数参数见下)。李> <李> componentUpdated:所在组件的VNode及其孩子的VNode全部更新时调用。李> <李>解开:只调用一次,指令与元素解绑时调用。李>
可根据需求在不同的钩子函数内完成逻辑代码,如下面v-focus,我们希望在元素插入父节点时就调用,那用到的最好的就是插入了。示例代码如下
//html部分 & lt; div id=坝τ谩眝-focus>//js部分 Vue。指令(“焦点”,{//当绑定元素插入到DOM中。 插入:函数(el) {//聚焦元素 el.focus () } }) >之前效果如下图所示
自定义指令v-focus。png
可以看的到,打开这个页面,输入输入框就自动获取焦点了,成为可输入状态。
每个钩子函数都可以有几个参数可用,比如我们上面用到了el。它们的含义如下:
<李> el:指令所绑定的元素,可以用来直接操作DOM。李> <李>绑定:一个对象,包含以下属性:
<李>名称:指令名,不包括v -前缀。李> <李>价值:指令的绑定值,例如:v-my-directive=? + 1”,值的值是2。李> <李> oldValue:指令绑定的前一个值,仅在更新和componentUpdated钩子中可用。无论值是否改变都可用。李> <李>表达式:绑定值的字符串形式,例如v-my-directive=? + 1”,表达式的值是“1 + 1”。李> <李>参数:传给指令的参数,例如v-my-directive: foo, arg的值是“foo”。李> <李>修饰符:一个包含修饰符的对象,例如:v-my-directive.foo。酒吧,修饰符对象修饰符的值是{foo:真的,酒吧:真}。李>
李> <李> vnode: Vue编译生成的虚拟节点,查阅vnode API了解更多详情。李> <李> oldVnode:上一个虚拟节点,仅在更新和componentUpdated钩子中可用。李>下面是结合了以上参数的一些具体示例,代码如下
//HTML部分 & lt; div id="应用" v-demo: msg.a.b=跋ⅰ北? & lt; div v-text: msg.a.b="消息"祝辞& lt;/div> & lt;/div>//JS部分 Vue。指令(“演示”{ 绑定:函数(el、绑定vnode) { var s=JSON.stringify 埃尔。innerHTML=的名字:“+ binding.name + + & lt; br> 值:+绑定。值+ + & lt; br> ”的表情:“+绑定。表达+ + & lt; br> 论点:' +绑定。arg + + & lt; br> 修饰符:' + JSON.stringify (binding.modifiers)。修饰词+ + & lt; br> “vnode键:' +种(vnode) . join (" ") } }) 新Vue ({ 埃尔:“#应用”, 数据:{ 消息:“一些文本” } })执行后,& lt; div>的内容会使用innerHTML重置,结果为
名称:“测试” 价值:“一些文本” 表情:“消息” 论点:“味精” 修饰符:{“a”:真的,“b”:真正的} vnode键:标签、数据、儿童、文本、榆树,ns,上下文,functionalContext, functionalOptions, functionalScopeId,钥匙,componentOptions, componentInstance,父母,生,isStatic, isRootInsert, isComment, isCloned, isOnce, asyncFactory, asyncMeta, isAsyncPlaceholder详解Vue用自定义指令完成一个下拉菜单(选择组件)