vue自定义指令实现方法详解

本文实例讲述了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程序设计有所帮助。

赞 (0)

相关推荐

  • Vue.directive 自定义指令的问题小结

    1.今天复习一下Vue自定义指令的代码,结果出现一个很无语的结果,先贴代码. 2. <div id="example" v-change-by="myColor"></div> <script src="vue.min.js"></script> <script> new Vue({ el:"#example", data:{ msg:"", my

  • 基于Vue自定义指令实现按钮级权限控制思路详解

    思路: 登录:当用户填写完账号和密码后向服务端验证是否正确,验证通过之后,服务端会返回一个token,拿到token之后(我会将这个token存贮到sessionStorage中,保证刷新页面后能记住用户登录状态),前端会根据token再去拉取一个 user_info 的接口来获取用户的详细信息(如用户权限,用户名等等信息). 权限验证:通过token获取用户对应的 role,自定义指令,获取路由meta属性里btnPermissions( 注: meta.btnPermissions是存放按钮

  • vue自定义指令实现仅支持输入数字和浮点型的示例

    再开始本篇的讨论之前,先思考几个问题: 使用html元素属性type='number'是否可以满足要求 Vue中指令一般被设计用来操作dom元素的,而vue视图是基于数据模型的,如何在操作dom的同时,同时更新数据 你定义的指令不能只能在input元素上使用,还要支持在其父元素上使用,自定义组件及第三方组件上使用 你的指令是不是支持局部作用域,比如for循环渲染的数据的单元item,如何识别这个item进行数据更新和dom操作 如何控制字符数目,超出禁止输入 如何实现全局性的功能定义,从而在各个

  • Vue自定义指令使用方法详解

    Vue自定义指令使用方法详解

    Vue自定义指令的使用,具体内容如下 1.自定义指令的语法 Vue自定义指令语法如下: Vue.directive(id, definition) 传入的两个参数,id是指指令ID,definition是指定义对象.其中,定义对象可以提供一些钩子函数 2.钩子函数 定义对象的钩子函数如下: 钩子函数的参数 el: 指令所绑定的元素,可以用来直接操作 DOM . binding: 一个对象,包含以下属性: *name: 指令名,不包括 v- 前缀. *value: 指令的绑定值, 例如: v-my

  • vue自定义指令实现方法详解

    本文实例讲述了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,defin

  • Vue自定义指令v-focus实例详解

    Vue自定义指令v-focus实例详解

    目录 前言 自定义指令 directive 项目实际使用 技术背景 实际操作 优势 setTimeout(fn, 0) 永远的神 $nextTick(callback) 小结 前言 本文直接参考vue2.0官方文档, 并演示博主项目中的使用 自定义指令 directive 除了核心功能默认内置的指令 (v-model 和 v-show),Vue 也允许注册自定义指令.注意,在 Vue2.0 中,代码复用和抽象的主要形式是组件.然而,有的情况下,你仍然需要对普通 DOM 元素进行底层操作,这时候就

  • vue自定义指令directive实例详解

    vue自定义指令directive实例详解

    下面给大家介绍vue自定义指令directive,具体内容如下所示: 官网截图实例 vue除了一些核心的内部定义的指令(v-model,v-if,v-for,v-show)外,vue也允许用户注册自己的一些功能性的指令,有时候你实在是要对Dom操作,这个时候是自定义指令最合适的了. 来直接看例子:当页面加载时使得元素获得焦点(autofocus 在移动版 Safari 是不支持的),就是当页面加载好了,不做任何的操作使得表单自动获得焦点,光标自动在某个表单上代码如下: Vue.directive

  • AngularJS创建自定义指令的方法详解

    本文实例讲述了AngularJS创建自定义指令的方法.分享给大家供大家参考,具体如下: 这是一篇译文,来自angular开发者说明的指令.主要面向已经熟悉angular开发基础的开发者.这篇文档解释了什么情况下需要创建自己的指令,和如何去创建指令. 什么是指令 从一个高的层面来讲,指令是angular $compile服务的说明,当特定的标签(属性,元素名,或者注释) 出现在DOM中的时候,它让编译器附加指定的行为到DOM上. 这个过程是很简单的.angular内部有很用这样自带的指令,比如说n

  • vue2.0自定义指令示例代码详解

    1.什么是指令? 指令通常以"v-"作为前缀, 以方便Vue知道你在使用一种特殊的标记. 除了 Vue 核心携带着的一些默认指令(v-model 和 v-show)之外, Vue 还允许你注册自己的自定义指令.某些情况下,还是需要对普通元素进行一些底层 DOM 访问, 这也是自定义指令仍然有其使用场景之处. 2.全局指令: 当页面加载时,元素将获取焦点,事实上,在访问页面时,如果你还没有点击任何地方,上面的输入框现在应该处于获取焦点的状态.现在让我们构建指令以完成此效果: <te

  • vue自定义全局共用函数详解

    如果你需要让一个工具函数在每个组件可用,可以把方法挂载到 Vue.prototype上. 在main.js中: Vue.prototype.method = function () {} 组件中调用: this.method() 以上这篇vue自定义全局共用函数详解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

  • Jsp自定义标签和方法详解

    Jsp自定义标签和方法详解 首先是要有一个标签处理类,标签处理类可以直接实现Tag接口,也可以继承Java中已经实现了的TagSupport这个类,TagSupport也是继承自Tag接口的,它内部已经对Tag接口进行了实现,一般是继承TagSupport类,之后是重写父类的doStartTag和doEndTag方法, 对于开始标签来说返回值主要有EVAL_BODY_INCLUDE和SKIP_BODY,前者表示执行标签体,后者表示略过标签体: 对于结束标签的返回值主要有两种EVAL_PAGE和S

  • 基于Vue的ajax公共方法(详解)

    为了减少代码的冗余,决定抽离出请求ajax的公共方法,供同事们使用. 我使用了ES6语法,编写了这个方法. /** * @param type 请求类型,分为POST/GET * @param url 请求url * @param contentType * @param headers * @param data * @returns {Promise<any>} */ ajaxData: function (type, url, contentType, headers, data) {

  • 对python 自定义协议的方法详解

    前面说到最近在写python的一些东西,然后和另外一位小伙伴定义了协议,然后昨天我有一部分东西没理解对,昨天上午我自己重写了一遍接收和发送的全部逻辑,昨天下午补了压力测试的脚本,自测没问题之后告知联调的小伙伴. 结果上午还是出了一点问题,然后我们两对代码,他写了一个python的实现.还好最后我这边没问题.(我也害怕是我这边出问题啊,所以我自己的代码都自己检查了好几遍) 简单放一下他的实现: import struct import ctypes class E(Exception): def

随机推荐