vue定义全局指令和局部指令

Posted 2023-04-23

参考技术A 全局指令：

调用vue函数对象的directive方法，里面跟两个参数，一个指令名，一个处理函数

'my-directive'：自定义指令名

function(el, binding)：处理函数， el: 指令所在的标签对象，binding: 包含指令相关数据的容器对象

局部指令：

里面的数据和全局指令相同，只是语法不同

局部指令要定义在vue实例中

全局指令和局部指令的区别：

全局指令可供整个页面使用，而局部指令只作用于他定义的那个vue实例

将文本内容全部转换为大写字母

定义全局指令

创建一个vue实例

通过自定义指令将文本转换为大写渲染到页面中

定义局部指令

同上操作

在非局部指令定义的实例中使用局部指令

在app2的实例中顶了一个局部指令，在app1中使用此指令，可以看到，页面并没有渲染出内容，所以，局部指令对本实例外的区域无效

Vue自定义指令

参考技术A 自定义指令需要注册后才能使用，Vue提供了两种注册方式：全局注册和局部注册。全局注册使用Vue.directive()方法来注册一个全局自定义指令，该方法接受两个参数，第一个参数是指令的ID(即名字)；第二个参数是一个定义对象或者函数对象，指令要实现的功能在这个对象中定义。语法形式如下：

Vue.directive(id，[definition])

全局指令可以在任何Vue实例的模板中使用。

局部注册是在Vue实例的选项对象中使用directives选项进行注册，局部注册的自定义指令只能在该实例绑定的视图中使用。