Directive
看上去虽然和Angular中的定义类似，Directive 都是对DOM功能的一种拓展，但是 Vue 的 Directive 要弱的多。因为 Vue Component 其实本来就会包含对DOM的操作，所以大多数时候我们写一个通用组件都是一个Component 而不是一个 Directive，而 在 Angular 我们写一个通用的组件一般都是一个 Directive 。
所以我说 Vue 的 Directive 相比于 Angular 要弱的多，也可以说纯粹的多，他就是对 DOM 功能的一个拓展，而不是为了封装和DOM相关的逻辑。有兴趣可以通过对比这两个UI库就能明白：
"color: #3366ff"> https://github.com/airyland/vux
"color: #3366ff">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 作对比了。
生命周期
生命周期分为三步：
"htmlcode">
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 看起来比较简单，略过。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！