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


Posted in Javascript onSeptember 12, 2016

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 看起来比较简单,略过。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用JS写的一个TableView控件代码
Jan 23 Javascript
IE6下出现JavaScript未结束的字符串常量错误的解决方法
Nov 21 Javascript
jquery创建并行对象或者合并对象的实现代码
Oct 10 Javascript
js获取当前页面路径示例讲解
Jan 08 Javascript
js格式化时间小结
Nov 03 Javascript
Jquery获取第一个子元素简单实例
Jun 02 Javascript
jQuery多文件异步上传带进度条实例代码
Aug 16 Javascript
Bootstrap源码解读网格系统(3)
Dec 22 Javascript
cropper js基于vue的图片裁剪上传功能的实现代码
Mar 01 Javascript
vue中input的v-model清空操作
Sep 06 Javascript
微信小程序定义和调用全局变量globalData的实现
Nov 01 Javascript
如何通过Proxy实现JSBridge模块化封装
Oct 22 Javascript
前端框架Vue.js构建大型应用浅析
Sep 12 #Javascript
jQuery过滤选择器用法示例
Sep 12 #Javascript
强大Vue.js组件浅析
Sep 12 #Javascript
超详细的JS弹出窗口代码大全
Apr 18 #Javascript
使用JS实现图片展示瀑布流效果的实例代码
Sep 12 #Javascript
关于javascript的一些知识以及循环详解
Sep 12 #Javascript
基于AngularJS实现iOS8自带的计算器
Sep 12 #Javascript
You might like
PHP同时连接多个mysql数据库示例代码
2014/03/17 PHP
php写入、删除与复制文件的方法
2015/06/20 PHP
php反序列化长度变化尾部字符串逃逸(0CTF-2016-piapiapia)
2020/02/15 PHP
使用Apache的rewrite
2021/03/09 Servers
jQuery.buildFragment使用方法及思路分析
2013/01/07 Javascript
Javascript中克隆一个数组的实现代码
2013/12/06 Javascript
js事件绑定快捷键以ctrl+k为例
2014/09/30 Javascript
JavaScript fontcolor方法入门实例(按照指定的颜色来显示字符串)
2014/10/17 Javascript
AngularJS模块学习之Anchor Scroll
2016/01/19 Javascript
JavaScript 基础函数_深入剖析变量和作用域
2016/05/18 Javascript
浅析JavaScript Array和string的转换(推荐)
2016/05/20 Javascript
只需五句话搞定JavaScript作用域(经典)
2016/07/26 Javascript
javascript跨域请求包装函数与用法示例
2016/11/03 Javascript
jQuery实现联动下拉列表查询框
2017/01/04 Javascript
JavaScript数据结构之二叉树的遍历算法示例
2017/04/13 Javascript
JavaScript 获取元素在父节点中的下标(推荐)
2017/06/28 Javascript
浅谈Vue.nextTick 的实现方法
2017/10/25 Javascript
Vue.js的动态组件模板的实现
2018/11/26 Javascript
微信小程序嵌入腾讯视频源过程详解
2019/08/08 Javascript
微信小程序图片自适应实现解析
2020/01/21 Javascript
openlayers实现图标拖动获取坐标
2020/09/25 Javascript
vue 解决在微信内置浏览器中调用支付宝支付的情况
2020/11/09 Javascript
Python continue语句用法实例
2014/03/11 Python
Python实现发送QQ邮件的封装
2017/07/14 Python
Python生成一个迭代器的实操方法
2019/06/18 Python
详解python中的time和datetime的常用方法
2019/07/08 Python
Python多叉树的构造及取出节点数据(treelib)的方法
2019/08/09 Python
CSS3实现的文本3D效果附图
2014/09/03 HTML / CSS
介绍一下代理模式(Proxy)
2014/10/17 面试题
基层工作经历证明
2014/01/13 职场文书
幼儿园托班开学寄语
2014/01/18 职场文书
高考备战决心书
2014/03/11 职场文书
献爱心倡议书
2014/04/14 职场文书
单位工作证明书格式
2014/10/04 职场文书
基于Python实现对比Exce的工具
2022/04/07 Python
css3属性选择器 “~”(波浪号) “,”(逗号) “+”(加号)和 “>”(大于号)
2022/04/19 HTML / CSS