一、内置指令
- 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指令:跳过其所在节点的编译过程。可利用它跳过:没有利用指令语法、没有利用插值语法的节点。会加速编译。
二、自界说指令
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命名。
<div id="root"> <h1>正常值 : <span v-text="num"></span></h1> <h1>放大10倍 : <span v-big="num"></span></h1> <button @click="num++">点我num+1</button> <hr /> <input type="text" v-bind:value="num" /> <input type="text" v-fbind:value="num" /> </div><script> Vue.config.productionTip = false; //克制vue在启动时生成生产提示 // 全局指令 Vue.directive("fbind", { // 指令与元素乐成绑定时 bind(element, binding) { console.log("bind"); element.value = binding.value; }, // 指令所在元素插入页面时 inserted(element, binding) { console.log("inserted"); element.focus(); }, // 指令所在模板被重新剖析时 update(element, binding) { console.log("ipdate"); element.value = binding.value; }, }); //创建Vue实例 const vm = new Vue({ //ViewModel el: "#root", data: { num: 1, }, methods: {}, directives: { // big何时会被调用？ 1、指令与元素乐成绑定时；2、指令所在的模板被重新剖析时 big(element, binding) { element.innerText = binding.value * 10; console.log(element, binding.value, this); // !!!留意 此处的this指向 window }, fbind:{ // 指令与元素乐成绑定时 bind(element,binding){ console.log('bind'); element.value = binding.value; }, // 指令所在元素插入页面时 inserted(element,binding){ console.log('inserted'); element.focus(); }, // 指令所在模板被重新剖析时 update(element,binding){ console.log('ipdate'); element.value = binding.value; } } }, }); // console.log(vm);</script> |
