Vue应用程序开发（第2版）课件 第5章Vue.js自定义指令.pptxVIP

第5章：Vue.js自定义指令《Vue应用程序开发》

01Part25.2钩子函数目录CONTENTS005Part15.1自定义指令注册和使用

第5章Vue.js自定义指令什么是自定义指令？自定义指令是用来操作DOM的。尽管Vue推崇数据驱动视图的理念，但是并非所有情况都适合使用数据驱动理念。自定义指令就是一种有效的补充和扩展，不仅可用于定义任意DOM操作，还可以复用。自定义指令的注册方式与组件的注册方式的逻辑一致，均分为全局注册和局部注册两种。

5.3自定义指令注册和使用1.全局注册自定义全局指令使用Vue.directive（指令ID，定义对象），其中，参数1是指令的名称，参数2是一个对象，在这个对象上，有一些指令相关的钩子函数，这些函数可以在特定的阶段，执行相关的操作。（1）基本语法：第一步：注册varapp=Vue.createApp();app.directive(red,{mounted(el){el.style.color=red}});app.mount(#app);第二步：使用指令指令定义完成后需要通过divv-red你好/div来调用。（2）作用域：全局自定义指令可以在任何实例或组件中使用。有时候我们不需要其他钩子函数，我们可以简写为：Vue.directive(red,function(el,binding){ el