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的Ajax的自动完成功能控件简要说明
Feb 22 Javascript
gulp-htmlmin压缩html的gulp插件实例代码
Jun 06 Javascript
从零学习node.js之文件操作(三)
Feb 21 Javascript
vue.js单页面应用实例的简单实现
Apr 10 Javascript
jQuery+SpringMVC中的复选框选择与传值实例
Jan 08 jQuery
vue实现裁切图片同时实现放大、缩小、旋转功能
Mar 02 Javascript
Mint UI实现A-Z字母排序的城市选择列表
Dec 28 Javascript
详解vue组件中使用路由方法
Feb 12 Javascript
vue生命周期与钩子函数简单示例
Mar 13 Javascript
layui use 定义js外部引用函数的方法
Sep 26 Javascript
原生js实现贪吃蛇游戏
Oct 26 Javascript
JavaScript实现切换多张图片
Jan 27 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脚本的10个技巧(1)
2006/10/09 PHP
php自定义apk安装包实例
2014/10/20 PHP
浅析js封装和作用域
2013/07/09 Javascript
js function定义函数的几种不错方法
2014/02/27 Javascript
jQuery html()方法使用不了无法显示内容的问题
2014/08/06 Javascript
使用js画图之饼图
2015/01/12 Javascript
jQuery实现预加载图片的方法
2015/03/17 Javascript
详解前端自动化工具gulp自动添加版本号
2016/12/20 Javascript
vue实现简单表格组件实例详解
2017/04/16 Javascript
详解Vue CLI3配置之filenameHashing使用和源码设计使用和源码设计
2018/08/31 Javascript
Vue3.0结合bootstrap创建多页面应用
2019/05/28 Javascript
layUI实现前端分页和后端分页
2019/07/27 Javascript
JavaScript实现轮播图效果代码实例
2019/09/28 Javascript
Javascript幻灯片播放功能实现过程解析
2020/05/07 Javascript
python实现逆波兰计算表达式实例详解
2015/05/06 Python
python3.5仿微软计算器程序
2020/03/30 Python
python实现可以断点续传和并发的ftp程序
2016/09/13 Python
Python实现的寻找前5个默尼森数算法示例
2018/03/25 Python
Python实现将json文件中向量写入Excel的方法
2018/03/26 Python
Python中创建二维数组
2018/10/17 Python
Python Django的安装配置教程图文详解
2019/07/17 Python
基于Python实现船舶的MMSI的获取(推荐)
2019/10/21 Python
flask框架配置mysql数据库操作详解
2019/11/29 Python
Python解释器以及PyCharm的安装教程图文详解
2020/02/26 Python
Python decorator拦截器代码实例解析
2020/04/04 Python
numpy库ndarray多维数组的维度变换方法(reshape、resize、swapaxes、flatten)
2020/04/28 Python
艺术家策划的室内设计:Curious Egg
2019/03/06 全球购物
数据库的约束含义
2012/09/09 面试题
《愚公移山》教学反思
2014/02/20 职场文书
公证委托书大全
2014/04/04 职场文书
小学生操行评语大全
2014/04/22 职场文书
社区安全生产月活动总结
2014/07/05 职场文书
中共广东省委常委会党的群众路线教育实践活动整改方案
2014/09/23 职场文书
大学生实习推荐信
2015/03/27 职场文书
python 多态 协议 鸭子类型详解
2021/11/27 Python
Docker官方工具docker-registry案例演示
2022/04/13 Servers