前端框架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 相关文章推荐
JavaScript.Encode手动解码技巧
Jul 14 Javascript
jQuery 拖动层(在可视区域范围内)
May 24 Javascript
JS批量操作CSS属性详细解析
Dec 16 Javascript
qq悬浮代码(兼容各个浏览器)
Jan 29 Javascript
使用jquery操作session方法分享
Jan 22 Javascript
jQuery制作仿Mac Lion OS滚动条效果
Feb 10 Javascript
JavaScript中object和Object的区别(详解)
Feb 27 Javascript
深入讲解xhr(XMLHttpRequest)/jsonp请求之abort
Jul 26 Javascript
Vue中父子组件通讯之todolist组件功能开发
May 21 Javascript
react脚手架如何配置less和ant按需加载的方法步骤
Nov 28 Javascript
微信小程序之数据绑定原理解析
Aug 14 Javascript
微信小程序仿抖音视频之整屏上下切换功能的实现代码
May 24 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统计文件大小,以GB、MB、KB、B输出
2011/05/29 PHP
Yii使用find findAll查找出指定字段的实现方法
2014/09/05 PHP
php实现压缩合并js的方法【附demo源码下载】
2016/09/22 PHP
PHP中获取文件创建日期、修改日期、访问时间的方法
2016/11/05 PHP
微信公众号实现会员卡领取功能
2017/06/08 PHP
PHP观察者模式实例分析【对比JS观察者模式】
2019/05/22 PHP
php转换上传word文件为PDF的方法【基于COM组件】
2019/06/10 PHP
Json2Template.js 基于jquery的插件 绑定JavaScript对象到Html模板中
2011/10/29 Javascript
vue双向绑定简要分析
2017/03/23 Javascript
利用JS实现简单的瀑布流加载图片效果
2017/04/22 Javascript
全选复选框JavaScript编写小结(附代码)
2017/08/16 Javascript
JavaScript实现简单动态进度条效果
2018/04/06 Javascript
JavaScript实现仿Clock ISO时钟
2018/06/29 Javascript
React组件对子组件children进行加强的方法
2019/06/23 Javascript
微信小程序 WXML节点信息查询详解
2019/07/29 Javascript
JavaScript制作3D旋转相册
2020/08/02 Javascript
js数据类型转换与流程控制操作实例分析
2019/12/18 Javascript
Django的数据模型访问多对多键值的方法
2015/07/21 Python
python机器学习实战之K均值聚类
2017/12/20 Python
Python实现XML文件解析的示例代码
2018/02/05 Python
Python实现通讯录功能
2018/02/22 Python
python ftp 按目录结构上传下载的实现代码
2018/09/12 Python
python实现两个dict合并与计算操作示例
2019/07/01 Python
Python PIL读取的图像发生自动旋转的实现方法
2019/07/05 Python
python 矢量数据转栅格数据代码实例
2019/09/30 Python
Python变量、数据类型、数据类型转换相关函数用法实例详解
2020/01/09 Python
Python爬虫实现百度翻译功能过程详解
2020/05/29 Python
Python闭包装饰器使用方法汇总
2020/06/29 Python
PyCharm2019.3永久激活破解详细图文教程,亲测可用(不定期更新)
2020/10/29 Python
SheIn俄罗斯:时尚女装网上商店
2017/02/28 全球购物
英国标志性生活方式品牌:Skinnydip London
2019/12/15 全球购物
求∏的近似值,直到最后一项的绝对值小于指定的数
2016/02/12 面试题
历史学专业大学生找工作的自我评价
2013/10/16 职场文书
观看禁毒宣传片后的感想
2015/08/11 职场文书
详解python网络进程
2021/06/15 Python
修改Nginx配置返回指定content-type的方法
2022/09/23 Servers