个性化阅读
专注于IT技术分析

vue.js框架快速入门简明教程(七):自定义指令

在学习vue.js过程中,我们一直都是使用到vue.js内置的核心指令,比如v-model,v-show,v-watch和v-html等以v-为前缀的指令,但vue.js也允许你注册自定义指令,这个宽容性实际是想让学习者和使用者更加灵活的使用vue.js,达到将数据的变化映射到 DOM 的行为的目的。基本语法是Vue.directive(id, definition),id是指令ID,definition是自定义对象。

一、注册指令

在我的第六章教程vue.js框架快速入门简明教程(六):组件中,有探讨过组件的注册分为全部组件和局部组件,同样的,指令也分为全局指令和局部指令。如果注册的是局部指令,则只能在指定的模版中使用。

1、全局注册指令

注册全局指令,可以在整个vue.js中使用该指令;

vue.directive('focus');

如果像上面那个注册指令,值写进了一个参数指令ID,该指令没有任何功能。

根据这个指令的html模版书写是这样:

<input v-focus>

根据Vue.directive(id, definition)语法,我们可以在后面添加对象,而对象里面通常放的都是函数,成为钩子函数,这个我们会在下面结合例子详细介绍,先留个悬念。

现在我们来注册一个可用的指令:

<div id="app">
    <div v-command1="70">vue.js注册指令</div>
</div>

<script>
    Vue.directive('command1',{
        bind(el,binding){
           el.style.position ='absolute'
            el.style.top=binding.value+'px';
        }
    });

    new Vue({
        el: '#app',
    })
</script>
vue全局注册指令图例-01

如上例子,对象中的bind为钩子函数。

el 指令所绑定的元素,可以用来直接操作 DOM 。具体用法下面再为大家一一介绍,请耐心看完哦。

2、局部注册指令

注册局部指令,则只能在指定的模版中使用。

new Vue({
    el: '#app',
    directives:{//注册指令v-command1
        command1:{
		//指令的定义
            bind:function(el,binding){
			//聚焦元素
                el.style.position ='absolute';
                el.style.top=binding.value+'px';
            }
        }
    }
})

只有在id=app的元素中才能只用,脱离了这个区域将不能使用该指令。

二、钩子函数

经过上面指令的介绍和结合详细而又灵活的例子,应该不难发现,在使用Vue.directive(id, definition)注册指令的时候,第二个参数中的对象包含的是一个函数,这就是上面提到的钩子函数,为什么称之为钩子函数?因为钩子和回调函数有相似之处。

现在让我们来扯远点,介绍一个回调函数。

回调函数就是在模块A有需要地调用模块B中的函数b, 但是函数b又不能满足模块A的全部要求,还得调用模块A自身的函数a()来实现需求,这个函数a()其实就是回调函数。

回调函数图例-03

回到正题,钩子函数是什么呢?其实可以理解为回到函数,不同之处是钩子函数会在第一时间执行,借用上图,使用钩子函数的话,函数a()会第一时间执行,执行完之后再执行其他函数,这可能也是它的命名来有,第一时间钩出,拉出,拖出所需要的。

例如:bind是钩子函数,会在第一时间调用。

Vue.directive('command1',{
    bind(el,binding){
        el.style.position ='absolute'
        el.style.top=binding.value+'px';
    }
});

在vue.js的指令定义中,指令函数提供了几个钩子函数供我们使用。

 bind: 只调用一次,指令第一次绑定到元素时调用,用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。
 inserted: 被绑定元素插入父节点时调用(父节点存在即可调用,不必存在于 document 中)。
 update: 被绑定元素所在的模板更新时调用,而不论绑定值是否变化。通过比较更新前后的绑定值,可以忽略不必要的模板更新(详细的钩子函数参数见下)。

 componentUpdated: 被绑定元素所在模板完成一次更新周期时调用。
 unbind: 只调用一次, 指令与元素解绑时调用。

例如:update钩子函数

<div id="app">
    <input type="text" v-model="message">
    <div v-command1="70">{{message}}</div>
</div>

<script>
    Vue.directive('command1',{
        update(){
           alert("dsadsa")
        }
    });
    new Vue({
        el: '#app',
        data:{
            message:'钩子函数'
        }

    })
</script>
钩子函数图例-02

这些钩子函数至少带一个参数:

el: 指令所绑定的元素,可以用来直接操作 DOM 。

binding: 一个对象,包含以下属性:

name: 指令名,不包括 v- 前缀。

value: 指令的绑定值, 例如: v-my-directive=”1 + 1″, value 的值是 2。

oldValue: 指令绑定的前一个值,仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。

expression: 绑定值的表达式或变量名。 例如 v-my-directive=”1 + 1″ , expression 的值是 “1 + 1″。

arg: 传给指令的参数。例如 v-my-directive:foo, arg 的值是 “foo”。

modifiers: 一个包含修饰符的对象。 例如: v-my-directive.foo.bar, 修饰符对象 modifiers 的值是 { foo: true, bar: true }。

vnode: Vue 编译生成的虚拟节点。

oldVnode: 上一个虚拟节点,仅在 update 和 componentUpdated 钩子中可用。

以上介绍了vue.js的自定义指令,钩子函数的使用方法和参数的使用特点。在实际开发中,可以自己定指令,使用自己定义的指令,使得我们的程序书写起来更加简单快捷。

赞(0) 打赏
未经允许不得转载:srcmini » vue.js框架快速入门简明教程(七):自定义指令
分享到: 更多 (0)

评论 抢沙发

评论前必须登录!

 

觉得文章有用就打赏一下文章作者

微信扫一扫打赏