前端框架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 相关文章推荐
Prototype1.6 JS 官方下载地址
Nov 30 Javascript
IE8下Jquery获取select选中的值post到后台报错问题
Jul 02 Javascript
jquery常用函数与方法汇总
Sep 01 Javascript
jQuery实现气球弹出框式的侧边导航菜单效果
Sep 22 Javascript
jQuery Ajax 加载数据时异步显示加载动画
Aug 01 Javascript
AngularJS入门教程之AngularJS 模板
Aug 18 Javascript
JavaScript获取中英文混合字符串长度的方法示例
Feb 04 Javascript
webpack独立打包和缓存处理详解
Apr 03 Javascript
基于vue.js快速搭建图书管理平台
Oct 29 Javascript
微信小程序图片轮播组件gallery slider使用方法详解
Jan 31 Javascript
浅谈jquery fullpage 插件增加头部和版权的方法
Mar 20 jQuery
js删除对象/数组中null、undefined、空对象及空数组方法示例
Nov 14 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文本转图片自动换行的方法
2013/03/13 PHP
PHP导出带样式的Excel示例代码
2016/08/28 PHP
Windows服务器中PHP如何安装redis扩展
2019/09/27 PHP
动态样式类封装JS代码
2009/09/02 Javascript
js数据验证集合、js email验证、js url验证、js长度验证、js数字验证等简单封装
2010/05/15 Javascript
jQuery操作表格(table)的常用方法、技巧汇总
2014/04/12 Javascript
JavaScript 异常处理 详解
2015/02/06 Javascript
JavaScript表单验证开发
2016/11/23 Javascript
js for循环倒序输出数组元素的实例
2017/03/01 Javascript
JS计算输出100元钱买100只鸡问题的解决方法
2018/01/04 Javascript
JavaScript寄生组合式继承实例详解
2018/01/06 Javascript
jQuery实现遍历XML节点和属性的方法示例
2018/04/29 jQuery
微信小程序中上传图片并进行压缩的实现代码
2018/08/28 Javascript
Vue.js 图标选择组件实践详解
2018/12/03 Javascript
详解微信小程序开发之formId使用(模板消息)
2019/08/27 Javascript
JS删除数组指定值常用方法详解
2020/06/04 Javascript
[03:46]DOTA2英雄基础教程 维萨吉
2013/12/11 DOTA
Python实现全角半角转换的方法
2014/08/18 Python
python批量制作雷达图的实现方法
2016/07/26 Python
python cx_Oracle模块的安装和使用详细介绍
2017/02/13 Python
Python中.py文件打包成exe可执行文件详解
2017/03/22 Python
详解Python中如何写控制台进度条的整理
2018/03/07 Python
Python实现爬虫从网络上下载文档的实例代码
2018/06/13 Python
Python高级特性切片(Slice)操作详解
2018/09/27 Python
python 函数中的参数类型
2020/02/11 Python
python实现微信打飞机游戏
2020/03/24 Python
Python使用pycharm导入pymysql教程
2020/09/16 Python
HTML5实现直播间评论滚动效果的代码
2020/05/27 HTML / CSS
联想英国官网:Lenovo英国
2019/07/17 全球购物
三八妇女节标语
2014/10/09 职场文书
2014年教育教学工作总结
2014/11/13 职场文书
2014年禁毒工作总结
2014/11/24 职场文书
小学生2015教师节演讲稿
2015/03/19 职场文书
2016年机关单位节能宣传周活动总结
2016/04/05 职场文书
详解Oracle块修改跟踪功能
2021/11/07 Oracle
SQL注入篇学习之盲注/宽字节注入
2022/03/03 MySQL