vue自定义指令实现方法详解


Posted in Javascript onFebruary 11, 2019

本文实例讲述了vue自定义指令实现方法。分享给大家供大家参考,具体如下:

vue中的指令就是v-on v-bind v-show等等,那么自定义指令是什么呢?

自己定义的指令就是自定义指令。

语法:

Vue.directive(id, definition)

这里可以参考vue中的指令

<h1 v-if="yes">Yes</h1> 其中,if就是指令ID,yes是expression

Vue.directive()传入接受两个参数,id是指指令ID,definition是指定义对象。其中,定义对象可以提供一些钩子函数。

钩子函数:

  • bind

- inserted:被绑定元素插入父节点时调用 (仅保证父节点存在,但不一定已被插入文档中)。

  • update
  • componentUpdated

    unbind

钩子函数参数

  • el:指令所绑定的元素,可以用来直接操作 DOM 。
  • binding:一个对象,包含以下属性:

比如 name, value ,expression ,rawName等等

为了更好的操作DOM

例子如下,让p标签的颜色变成红色。给p标签加入了v-color 的自定义指令。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <p v-color="red">我是自定义指令</p> red绑定到data里面的变量
    <p v-color="'blue'">我是自定义指令</p> 也支持字符串
  </div>
<script src='vue.js'></script>
<script>
  // 注册一个全局的自定义指令
  Vue.directive('color', {
   inserted: function (el,binding) {
    console.log(el,binding)
    el.style.color = binding.value
   }
  })
  new Vue({
    el:'#app',
    data:{
      red:'red'
    }
  })
</script>
</body>
</html>

局部注册例子

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <p v-color="red">我是自定义指令</p>
  </div>
<script src='vue.js'></script>
<script>
  new Vue({
    el:'#app',
    data:{
      red:'red'
    },
    directives: {
     color: {
      // 指令的定义
      inserted: function (el,binding) {
       el.style.color = binding.value
      }
     }
    }
  })
</script>
</body>
</html>

比如给侧边栏做一个鼠标滚轮事件。

但是,这样需要兼容写法,粗暴的给元素添加onmousewheel是不对的,因为在火狐浏览器下根本不会执行。

怎么办?

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    #scrollwrap {
      width:200px;
      height:800px;
      background: #ccc;
    }
  </style>
</head>
<body>
  <div id="app">
    <div id="scrollwrap" v-scrollfn="mousewheel">我是侧边栏</div>
  </div>
<script src='vue.js'></script>
<script>
  new Vue({
    el:'#app',
    data:{
      red:'red',
      mousewheel: '滚轮事件'
    },
    directives: {
     scrollfn: {
      // 指令的定义
      inserted: function (el,binding) {
       var userAgent = window.navigator.userAgent
       // 通过userAgent拿到
       if (userAgent.indexOf('Firefox')> -1) {
        console.log('是火狐浏览器')
        el.addEventListener('DOMMouseScroll',function (e){
         console.log(e.detail)
        })
       } else {
        console.log('不是火狐')
        el.addEventListener('mousewheel',function (e){
         console.log(e.wheelDelta)
        })
       }
      }
     }
    }
  })
</script>
</body>
</html>

希望本文所述对大家vue.js程序设计有所帮助。

Javascript 相关文章推荐
提高代码性能技巧谈—以创建千行表格为例
Jul 01 Javascript
JS 自动安装exe程序
Nov 30 Javascript
jquery tools 系列 scrollable(2)
Sep 06 Javascript
让复选框只能选择一项的方法
Oct 08 Javascript
Angular2入门教程之模块和组件详解
May 28 Javascript
使用jquery+iframe做一个ajax上传效果(实例)
Aug 24 jQuery
JavaScript中重名的函数与对象示例详析
Sep 28 Javascript
Vue.js devtool插件安装后无法使用的解决办法
Nov 27 Javascript
简单了解vue.js数组的常用操作
Jun 17 Javascript
微信小程序开发中var that =this的用法详解
Jan 18 Javascript
elementui更改el-dialog关闭按钮的图标d的示例代码
Aug 04 Javascript
Vue+Flask实现图片传输功能
Apr 01 Vue.js
Vue表情输入组件 微信face表情组件
Feb 11 #Javascript
js屏蔽退格键(backspace或者叫后退键与F5)
Feb 10 #Javascript
Vue动画事件详解及过渡动画实例
Feb 09 #Javascript
JavaScript ES6常用基础知识总结
Feb 09 #Javascript
Vue组件的使用及个人理解与介绍
Feb 09 #Javascript
Vue自定义指令写法与个人理解
Feb 09 #Javascript
Vue指令指令大全
Feb 09 #Javascript
You might like
php处理json时中文问题的解决方法
2011/04/12 PHP
PHP根据传来的16进制颜色代码自动改变背景颜色
2014/06/13 PHP
thinkphp模板的包含与渲染实例分析
2014/11/26 PHP
Prototype 1.5.0_rc1 及 Prototype 1.5.0 Pre0小抄本
2006/09/22 Javascript
javascript Split方法,indexOf方法、lastIndexOf 方法和substring 方法
2009/03/21 Javascript
Prototype PeriodicalExecuter对象 学习
2009/07/19 Javascript
javascript+css 网页每次加载不同样式的实现方法
2009/12/27 Javascript
javascript中使用正则表达式清理table样式的代码
2020/04/01 Javascript
JS与Ajax Get和Post在使用上的区别实例详解
2016/06/08 Javascript
AngularJS实现DOM元素的显示与隐藏功能
2016/11/22 Javascript
angularJs使用$watch和$filter过滤器制作搜索筛选实例
2017/06/01 Javascript
vue实现一个移动端屏蔽滑动的遮罩层实例
2017/06/08 Javascript
基于js中的原型(全面讲解)
2017/09/19 Javascript
JavaScript实现简单轮播图效果
2018/12/01 Javascript
微信小程序实现抖音播放效果的实例代码
2020/04/11 Javascript
Vue组件简易模拟实现购物车
2020/12/21 Vue.js
Django集成百度富文本编辑器uEditor攻略
2014/07/04 Python
使用wxPython获取系统剪贴板中的数据的教程
2015/05/06 Python
Python带动态参数功能的sqlite工具类
2018/05/26 Python
python+pandas+时间、日期以及时间序列处理方法
2018/07/10 Python
在Python中使用gRPC的方法示例
2018/08/08 Python
在Python函数中输入任意数量参数的实例
2019/07/16 Python
Python RabbitMQ实现简单的进程间通信示例
2020/07/02 Python
python用700行代码实现http客户端
2021/01/14 Python
HTML5 Canvas图像模糊完美解决办法
2018/02/06 HTML / CSS
简单叙述一下MYSQL的优化
2016/05/09 面试题
写自荐信三大法宝
2014/01/24 职场文书
体育教师自我鉴定
2014/02/12 职场文书
公务员政审单位鉴定材料
2014/05/16 职场文书
农村党支部书记司法四风问题对照检查材料
2014/09/26 职场文书
实习证明格式范文
2014/10/14 职场文书
个人年终总结开头
2015/03/06 职场文书
法定代表人身份证明书
2015/06/18 职场文书
宾馆客房管理制度
2015/08/06 职场文书
Tomcat项目启动失败的原因和解决办法
2022/04/20 Servers
Redis主从复制操作和配置详情
2022/09/23 Redis