2019独角兽企业重金招聘Python工程师标准>>>

自定义指令的简介(官网)：除了核心功能默认内置的指令，Vue 也允许注册自定义指令。注意，在 Vue2.0 中，代码复用和抽象的主要形式是组件。然而，有的情况下，你仍然需要对普通 DOM 元素进行底层操作，这时候就会用到自定义指令。

自定义指令分为局部指令和全局指令。顾名思义，它俩的作用范围不同。

注意：1. 自定义指令命名时使用驼峰命名规则。在使用时，遇到大写字母需要将大写改为小写并在该字母前加“-”。如：myVue==>my-vue。2. 使用自定义指令时，需要在名字前面加“v-”。如：myVue==>v-my-vue。

一、自定义指令

1、全局指令

自定义全局指令的关键字是 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>

2、局部指令

自定义全局指令的关键字是 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,否则打印falseconsole.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>

之前看到过使用自定义指令携带修饰的方式做表单校验。感兴趣的可以找找看。

至此，完毕，感谢您的阅读。

我们心中的大神，只是他会了我们不会的东西而已。所以呢？

转载于:https://my.oschina.net/u/3563169/blog/1577061

03、Vue.js---自定义指令相关推荐

  1. Vue.js自定义指令的用法与实例

    市面上大多数关于Vue.js自定义指令的文章都在讲语法,很少讲实际的应用场景和用例,以致于即便明白了怎么写,也不知道怎么用.本文不讲语法,就讲自定义指令的用法. 自定义指令是用来操作DOM的.尽管Vu ...

  2. js：Vue.js自定义指令实现scroll下滑滚动翻页

    Vue.js自定义指令实现scroll下滑滚动翻页 核心代码 import Vue from 'vue'// v-scroll Vue.directive('scroll', {bind(el, bi ...

  3. （13）Vue.js 自定义指令

    一.Vue.js之定义指令介绍 前面我们学习了一些Vue.js给我们提供的指令,那么我们知道指令就是帮助我们去简化DOM操作的,相当于对基础 DOM操作的一种封装.那么我们仅仅使用这些Vue.js提供 ...

  4. Vue.js 自定义指令

    简介 除了核心功能默认内置的指令 (v-model 和 v-show),Vue 也允许注册自定义指令.注意,在 Vue2.0 中,代码复用和抽象的主要形式是组件.然而,有的情况下,你仍然需要对普通 D ...

  5. VUE通过自定义指令，只允许输入大写英文以及数字

    在写之前需要知道几个功能对象的作用: 首先输入框输入的情况有键盘输入和粘贴输入的情况 用到的组件有: input.onblur-onblur: 事件会在对象失去焦点时发生.Onblur 经常用于Jav ...

  6. VUE：自定义指令（directives ）选项的用法

    自定义指令分为全局指令和局部指令.全局指令可在任意vue组件内生效,局部指令仅在注册了指令的组件内生效. 全局指令和局部指令写法几乎相同.全局指令是在main.js内使用Vue.directive注册 ...

  7. vue 项目自定义指令实现防抖

    自定义v-debounce指令实现click事件防抖 该指令绑定的方法暂不支持传递参数,如需要传参数可以参考另一篇博客,防抖组件的实现 工具uitls文件夹创建debounce.js文件 代码如下 i ...

  8. VUE使用自定义指令对普通 DOM 元素进行底层操作

    使用vue的自定义指令来整合某个重复使用的底层操作 举个聚焦输入框的例子,如下: 当页面加载时,该元素将获得焦点 (注意:autofocus 在移动版 Safari 上不工作).事实上,只要你在打开这 ...

  9. 【前端技巧】JS自定义指令 —— 无限滚动(改写el-table-infinite-scroll)

    @Author:Outman @Date:2023-03-08 JS自定义指令 -- 无限滚动(改写el-table-infinite-scroll) 自定义指令实现 // directives/in ...

  10. Vue的自定义指令以及Vue自定义指令的应用场景

    前言 一.Vue的自定义指令分为? vue中除了核心功能内置的指令外,也允许注册自定义指令.有的情况下,对普通DOM元素进行底层操作,这时候就会用到自定义指令. 自定义指令分为全局自定义指令和局部的自 ...

最新文章

  1. 小学五年级计算机备考方案,小学五年级备考方案(2)
  2. Verilog中关于case语句的优先级
  3. R数据可视化--ggplot2定位之坐标系详解
  4. 全民加速节：解读CDN的应用场景与产品价值
  5. PowerShell 远程执行任务
  6. java web开源项目源码_超赞！推荐一个专注于Java后端源码分析的Github项目！
  7. 十一：贪心算法-寻找硬币
  8. Linux yum更新源url
  9. 一、JpaRepository 命名规范（摘）
  10. ES6的介绍和let的使用|-ES6连载1
  11. 泛微oa主表赋值明细表_OA系统学习--三
  12. C3P0组件+DbUtils组件实现一个JdbcUtils工具类
  13. 平面圆域分割（欧拉公式）+例题
  14. APP开发流程，移动应用开发流程
  15. 案例| 公司信息化建设规划方案
  16. 计算机网络管理 孙卫真,计算机网络管理员
  17. 领扣LintCode算法问题答案-983. 棒球游戏
  18. iOS调用手机振动和铃声
  19. 河南灵活用工系统开发|灵活用工平台能为企业带来什么？
  20. 极路由 安装php,极路由1S刷潘多拉安装优酷路由宝插件

热门文章

  1. deep learning with python 中文版-Deep Learning with Python
  2. 网页版python叫什么-python脚本和网页有何区别
  3. 为什么叫python编程-为什么建议大家学习Python编程呢?老男孩Python入门
  4. python上海培训哪里比较好-上海十大python培训机构排名
  5. windows+VS2017+opencv4.1.0环境配置
  6. numpy中线性代数库的使用Linear Algebra
  7. Opengl-光照-基本光照-冯氏(千万好好理解后面所有的延伸基本都是基于这个的)
  8. 写出现代计算机网络的三个方面的应用,《计算机应用基础》统考模拟试题一及参考答案0...
  9. mysql基础sql语句_SQL基础语句汇总
  10. rocketmq中consumer设计与实现