前端框架Vue.js中Directive知识详解
directive
看上去虽然和angular中的定义类似,directive 都是对dom功能的一种拓展,但是 vue 的 directive 要弱的多。因为 vue component 其实本来就会包含对dom的操作,所以大多数时候我们写一个通用组件都是一个component 而不是一个 directive,而 在 angular 我们写一个通用的组件一般都是一个 directive 。
所以我说 vue 的 directive 相比于 angular 要弱的多,也可以说纯粹的多,他就是对 dom 功能的一个拓展,而不是为了封装和dom相关的逻辑。有兴趣可以通过对比这两个ui库就能明白:
•vux https://github.com/airyland/vux
•angular bootstrap https://github.com/angular-ui/bootstrap
对比就会发现,其实在 vue 中我们封装一个通用的组件(其实不管是不是通用)都是一个 component,但是在 angular 中却是一个 directive,因为 angular 中的 controller 其实只能创建一个 $scope 作用域。可以简单的认为在 vue directive = angular directive + controller。前面讲到过 vue 很多设计都和angular2类似,vue 中的 directive 基本可以等价于 angular2 的 directive,但是千万不要和 angular 中的 directive 搞混了。
为了避免误导,所以后面不再拿 angular directive 作对比了。
生命周期
生命周期分为三步:
•bind 第一次绑定到dom元素上的时候触发
•update bind完成之后立刻触发,以后每当参数更新的时候都会触发
•unbind 解除和dom元素的绑定时触发
api 简洁到哭。。。
其中 update 是最重要的,也就是当 directive 接收到一个值的更新的时候就会执行对应的代码。update函数接收的参数就是用户通过 attr 传入的值。
我们下面实现一个简单的 directive,它的作用是对 todo list 输入的内容进行校验(表单校验)。directive 基本结构如下:
vue.directive("minlength", { bind: function() { }, update: function(value) { }, unbind: function() { } });
然后,我们需要在用户输入的时候进行校验,这里实现一个简单的 minlength 校验,代码如下:
vue.directive("minlength", { bind: function() { var self = this; var el = this.el; el.addeventlistener("keydown", function(e) { if(e.keycode === 13) { if(el.value.length < self.minlength) { e.preventdefault(); } } }); var submit = el.parentnode.queryselector("button, [type='submit']"); submit.disabled = true; el.addeventlistener("keyup", function(e) { submit.disabled = (el.value.length < self.minlength); }); }, update: function(value) { this.minlength = parseint(value); }, unbind: function() { } });
基本逻辑就在在 bind 阶段的时候就绑定事件,然后根据 update 时候传入的 minlength 值来进行判断。
目前看,directive 应该就是为了实现类似的功能存在的,当然还有很多细枝末节的用法就不再细讲了。directive 在 vue 中并不是很重要的一块,大家平时写代码的时候更多还是写 component。
filter 和 mixins 看起来比较简单,略过。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
下一篇: 前端框架Vue.js构建大型应用浅析