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 相关文章推荐
javascript 基础篇4 window对象,DOM
Mar 14 Javascript
原生javaScript做得动态表格(注释写的很清楚)
Dec 29 Javascript
原生js和jquery实现图片轮播淡入淡出效果
Apr 23 Javascript
JS实现的Select三级下拉菜单代码
Aug 20 Javascript
ajax如何实现页面局部跳转与结果返回
Aug 24 Javascript
JS实现Fisheye效果动感放大菜单代码
Oct 21 Javascript
浅析jquery数组删除指定元素的方法:grep()
May 19 Javascript
jquery广告无缝轮播实例
Jan 05 Javascript
jq checkbox 的全选并ajax传参的实例
Apr 01 Javascript
jQuery实现的事件绑定功能基本示例
Oct 11 jQuery
Vue中的循环及修改差值表达式的方法
Aug 29 Javascript
Vue.js获取手机系统型号、版本、浏览器类型的示例代码
May 10 Javascript
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 变量定义方法
2009/06/14 PHP
一个简单的网页密码登陆php代码
2012/07/17 PHP
解析php多线程下载远程多个文件
2013/06/25 PHP
PHP Session 变量的使用方法详解与实例代码
2013/09/11 PHP
php使用filter_var函数判断邮箱,url,ip格式示例
2019/07/06 PHP
Javascript 调试利器 Firebug使用详解六
2009/07/05 Javascript
用于节点操作的API,颠覆原生操作HTML DOM节点的API
2010/12/11 Javascript
jQuery中需要注意的细节问题小结
2011/12/06 Javascript
JS动态增加删除UL节点LI及相关内容示例
2014/05/21 Javascript
nodejs中的fiber(纤程)库详解
2015/03/24 NodeJs
jquery使用hide方法隐藏指定id的元素
2015/03/30 Javascript
JS日期加减,日期运算代码
2015/11/05 Javascript
Node.js Addons翻译(C/C++扩展)
2016/06/12 Javascript
深入理解Promise.all
2018/08/08 Javascript
JavaScript适配器模式原理与用法实例详解
2020/03/09 Javascript
React Native登录之指纹登录篇的示例代码
2020/11/03 Javascript
vue使用exif获取图片旋转,压缩的示例代码
2020/12/11 Vue.js
python输出指定月份日历的方法
2015/04/23 Python
python控制nao机器人身体动作实例详解
2019/04/29 Python
利用CSS3的flexbox实现水平垂直居中与三列等高布局
2016/09/12 HTML / CSS
HTML5之SVG 2D入门10—滤镜的定义及使用
2013/01/30 HTML / CSS
用HTML5中的Canvas结合公式绘制粒子运动的教程
2015/05/08 HTML / CSS
时装界的“朋克之母”:Vivienne Westwood
2017/07/06 全球购物
英国男士时尚购物网站:Stuarts London
2017/10/22 全球购物
西雅图的买手店:Totokaelo
2019/10/19 全球购物
护理专业推荐信
2013/11/07 职场文书
国际贸易个人求职信范文
2014/01/04 职场文书
医疗纠纷协议书
2014/04/16 职场文书
房产公证书格式
2015/01/26 职场文书
伏羲庙导游词
2015/02/09 职场文书
个人学习总结范文
2015/02/15 职场文书
数学备课组工作总结
2015/08/12 职场文书
2016年春节问候语
2015/11/11 职场文书
解决Mysql的left join无效及使用的注意事项说明
2021/07/01 MySQL
关于CentOS 8 搭建MongoDB4.4分片集群的问题
2021/10/24 MongoDB
漫画《尖帽子的魔法工坊》宣布动画化
2022/04/06 日漫