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脚本
Aug 04 Javascript
jquery下动态显示jqGrid以及jqGrid的属性设置容易出现问题的解决方法
Oct 22 Javascript
js实现收缩菜单效果实例代码
Oct 30 Javascript
javascript中if和switch,==和===详解
Jul 30 Javascript
Javascript中浏览器窗口的基本操作总结
Aug 18 Javascript
js创建对象几种方式的优缺点对比
Sep 28 Javascript
使用vue.js编写蓝色拼图小游戏
Mar 17 Javascript
js实现自动图片轮播代码
Mar 22 Javascript
webpack打包js的方法
Mar 12 Javascript
vue中使用better-scroll实现滑动效果及注意事项
Nov 15 Javascript
js构造函数constructor和原型prototype原理与用法实例分析
Mar 02 Javascript
如何使用CocosCreator对象池
Apr 14 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记录日志的实现代码
2011/08/08 PHP
解析PHP中DIRECTORY_SEPARATOR,PATH_SEPARATOR两个常量的作用
2013/06/21 PHP
对比PHP对MySQL的缓冲查询和无缓冲查询
2016/07/01 PHP
thinkPHP框架通过Redis实现增删改查操作的方法详解
2019/05/13 PHP
使用Laravel中的查询构造器实现增删改查功能
2019/09/03 PHP
YII2框架中使用RBAC对模块,控制器,方法的权限控制及规则的使用示例
2020/03/18 PHP
node.js中的fs.lchown方法使用说明
2014/12/16 Javascript
Jquery实现图片预加载与延时加载的方法
2014/12/22 Javascript
jQuery调取jSon数据并展示的方法
2015/01/29 Javascript
js控制网页背景音乐播放与停止的方法
2015/02/06 Javascript
浅析JavaScript回调函数应用
2016/05/22 Javascript
Ext JS框架程序中阻止键盘触发回退或者刷新页面的代码分享
2016/06/07 Javascript
第一次接触神奇的Bootstrap网格系统
2016/07/27 Javascript
JS查找字符串中出现最多的字符及个数统计
2017/02/04 Javascript
seajs下require书写约定实例分析
2018/05/16 Javascript
详解如何用VUE写一个多用模态框组件模版
2018/09/27 Javascript
vsCode安装使用教程和插件安装方法
2020/08/24 Javascript
vue移动端城市三级联动组件使用详解
2019/07/26 Javascript
Vue组件为什么data必须是一个函数
2020/06/11 Javascript
python服务器端收发请求的实现代码
2014/09/29 Python
Python中的字典与成员运算符初步探究
2015/10/13 Python
Python实现选择排序
2017/06/04 Python
python中协程实现TCP连接的实例分析
2018/10/14 Python
python matplotlib画图库学习绘制常用的图
2019/03/19 Python
记录Python脚本的运行日志的方法
2019/06/05 Python
详解查看Python解释器路径的两种方式
2020/10/15 Python
Python通过len函数返回对象长度
2020/10/22 Python
Dogeared官网:在美国手工制作的珠宝
2019/08/24 全球购物
阿姆斯特丹城市卡:Amsterdam Pass
2019/12/01 全球购物
Booking.com缤客中国:全球酒店在线预订网站
2020/05/03 全球购物
室内设计专业个人的自我评价
2013/10/19 职场文书
社区巾帼文明岗事迹材料
2014/06/03 职场文书
师德师风自我剖析材料
2014/09/27 职场文书
党建工作整改措施
2014/10/28 职场文书
只用20行Python代码实现屏幕录制功能
2021/06/02 Python
Python进行区间取值案例讲解
2021/08/02 Python