《Vue应用开发》课件-4.3.4为自定义指令绑定参数

掌握全局自定义指令的使用方法，能够使用对象形式和函数形式来声明全局自定义指令4.3.3全局自定义指令的声明与使用

先定一个小目标！4.3.3全局自定义指令的声明与使用全局自定义指令需要通过Vue应用实例的directive()方法进行声明，语法格式如下。directive('自定义指令名称',对象)在上述语法格式中，directive()方法的第1个参数类型为字符串，表示全局自定义指令的名称；第2个参数类型为对象或者函数，可以是对象或者函数形式，用于接收指令的参数值。下面演示全局自定义指令的使用方式。修改src\main.js文件，声明全局自定义指令fontSize。import{createApp}from'vue'import'./style.css'importAppfrom'./components/DirectiveComponent.vue'constapp=createApp(App)app.directive('fontSize',{mounted:el=>{el.style.fontSize='24px'}})app.mount('#app')4.3.3全局自定义指令的声明与使用掌握为自定义指令绑定参数的使用方法，能够通过等号（=）的方式，为当前指令绑定参数4.3.4为自定义指令绑定参数

先定一个小目标！4.3.4为自定义指令绑定参数在使用自定义指令时，开发人员可以通过自定义指令的参数改变元素的状态，传递的参数由自定义指令的生命周期函数的第2个参数接收。在标签中使用自定义指令时，通过等号（=）的方式可以为当前指令绑定参数，示例代码如下。<h1v-color="color"></h1>如果指令需要多个值，可以传递一个对象，示例代码如下。<divv-demo="{color:'red',text:'hello'}"></div>步骤1演示自定义指令参数的使用方法创建src\components\CustomDirective.vue文件。步骤3步骤24.3.4为自定义指令绑定参数步骤1步骤3步骤2修改src\main.js文件，切换页面中显示的组件。importAppfrom'./components/CustomDirective.vue'4.3.4为自定义指令绑定参数演示自定义指令参数的使用方法保存上述代码后，运行程序，CustomDirective组件的初始页面效果如下图所示。4.3.4为自定义指令绑定参数步骤1步骤3步骤2演示自定义指令参数的使用方法步骤1步骤3步骤2在自定义指令fontSize中添加updated()函数，实现自定义指令绑定的参数改变时，页面进行同步更改。4.3.4为自定义指令绑定参数演示自定义指令参数的使用方法保存上述代码后，在浏览器中访问:5173/，初始页面效果如下图所示。4.3.4为自定义指令绑定参数单击“更改字号大小”按钮后的页面效果如下图所示。4.3.4为自定义指令绑定参数掌握自定义指令的函数形式，能够使用函数形式简化自定义指令的声明4.3.5自定义指令的函数形式

先定一个小目标！4.3.5自定义指令的函数形式对于自定义指令来说，通常仅需要在mounted()函数和updated()函数中操作DOM元素，除此之外，不需要其他的生命周期函数。例如，4.3.4小节CustomDirective组件中的mounted()函数和updated()函数中的代码完全相同。此时，可以将自定义指令简写为函数形式。将私有自定义指令简写为函数形式的示例代码如下。constvFontSize=(el,binding)=>{el.style.fontSize=binding.value}4.3.5自定义指令的函数形式将全局自定义指令简写成函数