Vue中的内置指令与自定义指令

一、内置指令

  • 1、v-text指令 :向标签中添加文本

  • 2、v-html指令:向指定恒点中渲染包含html结构的内容。
    2-1、与插值语法的区别:
    (1).v-html会替换掉节点中所有的内容,{{xx}}则不会 。
    (2).v-html可以识别html结构。
    2-2、严重注意: v-html有安全性问题!!!
    (1).在网站上动态演染任查HTML是非常危险的,容易导致XSS攻击。
    (2).定要在可信的内容上使用v-html.永远不要用在用户提交的内容上!

  • 3、v-cloak指令:本质是一个特殊属性。Vue实侧创建完毕并接管容器后。会制掉v-cloak属性,使用css配合v-cloak间以解决网速设时页面展示出{{xxx}}的问题

  • 4、v-once指令:v-once所在节点在初次动态渲染后。就视为静态内容了,以后数据的改动不会引起v-once所在结构的更新。可以用其优化性能。

  • 5、v-pre指令:跳过其所在节点的编译过程。可利用它跳过:没有使用指令语法、没有使用插值语法的节点。会加快编译。

二、自定义指令

  • 1、定义语法:
    (1).局部指令:
new Vue({                               
     directives:{指令名:配置对象}    
})

new Vue({
    directives{指令名:回调两数}
 })   

(2).全局指令:

Vue.directive(指令名,配置对象)

Vue.directive(指令名回调两数)
  • 2、配置对象中常用的3个回调
    (1)、bind:指令与元素成功绑定时调用。
    (2)、inserted:指令所在元素被插入页面时调用.
    (3)、update:指令所在模板结构被重新解析时调用。

  • 3、备注:
    1.指令定义时不加v-。但使用时要加v-;
    2.指令名如果是多个单词,要使用kebab-case命名方式,不要用camelCase命名。

正常值 :

放大10倍 :


版权声明:
作者:zhangchen
链接:https://www.techfm.club/p/58238.html
来源:TechFM
文章版权归作者所有,未经允许请勿转载。

THE END
分享
二维码
< <上一篇
下一篇>>