Vue内置指令和自定义指令

一、Vue内置指令

v-text指令&＃xff1a;

• 作用&＃xff1a;向其所在的节点中渲染文本内容
• 与插值语法的区别&＃xff1a;v-text会替换掉节点中的内容&＃xff0c;{{xx}}则不会

v-html指令&＃xff1a;

1.作用&＃xff1a;向指定节点中渲染包含html结构的内容

2.与插值语法的区别&＃xff1a;

• v-html会替换掉节点中所有的内容&＃xff0c;{{xx}}则不会
• v-html可以识别html结构

3.严重注意&＃xff1a;v-html有安全性问题&＃xff01;&＃xff01;&＃xff01;

• 在网站上动态渲染任意HTML是非常危险的&＃xff0c;容易导致xss攻击
• 一定要在可信的内容上使用v-html&＃xff0c;永不要在用户提交的内容上&＃xff01;

v-cloak指令&＃xff08;没有值&＃xff09;&＃xff1a;

• 本质是一个特殊的属性&＃xff0c;Vue实例创建完毕并接管容器后&＃xff0c;会删掉v-cloak属性
• 使用css配合v-可以解决网速慢时页面展示出{{xxx}}的问题

v-once指令&＃xff1a;

• v-once所在节点在初次动态渲染后&＃xff0c;就被视为静态内容了
• 以后数据的改变不会引起v-once所在结构的更新&＃xff0c;可以用于优化性能

v-pre指令&＃xff1a;

• 跳过其所在节点的编译过程
• 可利用它跳过&＃xff1a;没有使用指令语法、没有使用插值语法的节点&＃xff0c;会加快编译

二、自定义指令

需求1&＃xff1a;定义一个v-big指令&＃xff0c;和v-text功能类似&＃xff0c;但会把绑定的数值放大10倍

需求2&＃xff1a;定义一个v-fbind指令&＃xff0c;和v-bind功能类似&＃xff0c;但可以让其所绑定的input元素默认获取焦点

1.定义语法&＃xff1a;

&＃xff08;1&＃xff09;局部指令&＃xff1a;

new Vue({directives:{指令名:配置对象}
})
或
new Vue({directives{指令名&＃xff1a;回调函数}
})

&＃xff08;2&＃xff09;全局指令&＃xff1a;

Vue.directive(指令名,配置对象)
或
Vue.directive(指令名,回调函数)

2.配置对象中常用的三个回调&＃xff1a;

• bind&＃xff1a;指令与元素成功绑定时调用
• inserted&＃xff1a;指令所在元素被插入页面时调用
• update&＃xff1a;指令所在模板结构被重新解析事调用

3.备注&＃xff1a;

• 指令定义时不加v-&＃xff0c;但使用时要加v-
• 指令名如果是多个单词&＃xff0c;要使用kebab-case&＃xff08;user-name&＃xff09;命令方式&＃xff0c;不要用camelCase&＃xff08;userName&＃xff09;命名