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 相关文章推荐
jquery中的 $(&quot;#jb51&quot;)与document.getElementById(&quot;jb51&quot;) 的区别
Jul 26 Javascript
JavaScript入门之基本函数详解
Oct 21 Javascript
验证码按回车不变解决方法
Mar 29 Javascript
Jquery实现视频播放页面的关灯开灯效果
May 27 Javascript
Web开发必知Javascript技巧大全
Feb 23 Javascript
深入理解JavaScript 函数
Jun 06 Javascript
由简入繁实现Jquery树状结构的方法(推荐)
Jun 10 Javascript
详解如何去除vue项目中的#——History模式
Oct 13 Javascript
简单两步使用node发送qq邮件的方法
Mar 01 Javascript
微信小程序人脸识别功能代码实例
May 07 Javascript
JS实现选项卡效果的代码实例
May 20 Javascript
Vue实现省市区三级联动
Dec 27 Vue.js
详解处理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 编程的 5个良好习惯
2009/02/20 PHP
php数组函数序列之sort() 对数组的元素值进行升序排序
2011/11/02 PHP
php抓取并保存网站图片的实现代码
2015/10/28 PHP
php变量与JS变量实现不通过跳转直接交互的方法
2017/08/25 PHP
Laravel框架处理用户的请求操作详解
2019/12/20 PHP
php命令行模式代码实例详解
2021/02/26 PHP
JS判断是否为数字,是否为整数,是否为浮点数的代码
2010/04/24 Javascript
jquery解析XML字符串和XML文件的方法说明
2014/02/21 Javascript
JavaScript数组和循环详解
2015/04/27 Javascript
把Node.js程序加入服务实现随机启动
2015/06/25 Javascript
深入浅析JavaScript函数前面的加号和叹号
2016/07/09 Javascript
Bootstrap零基础入门教程(三)
2016/07/18 Javascript
基于NodeJS+MongoDB+AngularJS+Bootstrap开发书店案例分析
2017/01/12 NodeJs
JavaScript装饰器函数(Decorator)实例详解
2017/03/30 Javascript
JavaScript之RegExp_动力节点Java学院整理
2017/06/29 Javascript
基于es6三点运算符的使用方法(实例讲解)
2017/10/12 Javascript
JavaScript实现多叉树的递归遍历和非递归遍历算法操作示例
2018/02/08 Javascript
30分钟快速入门掌握ES6/ES2015的核心内容(上)
2018/04/18 Javascript
JS基于封装函数实现的表格分页完整示例
2018/06/26 Javascript
WebSocket的简单介绍及应用
2019/05/23 Javascript
Python3实现连接SQLite数据库的方法
2014/08/23 Python
Python捕捉和模拟鼠标事件的方法
2015/06/03 Python
Django中对通过测试的用户进行限制访问的方法
2015/07/23 Python
网站渗透常用Python小脚本查询同ip网站
2017/05/08 Python
django模板加载静态文件的方法步骤
2019/03/01 Python
Python实现最常见加密方式详解
2019/07/13 Python
Pycharm连接远程服务器过程图解
2020/04/30 Python
Python实现文件压缩和解压的示例代码
2020/08/12 Python
canvas线条的属性详解
2018/03/27 HTML / CSS
Html5 Canvas实现图片标记、缩放、移动和保存历史状态功能 (附转换公式)
2020/03/18 HTML / CSS
Nice Kicks网上商店:ShopNiceKicks.com
2018/12/25 全球购物
美国肌肉和力量商店:Muscle & Strength
2019/06/22 全球购物
德国亚马逊官方网站:Amazon.de
2020/11/15 全球购物
医院志愿者活动总结
2015/05/06 职场文书
主持人大赛开场白
2015/05/29 职场文书
Python 读取千万级数据自动写入 MySQL 数据库
2022/06/28 Python