在Vue中自定义指令分为：全局自定义指令和局部自定义指令
1.全局自定义指令
①首先自定义一个叫’focus’的自定义指令，使用时候加 v-focus 即可，加上v-focus，执行时候会干一件事情，会有一个叫 mounted 生命周期函数，指的是当这个指令挂载到 某个dom节点上，mounted函数会自动执行，并且接收第一个参数el（当前挂载dom节点）， 然后开始自动执行el.focus()
②不管是全局自定义指令和局部自定义指令，里面都可以调用Vue生命周期函数，比如mounted（），beforemounted（），updated（）等函数
<body>
<div id="root"></div>
<script src="../Vue day01/vue.global.js"></script>
<script>
const app = Vue.createApp ({
template:`
<div>
<input v-focus />
</div>
`
});
//定义全局自定义指令，获取input输入框焦点
app.directive ('focus', {
mounted(el) {
el.focus();
}
});
const vm = app.mount('#root');
</script>
</body>
运行效果：
③binding参数
<style>
.header {
position: absolute
}
</style>
</head>
<body>
<div id="root"></div>
<script src="../Vue day01/vue.global.js"></script>
<script>
const app = Vue.createApp({
data() {
return {
top: 110,
}
},
template: `
<div>
<div v-pos='top' class='header'>
<input />
</div>
</div>
`
});
//binding 是个对象，包含name和value等属性，在这里value的值就是v-pos等号右边top值400
app.directive('pos', {
mounted(el, binding) {
el.style.top = (binding.value + 'px')
}
});
const vm = app.mount('#root');
</script>
</body>
运行效果：
④自定义参数，控制左右上下等
<style>
.header {
position: absolute
}
</style>
</head>
<body>
<div id="root"></div>
<script src="../Vue day01/vue.global.js"></script>
<script>
const app = Vue.createApp({
data() {
return {
distance: 110,
}
},
template: `
<div>
<div v-pos:left='distance' class='header'>
<input />
</div>
</div>
`
});
//binding 是个对象,里面还有个arg，在这里指的是left
app.directive('pos', {
mounted(el, binding) {
el.style[binding.arg] = (binding.value + 'px')
}
});
const vm = app.mount('#root');
</script>
</body>
运行效果·：
在这里打印输出一下binding.arg
app.directive('pos', {
mounted(el, binding) {
console.log(binding.arg , binding);
}
});
输出结果：
函数参数说明：
el:指令所绑定的dom元素，可以直接操作元素。
binding:一个对象，包含以下property
- name:指令名，不包含’v-'前缀
- value:指令的绑定值，即通过v-demo=“参数”，参数(计算后)传过来的计算结果
- oldValue:指令绑定的前一个值，仅在update 和 componentUpdated 钩子中可用。无论值是否改变都可用
- expression:字符串形式的指令表达式，v-demo=“1 + 1” ,这里参数值就是"1 + 1"。
- arg:传给指令的参数，可选。例如v-demo:foo,这里的参数值就是’foo’
- modifiers:一个包含修饰符的对象，例如v-demo.a.b,参数的值为{a:true,b:true}
vnode:vue编译生成的虚拟节点
oldVnode:上一个虚拟节点，仅在update和componentUpdated钩子函数中可用
2.局部自定义指令
①局部自定义指令，只对当前vm模板有效
②函数参数跟全局自定义指令是一样的，也有el，binding
<body>
<div id="root"></div>
<script src="../Vue day01/vue.global.js"></script>
<script>
//定义一个局部指令
const directives = {
focus:{
mounted(el){
el.focus();
}
}
};
const app = Vue.createApp({
//使用局部指令，当2者名称相同时候，可以省略，只写一个directives
directives: directives,
template: `
<div>
<input v-focus />
</div>
`
});
const vm = app.mount('#root');
</script>
</body>
运行效果：
