事件钩子与指令标记

事件钩子

对于事件钩子,我不成熟的理解是在Vue中封装的事件响应机制。

在Vue中,有11个事件钩子,分别对应着Vue对象的生命周期,写几个遇到的。

created:当对象生成的时候“触发”

update:当对象的data域中的值更新之后“触发”

destroy:当对象销毁的时候“触发”


例子如下



这句话中的a也可以直接通过this引用

setInterval(function(){t1.a++,console.log(t)},5000); //设置定时器事件,每5秒触发一次(updated)

效果图如下,每5秒更新一次值,触发一次updated

指令标记

v-once:一次性插值标记,同时会锁定区域下所有的节点插值(停止更新)



效果如下


点击之后,前一个<span>的值改变,后一个不变。


v-bind:将data中的一个变量绑定至属性

v-on:将methods中的一个函数(事件)绑定至dom事件




输入以下代码验证

var r15 = document.getElementById('r15');

undefined

r15.id;

"r15"//

t3.dynamicId = "r16";

"r16"//通过Vue数据绑定动态改变id的值

r15.id;

"r16"//Vue中,id并不是“唯一索引”


其实dom中也有类似的方法

element.setAttribute("id", VALUE);


Vue采用了虚拟dom节点,极大地减少了对dom树的操作,提高了效率。

然后动态绑定的使得文本框的可读性改变的事件。



貌似没有用ლ(′◉❥◉`ლ)

动态绑定属性(属性作为一个插值)

v-bind:[attr]//绑定attr对应的属性

v-on:[attr]//绑定attr对应的事件





还有一种简略写法(只对于v-bind和v-on)


表单提交的时候,也可以使用指令来调用方法(强制解耦)

 

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容