前端框架Vue.js中Directive知识详解

这篇文章主要为大家详细介绍了前端框架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() {
 }
});

End q1010.com

 然后，我们需要在用户输入的时候进行校验，这里实现一个简单的 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() {
 }
});

End q1010.com

基本逻辑就在在 bind 阶段的时候就绑定事件，然后根据 update 时候传入的 minlength 值来进行判断。

目前看，Directive 应该就是为了实现类似的功能存在的，当然还有很多细枝末节的用法就不再细讲了。Directive 在 Vue 中并不是很重要的一块，大家平时写代码的时候更多还是写 Component。

Filter 和 Mixins 看起来比较简单，略过。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持四海网。

本文来自：http://www.q1010.com/184/3002-0.html

注：关于前端框架Vue.js中Directive知识详解的内容就先介绍到这里，更多相关文章的可以留意四海网的其他信息。

关键词：vue.js