自定义指令
来源:互联网 发布:面纱3.0口感数据 编辑:程序博客网 时间:2024/06/06 10:56
简单来说就是根据自己的需要定义一些自己的指令,比如v-color
, v-focus
<div id="app"> <p v-color="color">{{num}}</p> <button v-on:click="addNum">add</button></div><script type="text/javascript"> Vue.directive('color', function(el, binding) { el.style.color = binding.value; }); new Vue({ el : "#app", data : { num : 0, color : 'purple' }, methods : { addNum : function() { this.num++; } } })</script>
在控制台输出了binding,得到下面的结果:
Object { name: "color", rawName: "v-color", value: "purple", expression: "color", modifiers: Object, def: Object }
上面的方式是在全局的情况下,自定义指令的方式,当然也可以注册局部指令,在组件上接受一个directives
选项
directives: { focus: { // 指令的定义--- }}
自定义指令的生命周期
自定义指令有五个生命周期(也叫钩子函数),分别是bind, inserted, update, componentUpdated, unbind
bind: 只调用一次,指令第一次绑定到元素时调用,这个钩子函数可以定义一个绑定时执行一次的初始化动作
inserted: 被绑定元素插入父节点时调用(父节点存在即调用,不必存在于document中)
update: 被绑定元素的所在的模板更新时调用,而无论绑定值是否变化,通过比较更新前后的绑定值,可以忽略不必要的模板更新
componentUpdate: 被绑定元素所在模板完成一次更新周期时调用
unbind: 只调用一次,指令和元素解绑时调用
钩子函数参数
钩子函数被赋予了以下参数:
- el: 指令所绑定的元素,可以用来直接操作 DOM 。
- binding: 一个对象,包含以下属性:name: 指令名,不包括
v-
前缀。value: 指令的绑定值, 例如:v-my-directive="1 + 1"
, value 的值是2
。oldValue: 指令绑定的前一个值,仅在update
和componentUpdated
钩子中可用。无论值是否改变都可用。expression: 绑定值的字符串形式。 例如v-my-directive="1 + 1"
, expression 的值是"1 + 1"
。arg: 传给指令的参数。例如v-my-directive:foo
, arg 的值是"foo"
。modifiers: 一个包含修饰符的对象。 例如:v-my-directive.foo.bar
, 修饰符对象 modifiers 的值是{ foo: true, bar: true }
。 - vnode: Vue 编译生成的虚拟节点,查阅 VNode API 了解更多详情。
- oldVnode: 上一个虚拟节点,仅在
update
和componentUpdated
钩子中可用。
自定义指令的例子
Vue.directive('color', { bind : function() { console.log('1 -bind'); }, inserted : function() { console.log('2 -inserted'); }, update : function() { console.log('3 -update'); }, componentUpdated : function() { console.log('4 -componentUpdated'); }, unbind: function() { console.log('5 -unbind'); }});
看一下这几个钩子函数的运行时机,如下面图所示
当按下按钮时,如下图
当在控制台输入v.$destory()
时,如下面所示:
阅读全文
0 0
- 自定义指令
- 自定义指令
- 自定义指令
- 自定义指令
- 自定义指令
- 自定义指令
- 自定义指令
- 自定义指令
- Angular2 指令—自定义指令
- angular指令和自定义指令
- Angular2 指令—自定义指令
- freemarker的自定义指令
- FreeMarker自定义指令
- angularJS自定义指令
- angular 自定义指令
- freemarker 自定义指令
- AngularJS自定义指令标签
- 创建自定义指令[进阶]
- 分布式锁的几种实现形式
- C++中Static作用和使用方法
- 字符串表达式的计算
- libmad的移植、交叉编译、安装——基于ubuntu16
- (个人)AR电子书系统创新实训第二周(2)
- 自定义指令
- Java单例模式之initialization on demand holder
- 11-散列3 QQ帐户的申请与登陆 (25分)
- a.2 tomcat配置虚拟路径
- 基于dubbo快速发布restful服务
- Ubuntu 14.04 install Vsftpd-3.0.2 and setup chroot users
- 新版V8引擎的一些介绍和了解
- Python len()方法
- 使用github练习bootstrap,jquery