vue 自定义指令

2018-04-15 admin

vue 自定义指令篇 对于vue的指令,有我们熟悉的v-model、v-show等,但我们也可以自己定义我们需要的指令,如比较常用的v-lazy懒加载 官方详细文档:https://cn.vuejs.org/v2/guide… 通过directive就可以在Vue上注册指令

// 注册一个全局自定义指令 `v-focus`
Vue.directive('focus', {
  // 当被绑定的元素插入到 DOM 中时……
  inserted: function (el) {
    // 聚焦元素
    el.focus()
  }
})

一个指令定义对象可以提供如下几个钩子函数 (均为可选):

bind:只调用一次,指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。

inserted:被绑定元素插入父节点时调用 (仅保证父节点存在,但不一定已被插入文档中)。

update:所在组件的 VNode 更新时调用,但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变,也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。

componentUpdated:指令所在组件的 VNode 及其子 VNode 全部更新后调用。

unbind:只调用一次,指令与元素解绑时调用。

指令模块化 比如我们熟悉的v-show,不看源码,我们分析v-show这个指令的功能,v-show="true || false"显示或者因此节点,但元素不占据其本来的空间。因此这可以通过我们常用的display="none"一样 我们的想法是注册一个指令,通过给钩子函数传递参数true 或 false去改变节点的display的值

stealth.js

// 元素隐藏显示指令
export default {
  // 只调用一次,指令第一次绑定到元素时调用
  bind (el, binding, vnode) {
    el.style.display = binding.value ? 'block' : 'none'
  },
  // 被绑定元素插入父节点时调用
  inserted (el, binding, vnode) {
    console.log('inserted')
  },
  // 所在组件的 VNode 更新时调用
  update (el, binding, vnode) {
    console.log('update')
    el.style.display = binding.value ? 'block' : 'none'
  },
  // 指令所在组件的 VNode 及其子 VNode 全部更新后调用
  componentUpdated (el, binding, vnode) {
    console.log('componentUpdated')
  },
  unbind (el, binding, vnode) {
    console.log('unbind')
  }
}

指令模块化,通过index.js管理自定义指令。添加新指令只需在modules中加入模块,并引入 index.js

import stealth from './modules/stealth'
export {stealth}

全局Vue中通过directive绑定全部指令 mian.js

import * as directives from './directives'
// 注册指令
Object.keys(directives).forEach(k => Vue.directive(k, directives[k]))

业务组件中,加入v-*(指令名)

<div v-stealth="true"></div>

我们成功完成自定义指令的模块化


完整项目github地址:https://github.com/hty7/vue-demo

原文链接:https://segmentfault.com/a/1190000014370906

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-27618.html

文章标题:vue 自定义指令

相关文章
ionic2 tabs 图标自定义实例
一、准备资源 tabs icon 的svg格式的矢量图片 二、生成字体样式文件 打开icoMoon网站去制作字体文件。 三、使用字体文件 解压下载的文件,将其中的fonts文件夹拷贝到ionic2项目的src/assest目录下。并...
2017-03-13
vue-awesome-swiper的使用以及API整理
一、先说一个看关于vue-awesome-swiper的一个坑 vue项目的package.json中显示的&lt;span style=“color: orange;”&gt;“vue-awesome-swiper”: “^2.5.4”&...
2018-04-26
详解使用vue-router进行页面切换时滚动条位置与滚动监听事件
按照正常的产品逻辑,我们在进行页面切换时滚动条应该是在页面顶部的,可是。。。在使用vue-router进行页面切换时,发现滚动条所处的位置被自动记录了下来,且在另一个组件内定义的滚动监听事件仍会运行,着实吃了一大惊。。。 说说我的破解方法:...
2017-03-13
Vue 短信验证码组件开发详解
Vue.js(读音 /vjuː/, 类似于 view)是一个构建数据驱动的 web 界面的库。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。 Vue.js 自身不是一个全能框架——它只聚焦于视图层。因此...
2017-03-17
Vue.js 2.0中select级联下拉框实例
在网上搜索了Vuejs2.0 动态级联select许久未果,决定自己总结一下自己的经验,有关select在Vue.js 2.0版本中的应用。首先我先说一下的我使用的技术,我参考了网上成熟的经验,选择以Vue.js 2.0+Vue-route...
2017-03-14
Vue.js原理分析之observer模块详解
介绍 observer是Vue核心中最重要的一个模块(个人认为),能够实现视图与数据的响应式更新,底层全凭observer的支持。 **注意:**本文是针对Vue@2.1.8进行分析 observer模块在Vue项目中的代码位置是src/c...
2017-03-16
详解vue-validator(vue验证器)
官方文档:http://vuejs.github.io/vue-validator/zh-cn/index.html github项目地址:https://github.com/vuejs/vue-validator 单独使用vue-val...
2017-03-07
vue2 如何实现div contenteditable=“true”(类似于v-model)的效果
发现问题 在 vue2 中对表单控件有着良好的双向数据绑定机制,但是对于要特定实现某些功能的输入时,我们就不得不使用到 contenteditable=“true” 的 div ,而在这个 div 上是使用 v-model 是没有效果的。那...
2017-03-20
vuejs2.0实现分页组件使用$emit进行事件监听数据传递的方法
如果我有几个页面都需要有分页效果,不可能每个页面都去复制一下这段代码吧,意思是封装一下,变成通用的组件。 首先使用基础 Vue 构造器,创建一个“子类”,Vue.extend( options ) var barHtml = &#x27;&...
2017-03-15
详解Vue2 无限级分类(添加,删除,修改)
本人对vue不是很懂,搜索了很多关于Vue2 无限级分类介绍,下面我来记录一下,有需要了解Vue2 无限级分类的朋友可参考。希望此文章对各位有所帮助。 &lt;!DOCTYPE html&gt; &lt;html lang=&quot;en...
2017-03-13
回到顶部