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 监听textarea中按键事件
Oct 08 Javascript
javascript 面向对象全新理练之继承与多态
Dec 03 Javascript
基于jquery+thickbox仿校内登录注册框
Jun 07 Javascript
Javascript动态创建表格及删除行列的方法
May 15 Javascript
JS实现间歇滚动的运动效果实例
Dec 22 Javascript
Bootstrap CSS使用方法
Dec 23 Javascript
JavaScript中日常收集常见的10种错误(推荐)
Jan 08 Javascript
JavaScript实现水平进度条拖拽效果
Jan 18 Javascript
jQuery插件echarts去掉垂直网格线用法示例
Mar 03 Javascript
详解vue mixins和extends的巧妙用法
Dec 20 Javascript
微信小程序开发之map地图组件定位并手动修改位置偏差
Aug 17 Javascript
vue keep-alive实现多组件嵌套中个别组件存活不销毁的操作
Oct 30 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
浅谈Windows下 PHP4.0与oracle 8的连接设置
2006/10/09 PHP
文件上传的实现
2006/10/09 PHP
解析php下载远程图片函数 可伪造来路
2013/06/25 PHP
PHP中strcmp()和strcasecmp()函数字符串比较用法分析
2016/01/07 PHP
php生成图片缩略图功能示例
2017/02/22 PHP
详解php几行代码实现CSV格式文件输出
2017/07/01 PHP
laravel withCount 统计关联数量的方法
2019/10/10 PHP
一个小型js框架myJSFrame附API使用帮助
2008/06/28 Javascript
ASP SQL防注入的方法
2008/12/25 Javascript
实现超用户体验 table排序javascript实现代码
2009/06/22 Javascript
JavaScript中的集合及效率
2010/01/08 Javascript
纯JavaScript实现的完美渐变弹出层效果代码
2010/04/02 Javascript
解决ExtJS在chrome或火狐中正常显示在ie中不显示的浏览器兼容问题
2013/01/11 Javascript
javascript实现文字图片上下滚动的具体实例
2013/06/28 Javascript
Ajax同步与异步传输的示例代码
2013/11/21 Javascript
jquery实现弹出div,始终显示在屏幕正中间的简单实例
2014/03/08 Javascript
js防止DIV布局滚动时闪动的解决方法
2014/10/30 Javascript
jQuery Mobile框架中的表单组件基础使用教程
2016/05/17 Javascript
AngularJs Forms详解及简单示例
2016/09/01 Javascript
AngularJS实现动态添加Option的方法
2017/05/17 Javascript
vue中七牛插件使用的实例代码
2017/07/28 Javascript
原生js实现html手机端城市列表索引选择城市
2020/06/24 Javascript
对vuex中store和$store的区别说明
2020/07/24 Javascript
详解Python中的__getitem__方法与slice对象的切片操作
2016/06/27 Python
python3制作捧腹网段子页爬虫
2017/02/12 Python
python实现多层感知器MLP(基于双月数据集)
2019/01/18 Python
解决Djang2.0.1中的reverse导入失败的问题
2019/08/16 Python
Django Form常用功能及代码示例
2020/10/13 Python
给导游的表扬信
2014/01/10 职场文书
洗车工岗位职责
2014/03/15 职场文书
倡议书格式
2014/04/14 职场文书
大队干部竞选演讲稿
2014/04/28 职场文书
2015年元旦演讲稿
2014/09/12 职场文书
节水倡议书
2015/01/19 职场文书
党支部承诺书
2015/01/20 职场文书
2015年度个人工作总结报告
2015/10/24 职场文书