vue自定义指令directive实例详解


Posted in Javascript onJanuary 17, 2018

下面给大家介绍vue自定义指令directive,具体内容如下所示:

vue自定义指令directive实例详解 

官网截图实例

vue除了一些核心的内部定义的指令(v-model,v-if,v-for,v-show)外,vue也允许用户注册自己的一些功能性的指令,有时候你实在是要对Dom操作,这个时候是自定义指令最合适的了。

来直接看例子:当页面加载时使得元素获得焦点(autofocus 在移动版 Safari 是不支持的),就是当页面加载好了,不做任何的操作使得表单自动获得焦点,光标自动在某个表单上代码如下:

Vue.directive('zsqfocus', { // 注册一个全局自定义指令 `v-zsqfocus`,在main.js文件里
 inserted: function (el) { // 当被绑定的元素插入到 DOM 中时自动调用
 el.focus() // 聚焦元素
 }
})

如果想注册局部指令,组件中也接受一个 directives 的选项:

<script>
export default {
 directives: { // 指令的定义
  zsqfocus: {
   inserted: function (el) { // 获得焦点
    el.focus()
   }
  }
  }
 }
</script>

然后你可以在模板中任何组件上使用新的 v-zsqfocus 属性,如下:

<template>
 <input v-zsqfocus /> //调用 
</template>

举了一个跟官网一样的例子,directives跟methods,mounted等是一个级别的可以同时使用。

PS:下面看下vue之自定义指令directive的实例代码,具体代码如下所示:

<template>
 <div>
  <input v-model="dir1" v-my-directive1="dir1"/>
 <input v-model="dir2" v-my-directive2="dir2"/>
 </div>
</template>
<script>
 export default {
  data(){
   return {



 dir1:'',



 dir2:''



 }
  },
  directives:{


 //直接绑定函数,作用等同于update,不做准备工作和扫尾工作
   myDirective1(val){
    console.log(val)
   },


 myDirective2:{




bind(){





 //第一次绑定到元素的准备工作




},




update(val,old){





//在绑定到元素后立即以初始值第一次调用,然后每次example2变化都会调用update





console.log(val)




},





unbind(){





//销毁前的清理工作




}


 }
  }
 }
</script>

总结

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

Javascript 相关文章推荐
JavaScript 仿关机效果的图片层
Dec 26 Javascript
javascript 哈希表(hashtable)的简单实现
Jan 20 Javascript
JavaScript创建对象的写法
Aug 29 Javascript
JavaScript获取当前日期是星期几的方法
Apr 06 Javascript
javascript解三阶幻方(九宫格)
Apr 22 Javascript
【经典源码收藏】jQuery实用代码片段(筛选,搜索,样式,清除默认值,多选等)
Jun 07 Javascript
原生JS实现图片轮播切换效果
Dec 15 Javascript
JS常见疑难点分析之match,charAt,charCodeAt,map,search用法分析
Dec 25 Javascript
基于Vue开发数字输入框组件
Dec 19 Javascript
Vue组件实现触底判断
Jun 26 Javascript
JS替换字符串中指定位置的字符(多种方法)
May 28 Javascript
使用element-ui +Vue 解决 table 里包含表单验证的问题
Jul 17 Javascript
移动web开发之touch事件实例详解
Jan 17 #Javascript
详解layui弹窗父子窗口之间传参数的方法
Jan 16 #Javascript
微信小程序实现image组件图片自适应宽度比例显示的方法
Jan 16 #Javascript
基于VUE移动音乐WEBAPP跨域请求失败的解决方法
Jan 16 #Javascript
AngularJS监听ng-repeat渲染完成的两种方法
Jan 16 #Javascript
微信小程序实现流程进度的图样式功能
Jan 16 #Javascript
使用vue官方提供的模板vue-cli搭建一个helloWorld案例分析
Jan 16 #Javascript
You might like
php加密算法之实现可逆加密算法和解密分享
2014/01/21 PHP
php获取QQ头像并显示的方法
2014/12/23 PHP
PHP Yii框架之表单验证规则大全
2015/11/16 PHP
WordPress导航菜单的滚动和淡入淡出效果的实现要点
2015/12/14 PHP
php通过会话控制实现身份验证实例
2016/10/18 PHP
laravel自定义分页效果
2017/07/23 PHP
js 中的switch表达式使用示例
2020/06/03 Javascript
JavaScript事件委托的技术原理探讨示例
2014/04/17 Javascript
获取中文字符串的实际长度代码
2014/06/05 Javascript
深入理解JavaScript系列(49):Function模式(上篇)
2015/03/04 Javascript
javascript数组克隆简单实现方法
2015/12/16 Javascript
在IE8上JS实现combobox支持拼音检索功能
2016/05/23 Javascript
15分钟深入了解JS继承分类、原理与用法
2019/01/19 Javascript
JavaScript实现页面中录音功能的方法
2019/06/04 Javascript
NestJs使用Mongoose对MongoDB操作的方法
2021/02/22 Javascript
Python中用于去除空格的三个函数的使用小结
2015/04/07 Python
pandas 实现将重复表格去重,并重新转换为表格的方法
2018/04/18 Python
如何实现删除numpy.array中的行或列
2018/05/08 Python
Python编程深度学习计算库之numpy
2018/12/28 Python
Django如何将URL映射到视图
2019/07/29 Python
Pycharm创建项目时如何自动添加头部信息
2019/11/14 Python
Python双链表原理与实现方法详解
2020/02/22 Python
django前端页面下拉选择框默认值设置方式
2020/08/09 Python
HTML+CSS3模拟心的跳动实例代码
2017/09/05 HTML / CSS
德国高端单身人士交友网站:ElitePartner
2018/12/02 全球购物
目标责任书范文
2014/04/14 职场文书
涉密人员保密承诺书
2014/05/28 职场文书
优秀研究生主要事迹
2014/06/03 职场文书
新郎婚礼答谢词
2015/01/04 职场文书
主持人开幕词
2015/01/29 职场文书
政审证明材料
2015/06/19 职场文书
2016见义勇为事迹材料汇总
2016/03/01 职场文书
个人房屋租赁合同(标准范本)
2019/09/16 职场文书
python实现Thrift服务端的方法
2021/04/20 Python
如何利用js在两个html窗口间通信
2021/04/27 Javascript
JavaScript实现班级抽签小程序
2021/05/19 Javascript