4-1 自定义指令与过渡-自定义指令
目录：
- 全局指令
- 简化自定义全局指令
- 局部指令
一、自定义全局指令
自定义全局指令，需要用到全局配置，Vue.directive( 指令ID，定义对象) => Vue-directive官方使用手册。
用法如下：
// 注册，注意：使用指令时必须在指令名称前加前缀v-,即：v-指令名
Vue.directive('my-directive', { //my-directive是自定义指令名
bind(){}, //指令第一次绑定到元素上时调用,只调用一次，可执行初始化操作，常用!!!
inserted(){}, //被绑定元素插入到DOM中时调用
update(){}, //被绑定元素所在模板更新时调用
componentUpdated(){}, //被绑定元素所在模板完成一次更新周期时调用(数据更新完毕之后，调用)
unbind(){} //指令与元素解绑时调用，只调用一次
})
// 注册 (指令函数)，简写方式
Vue.directive('my-directive', function () {
// 这里将会被 `bind` 和 `update` 调用
})
// getter，返回已注册的指令
var myDirective = Vue.directive('my-directive')
1.1、钩子函数
说明：自定义全局指令有5个钩子函数，接下来我们用代码来看下5个钩子函数的使用。
<body>
<div id="box">
<h3 v-hello>{{msg}}</h3> <!--测试bind和inserted钩子函数，调用自定义指令：v-指令名-->
<hr>
<button @click="change">更新值</button><!--测试update和componentUpdated钩子函数-->
</div>
<script type="text/javascript" src="../vue.js"></script>
<script>
/**
* 自定义全局变量指令
*/
Vue.directive('hello',{ //5个钩子函数不一定都用,跟Vue的生命周期是一样的，可以选择性使用
bind(){
alert("指令第一次绑定到元素上时调用,只调用一次，可执行初始化操作");
},
inserted(){
alert("被绑定元素插入到DOM中时调用");
},
update(){
alert("被绑定元素所在模板更新时调用");
},
componentUpdated(){
alert("被绑定元素所在模板完成一次更新周期时调用");
},
unbind(){
alert("指令与元素解绑时调用，只调用一次")
}
});
//定义vue实例
var vm = new Vue({
el: "#box",
data: {
msg: "高哥哥很帅耶..."
},
methods:{
change(){
this.msg = "鸿哥哥真丑!!!";
}
}
});
</script>
</body>
1.2、钩子函数参数
在调用自定义指令时，可以给 其中任意一个钩子函数传参数，或者说是给钩子函数赋值。钩子函数参数：Vue官方说明文档
官方文档给出4个钩子函数参数，但是最常用的2个，我就直接列出最常用的2个：
el：指令所绑定的元素，可以用来直接操作 DOM。(指令所绑定的元素)
binding：一个对象，包含以下属性:
name：指令名，不包括 v- 前缀。
value：指令的绑定值，例如：v-my-directive="1 + 1" 中，绑定值为 2。
oldValue：指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
expression：字符串形式的指令表达式。例如 v-my-directive="1 + 1" 中，表达式为 "1 + 1"。
arg：传给指令的参数，可选。例如 v-my-directive:foo 中，参数为 "foo"。
modifiers：一个包含修饰符的对象。例如：v-my-directive.foo.bar 中，修饰符对象为 { foo: true, bar: true }
用法如下：
<body>
<div id="box">
<h3 v-world:shabihong.hehe.haha="username">{{msg}}</h3>
</div>
<script type="text/javascript" src="../vue.js"></script>
<script>
/**
* 自定义全局变量指令
*/
Vue.directive('world',{
bind(el,binding) {
console.log(el); //指令所绑定的元素，DOM对象
//刚开始查看实际输出跟官方参数少，因为有些属性你没有给它传值，它就不具有这些属性，当你传值之后就有了
console.log(binding);
//console.log(binding.name);
}
});
var vm = new Vue({
el: "#box",
data: {
msg: "高哥哥很帅耶...",
username: "gaogege" //给v-world指定一个值，username
}
});
</script>
</body>
输出结果如下：
# el输出
<h3>高哥哥很帅耶...</h3>
# binding输出对象
>{name: "world", rawName: "v-world:shabihong.hehe.haha", value: "gaogege", expression: "username", arg: "shabihong", …}
name: "world" #输出自定义指令名
rawName: "v-world:shabihong.hehe.haha"
value: "gaogege" #指令的绑定值 v-world="username"中username的值
expression: "username" #指令表达式，v-world="username"中的 username表达式
arg: "shabihong" #给指令传参值
>modifiers: {hehe: true, haha: true} #自定义指令修饰符
>def: {bind: ƒ}
>__proto__: Object
知识点整理：
①给自定义指令绑定值
#html
<!--username绑定到v-world指令上-->
<h3 v-world="username">{{msg}}</h3>
#script
#自定义全局指令
Vue.directive('world',{
bind(el,binding) {
console.log(binding);
}
});
#vue实例
var vm = new Vue({
el: "#box",
data: {
msg: "高哥哥很帅耶...",
username: "gaogege" //给v-world指定一个值，username
}
});
#输出
expression: "username"
value: "gaogege"
②给指令传递参数
#html
<!--v-指令名:参数-->
<h3 v-world:shabihong="username">{{msg}}</h3>
#script
#自定义全局指令
Vue.directive('world',{
bind(el,binding) {
console.log(binding.arg);
}
});
#vue实例
var vm = new Vue({
el: "#box",
data: {
msg: "高哥哥很帅耶...",
username: "gaogege" //给v-world指定一个值，username
}
});
#输出
arg: "shabihong"
③指定修饰符
这边要强调的是，在指定修饰符的时候，可以指定多个修饰符。
#html
<!--v-指令名:参数.修饰符.修饰符.修饰符...或者 v-指令名.修饰符.修饰符.修饰符...-->
<h3 v-world:shabihong.hehe.haha="username">{{msg}}</h3>
#script
Vue.directive('world',{
bind(el,binding) {
console.log(binding.modifiers);
}
});
//vue实例
var vm = new Vue({
el: "#box",
data: {
msg: "高哥哥很帅耶...",
username: "gaogege" //给v-world指定一个值，username
}
});
#输出
modifiers: {hehe: true, haha: true}
二、简化自定义全局指令
我们来说说简化自定义全局指令，之前有5个钩子函数，但是并不是所有都能用到，所以有一种简化写法：
// 注册 (指令函数)，简写方式
Vue.directive('my-directive', function () { //function(){} => (){}
// 这里将会被 `bind` 和 `update` 调用
})
实例如下：
<body>
<div id="box">
<h3 v-sb>{{msg}}</h3>
</div>
<script type="text/javascript" src="../vue.js"></script>
<script>
/**
* 自定义全局变量指令
*/
Vue.directive('sb',(el,binding) => {
// 这里将会被 `bind` 和 `update` 调用
//alert("shabihong");
//console.log(el);
//console.log(binding);
});
var vm = new Vue({
el: "#box",
data: {
msg: "高哥哥很帅耶..."
}
});
</script>
</body>
三、自定义局部指令
刚刚我们说了自定义全局指令，现在我们说说自定义局部指令，其他的用法都一样，只是自定义局部指令在 vue的实例中作为一个选项 directives：directives官方使用手册。
用法如下：
var vm = new Vue({
el: "#box",
data: {
msg: "高哥哥很帅耶..."
},
directives:{//自定义局部指令
focus:{ //focus是指令名
inserted(el){ //inserted钩子函数，el指令所绑定的元素
el.focus()
}
}
}
});
具体使用如下：
<body>
<div id="box">
<input v-focus> <!--使用自定义局部指令v-focus-->
</div>
<script type="text/javascript" src="../vue.js"></script>
<script>
var vm = new Vue({
el: "#box",
data: {
msg: "高哥哥很帅耶..."
},
directives:{//自定义局部指令
focus:{
inserted(el){
el.focus()
}
}
}
});
</script>
</body>
浙公网安备 33010602011771号