前端框架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 相关文章推荐
JQuery 前台切换网站的样式实现
Jun 22 Javascript
IE JS无提示关闭窗口不提示的方法
Apr 29 Javascript
Wordpress ThickBox 添加“查看原图”效果代码
Dec 11 Javascript
放弃用你的InnerHTML来输出HTML吧 jQuery Tmpl不详细讲解
Apr 20 Javascript
JS将数字转换成三位逗号分隔的样式(示例代码)
Feb 19 Javascript
js Object2String方便查看js对象内容
Nov 24 Javascript
jQuery回调函数的定义及用法实例
Dec 23 Javascript
JS实现图片产生波纹一样flash效果的方法
Feb 27 Javascript
JavaScript制作弹出层效果
Dec 02 Javascript
jQuery异步提交表单实例
May 30 jQuery
Vue递归组件+Vuex开发树形组件Tree--递归组件的简单实现
Apr 01 Javascript
如何写好一个vue组件,老夫的一年经验全在这了(推荐)
May 18 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/06/07 PHP
PHP中你应该知道的require()文件包含的正确用法
2015/06/12 PHP
PHP实现多关键字加亮功能
2016/10/21 PHP
php反射学习之不用new方法实例化类操作示例
2019/06/14 PHP
脚本收藏iframe
2006/07/21 Javascript
jquery触发a标签跳转事件示例代码
2013/07/21 Javascript
jquery插件jquery.dragscale.js实现拖拽改变元素大小的方法(附demo源码下载)
2016/02/25 Javascript
AngularJs directive详解及示例代码
2016/09/01 Javascript
js判断所有表单项不为空则提交表单的实现方法
2016/09/09 Javascript
第一次接触神奇的Bootstrap
2016/10/14 Javascript
react-native中ListView组件点击跳转的方法示例
2017/09/30 Javascript
在vue中使用vue-echarts-v3的实例代码
2018/09/13 Javascript
JS使用iView的Dropdown实现一个右键菜单
2019/05/06 Javascript
Vue侦测相关api的实现方法
2019/05/22 Javascript
浅谈Vue.set实际上是什么
2019/10/17 Javascript
js实现九宫格抽奖
2020/03/19 Javascript
Vue路由守卫及页面登录权限控制的设置方法(两种)
2020/03/31 Javascript
[13:16]INFAMOUS vs VGJ T BO3
2018/06/07 DOTA
python PIL和CV对 图片的读取,显示,裁剪,保存实现方法
2019/08/07 Python
使用python将最新的测试报告以附件的形式发到指定邮箱
2019/09/20 Python
Numpy中对向量、矩阵的使用详解
2019/10/29 Python
python保留小数位的三种实现方法
2020/01/07 Python
基于Python-Pycharm实现的猴子摘桃小游戏(源代码)
2021/02/20 Python
python反编译教程之2048小游戏实例
2021/03/03 Python
波兰补充商店:Muscle Power
2018/10/29 全球购物
实用求职信范文分享
2013/12/25 职场文书
服务员自我评价
2014/01/25 职场文书
情侣吵架检讨书
2014/02/05 职场文书
医学专业应届生的自我评价
2014/02/28 职场文书
幼儿教师暑期培训方案
2014/08/27 职场文书
2014年稽查工作总结
2014/12/20 职场文书
浪漫的婚礼主持词
2015/06/30 职场文书
化工生产实习心得体会
2016/01/22 职场文书
大学生村官驻村工作心得体会
2016/01/23 职场文书
springcloud整合seata
2022/05/20 Java/Android
CSS浮动引起的高度塌陷问题
2022/08/05 HTML / CSS