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 相关文章推荐
页面只有一个text的时候,回车自动submit的解决方法
Aug 12 Javascript
sogou地图API用法实例教程
Sep 11 Javascript
jQuery实现Div拖动+键盘控制综合效果的方法
Mar 10 Javascript
浅析创建javascript对象的方法
May 13 Javascript
深入浅析JavaScript中的arguments对象(强力推荐)
Jun 03 Javascript
javascript input输入框模糊提示功能的实现
Sep 25 Javascript
js如何找出字符串中的最长回文串
Jun 04 Javascript
JavaScript引用类型Function实例详解
Aug 09 Javascript
vue组件数据传递、父子组件数据获取,slot,router路由功能示例
Mar 19 Javascript
怎样在vue项目下添加ESLint的方法
May 16 Javascript
JS监听组合按键思路及实现过程
Apr 17 Javascript
Element Dialog对话框的使用示例
Jul 26 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
PHP5函数小全(分享)
2013/06/06 PHP
phpstrom使用xdebug配置方法
2013/12/17 PHP
写一段简单的PHP建立文件夹代码
2015/01/06 PHP
PhpStorm2020.1 安装 debug - Postman 调用的详细教程
2020/08/17 PHP
DWZ table的原生分页浅谈
2013/03/01 Javascript
jquery的flexigrid无法显示数据提示获取到数据
2013/07/19 Javascript
JS禁用浏览器退格键实现思路及代码
2013/10/29 Javascript
JavaScript中Math对象方法使用概述
2014/01/02 Javascript
node.js下when.js 的异步编程实践
2014/12/03 Javascript
基于Arcgis for javascript实现百度地图ABCD marker的效果
2015/09/12 Javascript
自制微信公众号一键排版工具
2016/09/22 Javascript
jQuery给指定的table动态添加删除行的操作方法
2016/10/12 Javascript
基于javascript实现的快速排序
2016/12/02 Javascript
5 种JavaScript编码规范
2018/01/30 Javascript
Koa2微信公众号开发之消息管理
2018/05/16 Javascript
Js和VUE实现跑马灯效果
2020/05/25 Javascript
[03:30]DOTA2完美“圣”典精彩集锦
2016/12/27 DOTA
[34:44]Liquid vs TNC Supermajor 胜者组 BO3 第二场 6.4
2018/06/05 DOTA
教你安装python Django(图文)
2013/11/04 Python
Python抓取京东图书评论数据
2014/08/31 Python
在Python中使用元类的教程
2015/04/28 Python
python ubplot使用方法解析
2020/01/10 Python
Django+Uwsgi+Nginx如何实现生产环境部署
2020/07/31 Python
纯CSS3制作漂亮带动画效果的主机价格表
2015/04/25 HTML / CSS
HTML5 window/iframe跨域传递消息 API介绍
2013/08/26 HTML / CSS
.net软件工程师面试题
2015/03/31 面试题
护理专业本科生自荐信
2013/10/01 职场文书
医学生职业规划范文
2014/01/05 职场文书
优秀团支部事迹材料
2014/02/08 职场文书
餐厅筹备计划书
2014/04/25 职场文书
岗位说明书范文
2014/05/07 职场文书
环保倡议书怎么写
2014/05/16 职场文书
涉密人员保密承诺书
2014/05/28 职场文书
本科毕业生应聘自荐信范文
2014/06/26 职场文书
2014年纪检工作总结
2014/11/12 职场文书
好媳妇事迹材料
2014/12/24 职场文书