学习Vue的自定义指令总结

今天学习了Vue的内置指令和自定义指令，内置指令一般都是些比较常用的指令，比如v-html指令可以向指定节点中渲染包含html结构的内容，但使用该指令需谨慎，因为像这样动态渲染任意的html是很容易导致XSS攻击的，切记该指令不可以使用在用户提交内容上。v-cloak指令是为了防止用户网速慢导致的先加载显示出容器内的源码，使用该指令后在Vue还没有接管容器时标签是不会显示出来的，等接管后Vue会自动删除掉该属性恢复标签原来的样子。v-once可以在其节点的初次动态渲染后将内容转为静态的，一般用在一些只需要初始化一次的数据上，第二次结构更新的时候就不再对其更新，这样就可以起到一个优化性能的作用。v-pre指令可以跳过其所在节点的编译过程，一般用在没有其他指令语法和插值语法的标签，因为减少了需要编译的内容所以可以提高编译的速度、提高效率。接下来就是自定义的指令，自定义指令可以简单的理解为功能单一的内置指令不能满足需求时需要自己来写指令里操作内容，在学习自定义指令之前我们要对浏览器解析js代码的逻辑有一定的基础才能比较好的理解，首先自定义的指令的函数统一写在Vue实例的directives配置项里面，在标签内容书写的话就需要在自定义指令名字的前面加上v-，如果在配置项里面的话直接写名字即可，自定义函数可以接收两个参数，一个是真实的元素标签，另一个是我们为其绑定的值，拿到这两样我们就可以对元素和元素内的值进行操作了，Vue在这里为我们设计了一个很关键的逻辑，就是我们定义的指令什么时候调用，这里主要分为三个时机阶段，一个是指令和元素绑定时、一个是指令所在元素被插入页面时、最后应该就是指令所在的模板被重新解析时，我们就可以通过这三个时机来详细精准的设置对其的操作。