声明：本文转载自https://my.oschina.net/u/3563169/blog/1577061，转载目的在于传递更多信息，仅供学习交流之用。如有侵权行为，请联系我，我会及时删除。
自定义指令的简介(官网)：除了核心功能默认内置的指令，Vue 也允许注册自定义指令。注意，在 Vue2.0 中，代码复用和抽象的主要形式是组件。然而，有的情况下，你仍然需要对普通 DOM 元素进行底层操作，这时候就会用到自定义指令。
自定义指令分为局部指令和全局指令。顾名思义，它俩的作用范围不同。
注意：1. 自定义指令命名时使用驼峰命名规则。在使用时，遇到大写字母需要将大写改为小写并在该字母前加“-”。如：myVue==>my-vue。2. 使用自定义指令时，需要在名字前面加“v-”。如：myVue==>v-my-vue。
自定义全局指令的关键字是 Vue.directive，具体使用方法见代码及注释：
js部分代码：
window.onload = function (){ // Vue.directive(id,[opt]) // 会在Vue中注册一个新的指令 // 新指令的名称 就是 在定义时所指定的 id // 自定义的指令 在注册到Vue中时 会被默认的增加一个前缀 v- Vue.directive("myVue",{ // 生命周期的钩子函数 // 创建 bind(){ // 指令第一次绑定到元素上时，所执行的方法 ， 只会被调用一次 console.log("bind"); }, // 写入 inserted(){ // 被该指令绑定的元素 写入到 DOM 结构中 console.log("inserted"); }, // 更新 update(){ // 被绑定的元素 在模板中 发生更新 会调用该方法 alert("update"); }, // 模板更新 componentUpdate(){ // 被绑定的元素 在模板完成一次更新时 会被调用 alert("componentUpdate"); }, // 销毁 unbind(){ // 解除绑定的时候调用 alert("unbind"); } }); new Vue({ el:"#app" }); }html部分代码：
<body> <div id="app"> <!-- 定义是的指令名是myVue,这里使用时是 v-my-vue --> <div v-my-vue></div> </div> </body>自定义全局指令的关键字是 directives，具体使用方法见代码及注释：
js部分代码：
window.onload = function (){ new Vue({ el:"#app", directives:{ //指令名称，这里可以定义多个指令。 // 注意指令的有效范围 myVue:{ bind(){ console.log("bind"); }, inserted(){ console.log("inserted"); }, update(){ console.log("update") }, componentUpdate(){ console.log("componentUpdate") }, unbind(){ console.log("unbind") } } } }); }html部分代码：
<body> <div id="app"> <!-- 定义是的指令名是myVue,这里使用时是 v-my-vue --> <div v-my-vue></div> </div> </body>
通过上述自定义指令，结合钩子（生命周期）函数，我们可以对 DOM 对象进行底层操作。但是，由于考虑到上述代码都比较多，而且我们对DOM操作基本上是在元素创建（bind）和更新（update）两个阶段。所以，官网也提供了自定义指令的简写方式。
全局方式的简写：Vue.directive( 指令名 , 函数 )。第二个参数（函数）会在指令 bind 和 update 的时候调用；
局部指令的简写：directives:{ 指令名 : 函数 }。也是在指令 bind 和 update 的时候调用函数。具体见代码部分：
js部分代码：
// fun 只会在 指令 的bind 和 update 调用 // 自定义全局指令简写 Vue.directive("hello",function(){ console.log("调用全局指令"); }); new Vue({ el:"#app", data:{ msg:"消息" }, //自定义局部指令简写 directives:{ world:function(){ console.log("局部指令"); } } });html部分代码：
<body> <div id="app"> <div v-hello>{{msg}}</div> <div v-world>{{msg}}</div> <input type="text" v-model="msg"> </div> </body>通过这种简写方式，代码量确实少了很多。
上面介绍的自定义指令都是不带参数的。
vue.js 的指令参数是以" : " 为关键字；
vue.js 的修饰符是以 " . " 为关键字。（具体可见《Vue.js---指令》）。
自定义指令的传参方式也是如此。自定义指令简写时的function可以传两个参数，第一个是 el，表示的是当前指指令所绑定元素的 DOM 对象；第二个是 args，args的具体内容可以根据下述代码打印出来研究一下。
js段代码部分：
new Vue({ el:"#app", data:{ msg:"消息", nums:[1,2,3,4] }, // 自定义局部指令 directives:{ // 第一个自定义指令 vueOne:function(el,args){ // el 所指的是 当前指指令 所绑定元素的 DOM 对象 // 感兴趣的可以打印出el看看 // console.log(el); // args 是参数结合 // console.log(args); // el.innerHTML = "测试消息"; el.innerHTML = args.value; // Vue 帮开发者 省略对于DOM的操作 el.style.color = "red"; }, // 第二个自定义指令 math:function(el,args){ // 打印args在控制台看看结果 // console.log(args); let temp; //传的参数是 sum 时做加法操作 if(args.arg=="sum"){ temp = 0; for (let i = 0; i < args.value.length; i++) { temp = temp+(args.value[i]); } } // 传递的参数是 mul 时做乘法操作 if(args.arg=="mul"){ temp = 1; for (let i = 0; i < args.value.length; i++) { temp = temp*(args.value[i]); } } el.innerHTML = temp; }, aaa:function(el,args){ // 当指令 v-aaa每携带一个修饰符，args中的modifiers(对象)会多个以key为该修饰符 值为true的元素 console.log(args); console.log(args.modifiers.f1);//携带修饰符f1时，打印true,否则打印false console.log(args.modifiers.f3);//携带修饰符f2时，打印true,否则打印false } } });html代码部分：
<body> <div id="app"> <!-- <div v-world></div> --> <div v-vue-one="msg"></div> <input type="text" v-model="msg"> <!-- v-math 指令传参 sum/mul --> <div v-math:sum="nums"></div> <div v-math:mul="nums"></div> <!-- 自定义指令v-aaa携带两个修饰符 --> <div v-aaa.f1.f2></div> </div> </body>之前看到过使用自定义指令携带修饰的方式做表单校验。感兴趣的可以找找看。
至此，完毕，感谢您的阅读。
我们心中的大神，只是他会了我们不会的东西而已。所以呢？
本文发表于2017年11月22日 12:33
(c)注：本文转载自https://my.oschina.net/u/3563169/blog/1577061，转载目的在于传递更多信息，并不代表本网赞同其观点和对其真实性负责。如有侵权行为，请联系我们，我们会及时删除.
阅读 1941 讨论 0 喜欢 0
复杂度分析练习题 | 王争《数据结构与算法之美》 -极客时间
SpringBoot2.0高级案例(02) ：整合 RocketMQ ,实现请求异步处理
避坑！MotionGo就是一款诈骗软件！千万不要用ChatPPT，浪费时间！
宝塔面板使用WWW用户执行计划任务命令 解决laravel日志权限问题 宝塔设置计划任务执行用户
手机微信一键制作透明底文字表情 教你如何让微信表情包背景为透明 自制微信表情包动图 文字表情在线制作
ssh目录权限配置指南 .ssh文件夹及rsa_id.pub等文件正确权限规则
Mac连接亚马逊AWS EC2 远程连接登录不上去 有pem私钥文件依然要输密码 默认密码 教程
PHP工程师必知必会 - Linux系统常用命令 - Linux中的网络管理命令（下）
| 抢先体验 |
|---|
扫码体验 |
| 闪念胶囊 |
|---|
|
你要过得好哇，这样我才能恨你啊，你要是过得不好，我都不知道该恨你还是拥抱你啊。 17:21 2021年04月19日 查看详情 |
|
直抵黄龙府，与诸君痛饮尔。 18:17 2021年03月28日 查看详情 |
|
那时陪伴我的人啊，你们如今在何方。 16:28 2021年03月19日 查看详情 |
|
不出意外的话，我们再也不会见了，祝你前程似锦。 18:05 2021年03月17日 查看详情 |
|
这世界真好，吃野东西也要留出这条命来看看 21:21 2021年03月14日 查看详情 |
| Contact |
|---|
Y2lvbkBjaGluYWNpb24uY24= |