Vu基础及其开发10

第三章Vue指令学习目标掌握Vue常用内置指令熟悉Vue如何进行自定义指令在上一章节中，我们学习了Vue的数据渲染、数据绑定和事件监听，这些功能都使用了Vue的模板指令。在本章中，我们将进一步介绍Vue中更多的内置指令的使用，并探讨如何实现自定义指令。Vue内置指令12自定义指令Vue内置指令Vue中提供了很多带v-前缀的特殊属性，这些属性就是指令（Directives）。比如在前两章中使用到的v-html、v-if、v-for、v-show、v-bind、v-model、v-on，这些指令都是Vue提供的内置指令。使用内置指令可以简化开发应用的难度，提高开发的效率。Vue的内置指令为绑定的元素提供了一些特殊功能。此外，指令还可以通过冒号添加参数进行扩展，例如：“v-on:click”等；Vue提供的内置指令及其说明如表所示。

指令说明v-text更新文本内容v-html更新包涵HTML代码的内容v-show控制元素是否可见v-if、v-else、v-else-if条件渲染v-for循环渲染v-on事件绑定v-bind绑定一个或多个属性。v-model表单输入元素或组件数据的双向绑定v-slot具名插槽或作用域插槽v-pre跳过该元素及其所有子元素的编译v-once只渲染一次，之后不会再更新v-memoVue3.2新增指令，表示缓存一个模板的子树v-cloak隐藏尚未完成编译的DOM模板Vue内置指令1．v-textv-text指令是通过修改元素的textContent内容来实现更新内容的，其等同于{{}}模板插值的效果。元素使用了v-text进行插值的话，之前元素的所有内容就会被覆盖掉。2．v-htmlv-html指令在第二章节中使用过，它可以插入带HTML标签的内容进行显示，如“<h1>标题</h1>”。v-html通过更新innerHTML来实现HTML代码的插值，但是一般不推荐使用v-html,因为如果将用户提供的内容作为HTML代码插值会导致注入恶意攻击的代码，从而引起XSS攻击等安全问题。

Vue内置指令3．v-bindVue的v-bind指令可以用来动态绑定一个或多个元素属性，也可以用来绑定组件的prop(组件属性)。其用法为“v-bind:属性”，通常喜欢使用简写方式“:属性”或“.属性”(用于组件prop的用法)。如果要同时绑定多个属性，可以使用对象来进行绑定。

Vue内置指令4．v-pre在Vue中，如果希望使用双花括号{{}}来显示普通文本内容，而不需要进行模板语法的解析，可以使用v-pre指令。该指令会告诉Vue跳过该元素及其所有子元素的编译，从而在该元素上使用双花括号来显示纯文本内容。使用v-pre指令的好处是可以提高应用的渲染性能，减少不必要的编译时间。运行代码可以看到网页中{{}}格式的内容当做了普通内容展示了出来，如图所示。

Vue内置指令5．v-once如果某些数据内容只需要在页面加载时显示一次，之后即使数据更新了也不需要重新渲染。这时可以使用Vue的v-once指令来解决这个问题。v-once指令表示元素或组件内只渲染一次，之后就可以当作静态内容对待了。运行代码即可得知，即使修改了content的内容页面中也没有刷新，利用v-once的特性可以用来优化更新时的性能。

Vue内置指令6．v-memov-memo是Vue3.2新增的指令，表示缓存一个模板的子树，可以使用到元素和组件上，指令的期望值是一个依赖数组。使用v-memo的元素或组件在进行数据渲染的时候，如果依赖数组的内容跟上一次渲染相同，那么元素或组件将会跳过更新不会重新渲染。

运行代码，发现页面中显示的内容仍然是初始定义的。这是因为v-memo指令依赖于数组中contentA的内容并没有被更新。如果v-memo传入空的数组(如：v-memo="[]")则效果与v-once等同。

虽然v-memo指令在性能优化方面具有一定的作用，但它在实际开发中的使用较少。通常，如果v-for指令渲染的列表数据量较大，当需要重新渲染指定选中行数据时，v-memo指令可以帮助提高列表交互时的渲染速度。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返回的应用实例。

代码中，需要注意的是全局注册需要在挂载应用前注册不然无效；注册指令的对象中定义的mounted函数为绑定指令的元素在加载时执行的函数，mounted中的el表示绑定的元素。当运行上述代码后，发现进入页面<input>输入框就获取到了焦点。Vue自定义指令局部注册如果在应用中想要按需注册指令，就可以使用选项式的局部注册。局部注册可以在组件中的directives中声明注册。Vue自定义指令2．自定义指令钩子函数在注册自定义指令时，需要在对象中定义一个mounted函数并实现自定义DOM操作。这个mounted函数是自定义指令的钩子函数之一，通常用于初始化或更新指令的状态和属性。在Vue中钩子函数指的是一个Vue实例从创建到销毁的过程中会自动调用的函数；Vue中钩子函数常用的有三种分别为生命周期钩子函数、指令钩子函数和路由的钩子函数，本节中要介绍的就是指令的钩子函数了，也就是指令在实例创建过程中会自动执行的函数有哪些，如表所示。钩子函数说明created(el,binding,vnode,prevVnode)在绑定元素的属性前，或者事件监听器应用前调用beforeMount(el,binding,vnode,prevVnode)在元素被插入到DOM前调用mounted(el,binding,vnode,prevVnode)在绑定元素的父组件及其它的所有子节点都挂载完毕后调用beforeUpdate(el,binding,vnode,prevVnode)绑定元素的父组件更新前调用updated(el,binding,vnode,prevVnode)在绑定元素的父组件及其它的所有子节点都更新后调用beforeUnmount(el,binding,vnode,prevVnode)绑定元素的父组件卸载前调用unmounted(el,binding,vnode,prevVnode)绑定元素的父组件卸载后调用Vue自定义指令在指令的钩子函数中的参数都是一样的，指令参数的说明如下：el：指令绑定到的元素。el可以用于直接操作DOM，例如聚焦的案例就是使用的el.focus进行操作的。binding：一个绑定对象，对象的属性有：value：传递给指令的值，如：v-number="2"的value值是2；oldValue：指令之前的值；arg：传递给指令的参数，如v-number:sum中sum就是指令参数，指令的参数也可以是动态的；modifiers：指令修饰符对象，如v-my-directive.foo.bar修饰符对象是{foo:true,bar:true}；instance：使用指令的组件实例；dir：指令的定义对象；vnode：代表绑定元素的底层VNode（虚拟DOM相关类用来创建DOM模拟树）prev