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 相关文章推荐
jQuery的初始化与对象构建之浅析
Apr 12 Javascript
js判读浏览器是否支持html5的canvas的代码
Nov 18 Javascript
jquery实现通用版鼠标经过淡入淡出效果
Jun 15 Javascript
js制作带有遮罩弹出层实现登录注册表单特效代码分享
Sep 05 Javascript
javascript实现简单的全选和反选功能
Jan 05 Javascript
详解Node.js如何开发命令行工具
Aug 14 Javascript
JS运动改变单物体透明度的方法分析
Jan 23 Javascript
JS中offset和匀速动画详解
Feb 06 Javascript
element-ui 远程搜索组件el-select在项目中组件化的实现代码
Dec 04 Javascript
js滚轮事件 js自定义滚动条的实现
Jan 18 Javascript
js实现树形数据转成扁平数据的方法示例
Feb 27 Javascript
vue-cil之axios的二次封装与proxy反向代理使用说明
Apr 07 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求小于1000的所有水仙花数的代码
2012/01/10 PHP
linux系统下php安装mbstring扩展的二种方法
2014/01/20 PHP
PHP 在数组中搜索给定的简单实例 array_search 函数
2016/06/13 PHP
yii框架数据库关联查询操作示例
2019/10/14 PHP
javascript函数库-集合框架
2007/04/27 Javascript
火狐浏览器(firefox)下获得Event对象以及keyCode
2008/11/13 Javascript
理解JavaScript的caller,callee,call,apply
2009/04/28 Javascript
javascript Keycode对照表
2009/10/24 Javascript
JQuery 将元素显示在屏幕的中央的代码
2010/02/27 Javascript
JS通过相同的name进行表格求和代码
2013/08/18 Javascript
微信内置浏览器私有接口WeixinJSBridge介绍
2015/05/25 Javascript
jquery插件NProgress.js制作网页加载进度条
2015/06/05 Javascript
基于javascript实现仿百度输入框自动匹配功能
2016/01/03 Javascript
Jquery循环截取字符串的方法(多出的字符串处理成&quot;...&quot;)
2016/11/28 Javascript
基于Node.js的WebSocket通信实现
2017/03/11 Javascript
angularjs $http实现form表单提交示例
2017/06/09 Javascript
利用10行js代码实现上下滚动公告效果
2017/12/08 Javascript
浅谈Webpack自动化构建实践指南
2017/12/18 Javascript
详解angular脏检查原理及伪代码实现
2018/06/08 Javascript
Javascript格式化并高亮xml字符串的方法及注意事项
2018/08/13 Javascript
webpack4+Vue搭建自己的Vue-cli项目过程分享
2018/08/29 Javascript
详解Vue.js自定义tipOnce指令用法实例
2018/12/19 Javascript
深入浅析ng-bootstrap 组件集中 tabset 组件的实现分析
2019/07/19 Javascript
Vue实现商品飞入购物车效果(电商项目)
2019/11/26 Javascript
JavaScript实现浏览器网页自动滚动并点击的示例代码
2020/12/05 Javascript
python中的lambda表达式用法详解
2016/06/22 Python
Python简单获取二维数组行列数的方法示例
2018/12/21 Python
详解django中url路由配置及渲染方式
2019/02/25 Python
美国顶级户外凉鞋品牌:Chacos
2017/03/27 全球购物
荷兰鞋子在线:Nelson Schoenen
2017/12/25 全球购物
奢华时尚的独特视角:La Garçonne
2018/06/07 全球购物
类成员函数的重载、覆盖和隐藏区别
2016/01/27 面试题
毕业生文员求职信
2013/11/03 职场文书
法学院方阵解说词
2014/01/29 职场文书
思想政治表现评语
2015/01/04 职场文书
社区志愿者服务心得体会
2016/01/22 职场文书