vue.js自定义组件directives的实例代码


Posted in Javascript onNovember 09, 2018

自定义指令:以v开头,如:v-mybind。

代码示例:

<input v-mybind />
directives:{
  mybind:{
    bind:function (el) {
     el.value = "this is mybind-bind"
    }
  }}

这时页面初始化时,input中会显示this is mybind-bind。

通过directives注册自定义指令mybind,每一个自定义指令中又提供若干钩子,如示例中的bind,bind的作用是定义一个在绑定时执行一次的初始化动作,观察bind函数,它将指令绑定的DOM作为一个参数,在函数体中,直接操作DOM节点为input赋值。

自定义指令的钩子函数:

bind: function () {},
 inserted: function () {},
 update: function () {},
 componentUpdated: function () {},
 unbind: function () {}

官方说明:

bind: 只调用一次,指令第一次绑定到元素时调用,用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。
inserted: 被绑定元素插入父节点时调用(父节点存在即可调用,不必存在于 document 中)。
update: 被绑定元素所在的模板更新时调用,而不论绑定值是否变化。通过比较更新前后的绑定值,可以忽略不必要的模板更新(详细的钩子函数参数见下)。
componentUpdated: 被绑定元素所在模板完成一次更新周期时调用。
unbind: 只调用一次, 指令与元素解绑时调用。

钩子函数还提供了一些参数,如上面示例中bind:function (el)的el,

钩子函数参数的官方说明:

el: 指令所绑定的元素,可以用来直接操作 DOM 。
binding: 一个对象,包含以下属性:
name: 指令名,不包括 v- 前缀。
value: 指令的绑定值, 例如: v-my-directive="1 + 1", value 的值是 2。
oldValue: 指令绑定的前一个值,仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
expression: 绑定值的字符串形式。 例如 v-my-directive="1 + 1" , expression 的值是 "1 + 1"。
arg: 传给指令的参数。例如 v-my-directive:foo, arg 的值是 "foo"。
modifiers: 一个包含修饰符的对象。 例如: v-my-directive.foo.bar, 修饰符对象 modifiers 的值是 { foo: true, bar: true }。
vnode: Vue 编译生成的虚拟节点,查阅 VNode API 了解更多详情。
oldVnode: 上一个虚拟节点,仅在 update 和 componentUpdated 钩子中可用。

动手实践一下理解更加深刻

代码地址:https://github.com/Demon-han/vue_demo/

其中directives.vue为该实例,其他组件将在其他文章中详细介绍

总结

以上所述是小编给大家介绍的vue.js自定义组件directives的实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
js 函数的副作用分析
Aug 23 Javascript
学习从实践开始之jQuery插件开发 菜单插件开发
May 03 Javascript
js日期对象兼容性的处理方法
Jan 28 Javascript
AngularJS中的$watch(),$digest()和$apply()区分
Apr 04 Javascript
layer实现弹窗提交信息
Dec 12 Javascript
在js代码拼接dom对象到页面上去的模板总结(必看)
Feb 14 Javascript
微信小程序 基础组件与导航组件详细介绍
Feb 21 Javascript
jQuery实现遍历XML节点和属性的方法示例
Apr 29 jQuery
node基于puppeteer模拟登录抓取页面的实现
May 09 Javascript
JavaScript new对象的四个过程实例浅析
Jul 31 Javascript
echarts设置图例颜色和地图底色的方法实例
Aug 01 Javascript
在vue中多次调用同一个定义全局变量的实例
Sep 25 Javascript
详解处理Vue单页面应用SEO的另一种思路
Nov 09 #Javascript
webpack 静态资源集中输出的方法示例
Nov 09 #Javascript
vue中如何去掉空格的方法实现
Nov 09 #Javascript
Vue press 支持图片放大功能的实例代码
Nov 09 #Javascript
KOA+egg.js集成kafka消息队列的示例
Nov 09 #Javascript
详解关于element el-button使用$attrs的一个注意要点
Nov 09 #Javascript
webpack4.x CommonJS模块化浅析
Nov 09 #Javascript
You might like
php数组函数序列之ksort()对数组的元素键名进行升序排序,保持索引关系
2011/11/02 PHP
用Zend Studio+PHPnow+Zend Debugger搭建PHP服务器调试环境步骤
2014/01/19 PHP
PHP输出两个数字中间有多少个回文数的方法
2015/03/23 PHP
PHP动态规划解决0-1背包问题实例分析
2015/03/23 PHP
CodeIgniter生成静态页的方法
2016/05/17 PHP
php如何修改SESSION的生存存储时间的实例代码
2017/07/05 PHP
[原创]PHP实现字节数Byte转换为KB、MB、GB、TB的方法
2017/08/31 PHP
php微信公众号开发之现金红包
2018/04/16 PHP
php+jQuery ajax实现的实时刷新显示数据功能示例
2019/09/12 PHP
《JavaScript DOM 编程艺术》读书笔记之JavaScript 语法
2015/01/09 Javascript
jQuery对象和DOM对象之间相互转换的方法介绍
2015/02/28 Javascript
基于jQuery实现收缩展开功能
2016/03/18 Javascript
Node.js 数据加密传输浅析
2016/11/16 Javascript
jQuery Validate设置onkeyup验证的实例代码
2016/12/09 Javascript
js选项卡的制作方法
2017/01/23 Javascript
JavaScript实现向select下拉框中添加和删除元素的方法
2017/03/07 Javascript
聊聊那些使用前端Javascript实现的机器学习类库
2017/09/18 Javascript
微信小程序的生命周期的详解
2017/10/19 Javascript
js实现以最简单的方式将数组元素添加到对象中的方法
2017/12/20 Javascript
详解jQuery-each()方法
2019/03/13 jQuery
JavaScript中将值转换为字符串的五种方法总结
2019/06/06 Javascript
Vue 权限控制的两种方法(路由验证)
2019/08/16 Javascript
ES6使用 Array.includes 处理多重条件用法实例分析
2020/03/02 Javascript
vue样式穿透 ::v-deep的具体使用
2020/06/04 Javascript
[43:47]DOTA2上海特级锦标赛主赛事日 - 4 败者组第四轮#2 MVP.Phx VS Fnatic第一局
2016/03/05 DOTA
简介Python中用于处理字符串的center()方法
2015/05/18 Python
python学习 流程控制语句详解
2016/06/01 Python
python微信跳一跳系列之棋子定位像素遍历
2018/02/26 Python
基于python 爬虫爬到含空格的url的处理方法
2018/05/11 Python
解决项目pycharm能运行,在终端却无法运行的问题
2019/01/19 Python
Windows下PyCharm2018.3.2 安装教程(图文详解)
2019/10/24 Python
Python基于Tensor FLow的图像处理操作详解
2020/01/15 Python
2014年人事科工作总结
2014/11/19 职场文书
php将xml转化对象的实例详解
2021/11/17 PHP
Python中的程序流程控制语句
2022/02/24 Python
MyBatis核心源码深度剖析SQL语句执行过程
2022/05/20 Java/Android