15-指令-自定义局部指令

除了助记图,这里还会添加重点,供大家来理解比较复杂的知识

一.重点

1.生命周期
bind:生成的HTML在内存是调用
inserted:HTML渲染在界面上调用
update:所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。简单的说就是html元素节点/内容节点.注释节点更新后调用,能够监听页面的变化
2.回调函数
回调函数就是一个通过函数指针调用的函数。如果你把函数的指针（地址）作为参数传递给另一个函数，当这个指针被用来调用其所指向的函数时，我们就说这是回调函数。回调函数不是由该函数的实现方直接调用，而是在特定的事件或条件发生时由另外的一方调用的，用于对该事件或条件进行响应。
-----百度百科
简单的说:就是在特定的时候,调用使用者自定义的函数
3.局部与全局
全局自定义就是定义的指令能在所有Vue控制的区域使用;
局部自定义就是定义的指令只能在特定的Vue控制的区域使用.

二.助记图

v-size="30"

image.png

1.问题
有些指令,我们不希望在全部的Vue控制的区域使用,只希望在某一个特定的Vue区域使用
2.结局方法
在某一个Vue示例vm中定义directives属性,使该属性的值只能在该Vue控制的区域中使用
3.格式
3.1
directives:{"size":{bind:function(el,binding){el.style.fontSize=binding.value+"px"}}}
3.2
directives:{"size":function(el,binding){el.style.fontSize=binding.value+"px"}}
区别:
第一种页面不会自动刷新value的变化Vnode
第二种自动添加bind和update会刷新Vnode的变化
4.代码测试

image.png