Vue.js 3开发基础与实战课件 第三章 Vue指令.pptVIP

Vue内置指令7．v-cloak在运行Vue页面时，由于Vue需要先编译模板才能渲染出数据，因此在页面起初会看到一些未编译的模板内容，这种短暂的现象被称为“模板闪烁”，如图所示。如果想要隐藏尚未完成编译的DOM模板，就可以使用v-cloak指令。使用v-cloak指令还需要设置下v-cloak属性的样式为隐藏，这样才能在网页中看不到未编译的模板。Vue内置指令12自定义指令Vue自定义指令Vue提供的内置指令可以完成大部分的基础核心场景，但在实际开发中难免会涉及到自己操作DOM的场景。为了重用涉及普通元素的底层DOM访问的逻辑，Vue同样支持自定义指令(CustomDirectives)。自定义指令可以根据业务功能需要，自定义处理DOM元素的行为和样式，从而提高开发效率。1．自定义指令的注册和使用在Vue中，自定义指令不必以v-为前缀命名，但使用自定义指令时需要在指令名前加上v-前缀。要使用自定义指令，首先需要注册自定义指令。Vue中自定义指令的注册方式有两种：全局注册和局部注册。这里以一个简单易懂的自动获取焦点案例来进行讲解。Vue自定义指令全局注册全局注册的自定义指令可以在所有组件中使用，全局注册使用app.directive进行注册，其中app为createApp返回的应用实例。代码中，需要注意的是全局注册需要在