Vue.js中Directive知识
来源:互联网 发布:开源数据展示平台 编辑:程序博客网 时间:2024/06/07 02:21
近期所学的Vue.js这个MVVM前端技术缓解了我一直愁于前后端开发杂糅所带来的痛苦。今天就来说说关于Vue.js里面的Directive知识。
Directive
Directive看上去虽然和Angular中的定义类似,Directive都是对DOM功能的一种拓展,但是Vue的Directive要弱的多。
因为,Vue Component本来就包括对DOM的操作,所以大多数时候我们写一个通用组件都是一个Component而不是一
个Directive,但是在Angular中每写一个通用组件,一般都是一个Directive。所以,相对来说,Vue的Directive要纯粹
的多(它就是对DOM功能的一个拓展,而不是为了封装和DOM相关的逻辑)。
生命周期
生命周期分为三个阶段:
• bind :第一次绑定到DOM元素上的时候触发
• update bind:完成之后立即触发,以后每当参数更新的时候都会触发
• unbind :解除和DOM元素的绑定时触发
其中,update是最重要的。update函数接收的参数就是用户通过Attr传入的值。
我们来举一个简单的Directive案例:
它的作用是对Todo List输入的内容进行校验(表单校验)。Directive基本结构为:
Vue.directive("minlength", { bind: function() { }, update: function() { }, unbind: function() { }});
接下来,我们需要在用户输入数据的时候进行校验,代码如下:
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() { }});
从上述代码来看,Directive应该就是为了实现类似的功能存在的,当然还有很多其它的用法就不再细说了。
其次,Directive在Vue中并不是很重要的一块,所以,建议大家平时写代码的时候更多还是写Component。
0 0
- Vue.js中Directive知识
- 七周七种前端框架四:Vue.js Directive
- 【13】vue.js — 自定义指定(directive)
- vue---vue中常用指令,以及如何自定义指令vue.directive进行节点操作?
- Vue 指令(Directive)
- Vue.directive 自定义指令
- Vue自定义指令(directive)
- Vue.directive 自定义指令
- 学习Vue.js过程中的知识补充
- Vue.js知识总结 (一)
- Vue.js知识总结——生命周期
- Vue.js知识总结——指令
- Vue.js知识总结——组件
- vue.js中使用slot
- Vue.js中使用Scss
- Vue.js中使用axios
- vue.js中字符串倒转
- vue中引入Moment.js
- 阿里云登入主页设置
- 3个案例教你用Spark解决Map Reduce问题!
- Linux运维之加密/解密原理、自建CA及搭建基于https的Apache
- Cenots6.4下mysql5.6安装及主从配置
- iOS 去掉粘贴文字中的换行(适配安卓)
- Vue.js中Directive知识
- ANSI C (5) —— 结构、联合、位字段、枚举
- CentOS7架设DNS服务器(Bind)
- Android webView详解
- dtd
- PAT - 甲级 - 1113. Integer Set Partition (25) (排序)
- 每次打开office2010都会出现正在配置,很烦?关掉它!
- 10分钟掌握Markdown语法,做一名有知识的程序员
- QWeb是odoo模板引擎