版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/Fanbin168/article/details/85681133
前言
Vue为我们提供了很多内置指令，如 v-bind, v-on,v-text等等。但是有时候我们需要自己定义一些我们自己的指令来实现我们自己的功能。
下面我们就来看看如何自定义指令：
自定义全局指令
案例一：自定义全局v-focus指令
自定义一个指令来实现让文本框获取焦点 ，同时元素赋給值
<html>
<head>
<script src="~/Scripts/vue.js"></script>
</head>
<body>
<div id="app">
使用自定义v-focus指令：<input type="text" v-focus/>
</div>
<script>
//自定义一个全局指令：名字为focus 在调用的时候，必须在指令前加上 v- 来进行调用（vue规定）
Vue.directive('focus', {
//参数element是这个指令所绑定的元素，例如：<input type="text" v-focus /> 那么这个element就是这个input元素（这个元素就是一个原生的JS对象）
bind: function (element) {
//每当指令绑定到元素上的时候，会立即执行这个bind函数，只执行一次
//在元素刚绑定指令的时候，此时元素还没有插入到DOM中去，此时还元素还在内存当中，所有此时调用元素（原生JS对象）的事件方法是无效的
//只有在元素插入到DOM之后，调用这个元素（原生JS对象）事件方法才有效
//element.focus();
},
inserted: function (element) {
// 单元素插入到DOM中的时候，会执行这个inserted函数 （触发一次）
// 每当指令绑定到元素上的时候,如果执行到inserted方法的时候，说明这个元素从内存加载到渲染到页面的工作已经做完了，
// 此时我们调用一下元素的focus事件，就可以获取焦点了
element.focus(); //获取焦点
element.value = "你好，元素"; //既然这个element是一个原生JS对象，那么我们就可以像操作JS一样来操作这个对象了，比如可以给他赋值
},
updated: function (element) {
//当VNode更新的时候，会执行这个updated函数，可能会触发多次
}
})
var vm = new Vue({
el: "#app",
data: {
name: '',
},
methods: {
add: function (name) { alert(name) },
},
filters: {
}
})
</script>
</body>
</html>
案例二：自定义全局 v-color指令
案例2.1 不带参数的指令
<html>
<head>
<script src="~/Scripts/vue.js"></script>
</head>
<body>
<div id="app">
使用自定义v-color指令：<input type="text" v-color/>
</div>
<script>
//自定义一个全局指令：名字为color 在调用的时候，必须在指令前加上 v- 来进行调用（vue规定）
Vue.directive('color', {
//参数element是这个指令所绑定的元素，例如：<input type="text" v-color /> 那么这个element就是这个input元素（这个元素就是一个原生的JS对象）
bind: function (element) {
//每当指令绑定到元素上的时候，会立即执行这个bind函数，只执行一次
//在元素刚绑定指令的时候，此时元素还没有插入到DOM中去，此时还元素还在内存当中，所有此时调用元素（原生JS对象）的事件方法是无效的
//只有在元素插入到DOM之后，调用这个元素（原生JS对象）事件方法才有效
//element.focus(); //无效
//但是这里是可以设置样式
//样式与事件不同，样式，只要通过指令绑定给了元素，不管这个元素有没有被插入到页面中去，这个元素肯定有了一个内联的样式
//将来元素肯定会被显示到页面，这时候浏览器的渲染引擎比如会解析样式，应用给这个元素
element.style.color = 'red';
},
inserted: function (element) {
},
updated: function (element) {
}
})
var vm = new Vue({
el: "#app",
data: {
}
})
</script>
</body>
</html>
案例2.2 带参数的指令
https://cn.vuejs.org/v2/guide/custom-directive.html#钩子函数参数
<html>
<head>
<script src="~/Scripts/vue.js"></script>
</head>
<body>
<div id="app">
使用自定义v-color指令：<input type="text" v-color="'yellow'"/> <!--注意：此时yellow需要用单引号引起来-->
</div>
<script>
//自定义一个全局指令：名字为color 在调用的时候，必须在指令前加上 v- 来进行调用（vue规定）
Vue.directive('color', {
//参数element是这个指令所绑定的元素，例如：<input type="text" v-color /> 那么这个element就是这个input元素（这个元素就是一个原生的JS对象）
//参数colour是我们自定义指令的绑定值
bind: function (element, colour) {
//每当指令绑定到元素上的时候，会立即执行这个bind函数，只执行一次
//在元素刚绑定指令的时候，此时元素还没有插入到DOM中去，此时还元素还在内存当中，所有此时调用元素（原生JS对象）的事件方法是无效的
//只有在元素插入到DOM之后，调用这个元素（原生JS对象）事件方法才有效
//element.focus(); //无效
//但是这里是可以设置样式
//样式与事件不同，样式，只要通过指令绑定给了元素，不管这个元素有没有被插入到页面中去，这个元素肯定有了一个内联的样式
//将来元素肯定会被显示到页面，这时候浏览器的渲染引擎比如会解析样式，应用给这个元素
element.style.color = colour.value;
console.log(colour.name); //输出color 【指我们自定义指令的名称】
console.log(colour.value); //输出 yellow 【指令的绑定值】
console.log(colour.expression) //输出 'yellow' 【指令绑定值的字符串形式】
},
inserted: function (element, colour) {
},
updated: function (element, colour) {
}
})
var vm = new Vue({
el: "#app",
data: {
}
})
</script>
</body>
</html>自定义私有指令
<html>
<head>
<script src="~/Scripts/vue.js"></script>
</head>
<body>
<div id="app">
使用自定义v-color指令：<input type="text" v-color="'red'" v-fontweight="900"/> <!--注意：此时yellow需要用单引号引起来-->
使用自定义v-fontweight指令：<p v-fontweight="900" >你好中国</p> <!--注意：数字不需要用单引号引起来-->
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
},
directives: { //这里面是自定义私有指令的地方
"color": { //定义一个v-color指令：实现自定义字体颜色
bind: function (element, colour) {
element.style.color = colour.value;
}
},
"fontweight": { //定义一个v-fontweight指令：实现自定义字体粗细
bind: function (element, bingding) {
element.style.fontWeight = bingding.value;
}
}
}
})
</script>
</body>
</html>
自定义指令的简写
大多数情况下，我们可能想在bind 和update钩子函数上做重复动作，并不想关心其他的钩子函数，我们就可以简写
自定义全局指令的简写
<html>
<head>
<script src="~/Scripts/vue.js"></script>
</head>
<body>
<div id="app">
使用自定义v-color指令：
<input type="text" v-color="'red'" />
<div></div>
<!--注意：此时yellow需要用单引号引起来-->
</div>
<script>
//这个function等同于 同时把函数中的代码写到了bind 和 update 函数中去了
Vue.directive("color", function (element, colour) {
element.style.backgroundColor = colour.value;
})
//上面的这段代码等同于下面这段代码
Vue.directive("color", {
bind: function (element, colour) {
element.style.backgroundColor = colour.value;
},
updated: function (element, colour) {
element.style.backgroundColor = colour.value;
}
})
var vm = new Vue({
el: "#app",
})
</script>
</body>
</html>自定义私有指令的简写
<html>
<head>
<script src="~/Scripts/vue.js"></script>
</head>
<body>
<div id="app">
使用自定义v-color指令：<input type="text" v-color="'red'" /> <!--注意：此时yellow需要用单引号引起来,如果是纯数组则不需要用单引号引起来-->
使用自定义v-fontsize指令： <p v-fontsize="'50px'">你好中国</p> <!--注意：此时50px需要用单引号引起来，如果是纯数组则不需要用单引号引起来-->
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
},
directives: { //这里面是自定义私有指令的地方
//私有指令定义的正常写法
"color": { //定义一个v-color指令：实现自定义字体颜色
bind: function (element, colour) {
element.style.color = colour.value;
},
inserted: function (element, colour) {
},
updated: function (element, colour) {
}
},
//私有指令定义的简写:这个function等同于 同时把函数中的代码写到了bind 和 update 函数中去了
"fontsize": function (element, bingding) { //定义一个v-fontsize指令：实现自定义字体大小
//element.style.fontSize = bingding.value;
//在设置字体大小的时候，程序员本意是想设置一个50px大小的字体，但是程序员可能存在忘记写px了
//为了防止这种情况发生，我们可以用以下方式防止下
element.style.fontSize = parseInt(bingding.value) + 'px'; //即便程序员写了 50px，但是通过parseInt方法后，50px也会变成50，然后我们手动给他加个px 就兼容啦
}
}
})
</script>
</body>
</html>
总结
在我们自定义vue指令的时候：
和Js事件有关的操作，一般在inserted 函数中去执行，防止JS行为不生效
扫描二维码关注公众号，回复：
4960125 查看本文章
和Js样式有关的操作，一般都可以在bind函数中执行（当然你如果想放在inserted中去执行也是可以的）