Vue.js -自定义指令
一、钩子函数
一个指令定义对象可以提供如下几个钩子函数 (均为可选)：
bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。
二、自定义指令的基本用法
作用：eg:加载页面后自动获得焦点
<script type="text/javascript">
window.onload = function () {
Vue.directive('fo',{ fo表示该自定义指令的名字
inserted:function(el){ el就是个变量，表示所选定的元素，谁用这个指令，el就是指谁
el.focus(); 该选定的元素聚焦
}
});
var vm = new Vue({
el:'#app',
data:{
message:'我是一个div'
},
})
}
</script>
</head>
<body>
<div id="app">
<input type="text" v-fo>
</div>
</body>
结果：加载完页面后，光标自动聚焦到该输入框
- 举例2：（改变元素的背景色）
自定义指令格式：
Vue.directive(‘color’,{
bind:function(el, binding){ 此处的bind换成inserted额可以
el.style.backgroundColor = binding.value.color;
}
})
指令的用法：
< input type=“text” v-color = ‘msg’>
<script type="text/javascript">
window.onload = function () {
Vue.directive('color',{ color表示自定义的名字
bind:function(el, binding){ binding表示传入的参数，el表示调用该函数的元素
el.style.backgroundColor = binding.value.color;
}
})
const vm = new Vue({
el:'#app',
data:{
msg:{ 此处的msg表示的是一个对象
color:'orange'
}
},
})
}
</script>
</head>
<body>
<div id="app">
<input type="text" v-color = 'msg'>
</div>
</body>
结果显示：
三、局部指令
用法：data域中：
directives:{
color:{
bind:function(el, binding){
el.style.backgroundColor = binding.value.color;
}
}
}
<script type="text/javascript">
window.onload = function () {
const vm = new Vue({
el:'#app',
data:{
msg:{
color:'red'
}
},
directives:{ 只是在局部组件中有用
color:{
bind:function(el, binding){
el.style.backgroundColor = binding.value.color;
}
}
}
})
}
</script>
</head>
<body>
<div id="app">
<input type="text" v-color = 'msg'>
</div>
</body>
显示结果：
