一、内置指令
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命名。
<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>
